how to hide mat-toolbar in login page and then show mat-toolbar in home page?

Question

<mat-toolbar color="primary" *ngIf="authenticatedUser=='Yes'" >
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1>Movie Reviews</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="''" style="margin-left: 1200px;"> LogOut </a>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav-content>
    <div style="height: 88vh;">

      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

I added this code in app.component.html.since the value of authenticatedUser is 'No' before logging in and changes to 'Yes' after logging in, but the mat-toolbar is not displaying. Please help me to solve the issue.

Answer 1

Inject router in your app.component.ts constructor

constructor(public router: Router){}

and add ngIf for the mat-toolbar component

<mat-toolbar *ngIf="router.url != '/login'">
...
</mat-toolbar>