Change the buttons on the angular material Nav-bar based on page - html

Question

I have my navbar deigned using angular material in my app.component.html page.
It initially contains LOGIN button, but when user is logged in successfully, login button should be hidden
Current approach:
I am disabling the login button based on boolean attribute in localstorage, but in this case, login button is not disabled until i refresh my page.
My Navbar is created as shared component, So Is there a way i can add new button based on page and data is updated without refreshing the page?
app.component.html:
<app-navbar></app-navbar>
<router-outlet></router-outlet>
Navbar.component.html:
<mat-toolbar color="primary" class="mat-elevation-z">
<span><mat-icon>post_add</mat-icon> ED-Planner</span>
<div class="spacer"> </div>
<button mat-button [routerLink]="['/user']">Home</button>
<button mat-raised-button color="accent" [routerLink]="['/user/signup']">Signup</button>
</mat-toolbar>
Any help would be appreciated

Answer 1

Well, user data usually is stored in localstorage.
If you create a service for example, you can store it there too, and provide it (make sure its providedIn root, so there will be only 1 instance).
After you log in your user, you can store it's data in the service, or localstorage (please pay attention for security), you can do something like this:
<ng-container *ngIf=isLoggedIn; else loggedOut>
//Your content when the user is logged in), few else buttons for example profile or something
</ng-container>
<ng-template #loggedOut>
//your login section
</ng-template>