I've utilized Angular Material to design my navbar in the app.component.html page. Initially, it features a LOGIN button which should be hidden once the user successfully logs in.
Current method: I'm currently disabling the login button based on a boolean attribute in local storage. However, the button remains enabled until I refresh the page.
Since my Navbar is a shared component, is there a way to dynamically add a new button without requiring a page refresh when the data is updated?
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 assistance would be greatly appreciated