CODEWITHSUNDEEP
angularangular-material
zwei
zwei

Reputation: 3

Modify mat-button background color when mat-menu is opened

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

Answers (2)

Anoop Rajasekhara Warrier
Anoop Rajasekhara Warrier

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

Kiran Shinde
Kiran Shinde

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

Related Questions