Изменить цвет фона кнопки мата при открытии меню мата

Question

Я использую мат-кнопку, чтобы открыть мат-меню:

Кнопка:

<button mat-button class="rec-menu mt-30" backdropClass="customize"
        style="width: 30%; display: block; margin-top: 15%;" (click)="onContextMenu($event)">
        <div style="visibility: hidden; position: fixed" [style.left]="contextMenuPosition.x"
          [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="reporting"></div>
</button>

Меню:

<mat-menu #reporting="matMenu">
        <h3 class="twcenmt">
          Mes prestations
        </h3>
        <button class="twcenmt" mat-menu-item routerLink="/index/access">
          Mes producteurs de déchets
        </button>
        <button class="twcenmt" mat-menu-item routerLink="/index/prestation">
          Ma consommation déchets
        </button>
        <button class="twcenmt" mat-menu-item routerLink="/index/environmental">
          Mes performances environnementales
        </button>
        <button class="twcenmt" mat-menu-item routerLink="/index/sorting-quality">
          Ma qualité de tri
        </button>
        <button class="twcenmt" mat-menu-item routerLink="/index/benchmark">
          Mon benchmark
        </button>
  </mat-menu>

И я пытаюсь изменить цвет фона кнопки мата, когда я открываю меню мата, но это не работает. Я думаю, что меню берет фокус при открытии.

Есть идеи для решения?

Answer 1

В HTML:

<button mat-button [ngClass]="t.menuOpen ? 'active':'inActive'" #t="matMenuTrigger" [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>

В тс:

::ng-deep .active{
 color:red !important;
}

::ng-deep .inActive{
  color: black;
}

Демо:

https://stackblitz.com/edit/angular-sf-mat-progress-bar?file=src%2Fapp%2Fapp.component.css

https://angular-sf-mat-progress-bar.stackblitz.io

Надеюсь, это поможет

Answer 2

С https://material.angular.io/components/menu/api

При открытии меню возникает источник событий

@Output() menuOpened: EventEmitter<void>

Прослушайте это событие и примените изменения к вашему шаблону.