I want to highlight the button in toolbar when either of the menu is selected in angular

by

I have implemented a toolbar that has different buttons and those buttons trigger menu which also has buttons with routerLink. I want to highlight the button in toolbar when either of the menu is selected in angula.

Consider the below code. I want Employee button to highlight only when either button list is clicked or button add employee is clicked in menu.

HTML-

<button mat-button [matMenuTriggerFor]="employeeMenu"  routerLinkActive="active">Employee</button>
    <mat-menu #employeeMenu [overlapTrigger]="false" yPosition="below">
      <button mat-menu-item routerLink="/employee/employeesList">
        <mat-icon>list</mat-icon>
        <span>List</span>
      </button>
      <button mat-menu-item routerLink="/employee/addEmployee">
        <mat-icon>edit</mat-icon>
        <span>Add Employee</span>
      </button>
    </mat-menu>

I tried using routerLinkActive in button employee along with routerLink=”employee” but the button employee is getting highlighted on click even when I have not clicked on menu button.

I figured it out!
Here is the code –

<button mat-button [matMenuTriggerFor]="employeeMenu"  routerLinkActive="active" [ngClass]="{'active': list.isActive || addEmp.isActive }">Employee</button>
    <mat-menu #employeeMenu [overlapTrigger]="false" yPosition="below">
      <button mat-menu-item routerLink="/employee/employeesList" routerLinkActive #list="routerLinkActive">
        <mat-icon>list</mat-icon>
        <span>List</span>
      </button>
      <button mat-menu-item routerLink="/employee/addEmployee" routerLinkActive #addEmp="routerLinkActive">
        <mat-icon>edit</mat-icon>
        <span>Add Employee</span>
      </button>
    </mat-menu>

The tab will get highlighted only when anything from list is selected and not when it is clicked.

Leave a Comment