CODEWITHSUNDEEP
javascripthtmlangulartypescript
Igor Shvets
Igor Shvets

Reputation: 547

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

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},
        ]
    },
];

Upvotes: 1

Views: 86

Answers (3)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

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

Upvotes: 2

T. Shashwat
T. Shashwat

Reputation: 1165

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.

Upvotes: 1

Ritesh Waghela
Ritesh Waghela

Reputation: 3727

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.

Upvotes: 0

Related Questions