How can I check if a mat-menu in Material Angular is open?
Solution 1
You can use Material matMenuTrigger directive to check whether the menu is open or not
<button mat-button [matMenuTriggerFor]="menu" #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}
Check the example here: https://stackblitz.com/edit/angular-9hbzdw
Now you use ngClass binding to change the style of your button!
Solution 2
I faced the same suituation. And I made a CSS work around.
While we click on the menu a custom aria tag is appended to the menu and get removed while we close the dropdoen. With this we can use CSS custom selector (It works with most mordern browsers)
.parentclass a[aria-expanded] { whatever you need }
Some case (if button)
.parentclass button[aria-expanded] { whatever you need }
Thanks,
Solution 3
You can bind your method on "menuOpened", that method will be invoked whenever Menu is opened
<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
And add this method in your component,
isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}
Hope this helps.
Solution 4
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
<button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
<button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
</mat-menu>
selectedMenuItem = 1 // Initial value set to 1
onSelectMenuItem(id): void {
this.selectedMenuItem = id;
}
IvanS95
I'm a programmer, graduate of Systems Engineering at UCA in Managua, Nicaragua. I love working with the latest techonologies and learn as much as I can; I'm mostly into web development, particularly into the use of frameworks like Angular and Vue; as well as CSS Frameworks like Bulma and Bootstrap;
Updated on June 11, 2022Comments
-
IvanS95 almost 2 years
I'm looking for a way to check if my
mat-menu
is open so I can add a class to thebutton
that opened it using[ngClass]
based on the state of the menu.<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button> <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom"> <a routerLink="/attendence/detail" mat-menu-item>View Attendance</a> <a routerLink="/adherence/detail" mat-menu-item>View Adherece</a> <button mat-menu-item>Edit Agent</button> <button mat-menu-item>Upload photo</button> <button mat-menu-item>Deactivate Agent</button> </mat-menu>
-
IvanS95 almost 6 yearsI tried this solution, but as soon as my view is ready I just get an "Undefined" result, I'm outputting the value of "menuOpen"
-
Chellappan வ almost 6 yearsdid you add template refrence
-
IvanS95 almost 6 yearsYes, If I just output the value of t.menuOpen in my HTML like you did: {{ t.menuOpen }} -- I get the "true" and "false" values as intended, but I can't use that value to evaluate a condition to pass to the ngClass directive
-
Chellappan வ almost 6 yearsCan you share your code are you using ViewChild ot something?
-
IvanS95 almost 6 yearsGot it to work! It does seem it had something to do with my syntax. I just started to test using other directives and finally got ngClass working, thank you.
[ngClass]="{'active':t.menuOpen === true}"
I was missing the single quotes on the class name -
Patronaut over 3 yearsEven easier would be to use
[class.open]="t.menuOpen"
.