Angular MatMenu: выделение активного элемента

Question

Я хочу выделить элемент в MenuItem, который активен прямо сейчас, тот, где пользователь присутствует в данный момент.

Например: я перехожу на страницу профиля.Затем я хочу, чтобы этот пункт меню был выделен.Я пробовал это с некоторым HTML и TypeScript, но почему-то это чертовски ошибочно:

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;
   }

Нет ли возможности сделать это с каким-нибудь CSS или чем-то?Я действительно не знаю, почему это не работает.

Вот как это выглядит перед нажатием любой кнопки

После нажатия одной из обеих кнопок обе меняются на эту

Answer 1

Вы были почти там сами ... Мне пришлось поставить кавычки вокруг условий в [ngStyle], чтобы заставить ваш код работать

релевантный 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>

завершено здесь работает стек стека