CODEWITHSUNDEEP
htmlcssangulartypescriptangular-material
CptDayDreamer
CptDayDreamer

Reputation: 1794

Angular MatMenu: highlighting active item

I want to highlight the element in the MenuItem that is active right now, the one where the user is present at the moment.

For example: I am navigating to the profile page. Then I want this menu entry to be highlighted. I've tried it with some HTML and TypeScript but somehow it bugs like hell:

StackBlitz: https://stackblitz.com/edit/angular-vgp585

HTML:

 <mat-toolbar color="primary" style="height:67px;">
   <mat-menu #menu="matMenu">
     <button mat-menu-item id="settings" *ngIf="authenticationService.currentUserValue" [routerLink]="['/settings']"
       (click)="setActiveItem('settings')">
       <mat-icon [ngStyle]="{'color' : activeItem===settings ? 'blue' : 'rgba(0,0,0,.54)' }">settings</mat-icon>
       <span
         [ngStyle]="{'font-weight': activeItem===settings ? 'bold' : 'normal' }">{{ 'HEADER.SETTINGS' | translate }}</span>
     </button>
     <button mat-menu-item *ngIf="authenticationService.currentUserValue" [routerLink]="['/profile']"
       (click)="setActiveItem('profile')">
       <fa-icon [icon]="['fas', 'address-card']"
         [ngStyle]="{'color' : activeItem===profile ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
       </fa-icon>
       <span
         [ngStyle]="{'font-weight': activeItem===profile ? 'bold' : 'normal' }">{{ 'HEADER.PROFILE' | translate }}</span>
     </button>
     <button mat-menu-item *ngIf="authenticationService.currentUserValue" [matMenuTriggerFor]="subMenu">
       <mat-icon>language</mat-icon>
       <span>{{ 'HEADER.LANGUAGE' | translate }}</span>
     </button>
     <button mat-menu-item>
       <mat-icon>notifications_off</mat-icon>
       <span>{{ 'HEADER.DISABLEALERTS' | translate }}</span>
     </button>
     <button mat-menu-item (click)="logout()" [routerLink]="['/chat']">
       <fa-icon style="color: rgba(0,0,0,.54)" [icon]="['fas', 'sign-out-alt']" class="font-awesome" size="lg"></fa-icon>
       <span>{{ 'HEADER.LOGOUT' | translate }}</span>
     </button>
   </mat-menu>
   <mat-menu #subMenu="matMenu" [overlapTrigger]="false">
     <button mat-menu-item [ngStyle]="{'color':lang === translate.currentLang ? 'blue' : 'black' }"
       *ngFor="let lang of translate.getLangs()" (click)="translate.use(lang)">{{ lang }}</button>
   </mat-menu>
 </mat-toolbar>

TypeScript:

   activeItem: string;
 
   setActiveItem(page: string) {
     this.activeItem = page;
   }

Is there no possbility to do it with some CSS or something? I dont really know why this does not work.

Thats what it looks like before pressing any button

Thats what it looks like before pressing any button

After pressing one of the both buttons both change to that

After pressing one of the both buttons both change to that

Upvotes: 2

Views: 14483

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

You were almost there youself... I had to put quotes around conditions in the [ngStyle] to get your code to work

relevant HTML:

<mat-toolbar color="primary" style="height:67px;">
    MatMenuStyle
    <button mat-fab [matMenuTriggerFor]="menu" >
    <fa-icon [icon]="['fas', 'address-card']"
       class="font-awesome" size="lg">
        </fa-icon>
  </button>

  <mat-menu #menu="matMenu">
    <button mat-menu-item id="settings"
      (click)="setActiveItem('settings')">
            <fa-icon [icon]="['fas', 'cog']"
        [ngStyle]="{'color' : activeItem==='settings' ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
      </fa-icon>
      <span
        [ngStyle]="{'font-weight': activeItem===settings ? 'bold' : 'normal' }"> SETTINGS</span>
    </button>
    <button mat-menu-item 
      (click)="setActiveItem('profile')">
      <fa-icon [icon]="['fas', 'address-card']"
        [ngStyle]="{'color' : activeItem==='profile' ? 'blue' : 'rgba(0,0,0,.54)' }" class="font-awesome" size="lg">
      </fa-icon>
      <span
        [ngStyle]="{'font-weight': activeItem===profile ? 'bold' : 'normal' }">PROFILE</span>
    </button>
  </mat-menu>
</mat-toolbar>

complete working stackblitz here

Upvotes: 5

Related Questions