Reputation: 3
I'm using a mat-button to open a mat-menu:
Button:
<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>
Menu:
<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>
And I'm trying to modify the mat-button background-color when I open the mat-menu, but it's not working. I think the menu takes the focus when opened.
Any ideas for a solution?
Upvotes: 0
Views: 2118
Reputation: 1040
In 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>
In ts:
::ng-deep .active{
color:red !important;
}
::ng-deep .inActive{
color: black;
}
Demo:
https://stackblitz.com/edit/angular-sf-mat-progress-bar?file=src%2Fapp%2Fapp.component.css
https://angular-sf-mat-progress-bar.stackblitz.io
Hope this helps
Upvotes: 2
Reputation: 5992
From https://material.angular.io/components/menu/api
There is an event emitter when menu is opened
@Output() menuOpened: EventEmitter<void>
Listen to this event and apply changes to your template.
Upvotes: 0