-1

Todo :

  • I want to make it so that
    when a certain page is open, the link in the sidebar becomes active
    (that is, it is highlighted in some color).


Code :

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list >
      <a mat-list-item href="/admin">Admins</a>
      <a mat-list-item href="/second-page">Second Page</a>
      <a mat-list-item [matMenuTriggerFor]="menu">
        Third Page
      </a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button class="transparent"
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset | async)!.matches">
        <mat-icon class="fa fa-bars"></mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
Edric
  • 24,639
  • 13
  • 81
  • 91
user10568869
  • 1
  • Does this answer your question? [In Angular, how do you determine the active route?](https://stackoverflow.com/questions/34323480/in-angular-how-do-you-determine-the-active-route) – Edric Feb 23 '20 at 04:59

1 Answers1

2

Use RouterLink in combination with RouterLinkActive.

Gordon Westerman
  • 1,046
  • 10
  • 12