How to save the value of the button after reloading the page?

Question

In the template component AppComponent , depending on the value, the variable this.loggedInService.isLoggedIn switches between the logIn() and logout() methods, which in the application component AppComponent are subscribed to these methods in the service LoggedinService and depending on the method, change the value of the variable to true or false.

Also in the Guard's method checkLogin (url: string) I return true or false depending on the value of the variable this.loggedInService.isLoggedIn

Everything works, but when I reset the page, I need to keep the value of the input or output button. How to implement it?

template of AppComponent:

  <li class="nav-item"> <a class="btn btn-outline-success" [class.btn-outline-success]="!this.loggedInService.isLoggedIn" [class.btn-outline-danger]="this.loggedInService.isLoggedIn" (click)="this.loggedInService.isLoggedIn ? logout() : logIn()"> {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}} </a> </li> 

code of AppComponent:

 export class AppComponent implements OnInit { constructor(private loggedInService: LoggedinService, private router: Router) {} ngOnInit() {} logIn(): void { this.loggedInService.login().subscribe(() => { if (this.loggedInService.isLoggedIn) { let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl : '/gallery'; this.router.navigate([redirect]); } }); } logout(): void { this.loggedInService.logout(); this.router.navigate(['/']); } } 

LoggedinService:

 export class LoggedinService implements OnInit{ isLoggedIn: boolean = false; redirectUrl: string; constructor() {} ngOnInit() {} login(): Observable<boolean> { return of(true).pipe( delay(100), tap(val => this.isLoggedIn = true) ); } logout(): boolean { return this.isLoggedIn = false; } } 

AuthGuard :

 export class AuthGuard implements CanActivate { constructor(private loggedInService: LoggedinService) { } canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{ let url: string = state.url; return this.checkLogin(url); } checkLogin(url: string): boolean { if (this.loggedInService.isLoggedIn) { return true; } else { this.loggedInService.redirectUrl = url; return false; } } } 

AppRoutingModule

 const appRoutes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'app-root' } ]; 

GalleryRoutingModule

 const galleryRoutes: Routes = [ { path: 'gallery', component: GalleryMainComponent, canActivate: [AuthGuard], children: [ {path: '', component: GalleryComponent,}, {path: 'add', component: GalleryAddComponent}, {path: ':id', component: GalleryItemComponent}, ] }, ]; 

Answer 1

You can save the value in localStorage , also you can create a service to handle set and get the value from localStorage (recommended)

example

localStorage.setItem('login',state);
localStorage.getItem('login'); // string value

Answer 2

Use localStorage to retain the value of input/output

  afterAuthentication(){
     return localStorage.getItem('isLogged', true);
   }

   login(){
     localStorage.setItem('login', true);
   }

   logout(){
   localStorage.setItem('login', false);
   }

and in your ngOnit function check getItem() from locaLStorage check the condition and retain values accordingly.

Answer 3

Since you reload the page, the state of the application gets reset. What you can do is use the localStorage to keep the value of the button and read it from there when the page loads. If there is a value use that else default to your value.