Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I check if a mat-menu in Material Angular is open?

I'm looking for a way to check if my mat-menu is open so I can add a class to the button 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>
like image 445
IvanS95 Avatar asked Jul 16 '18 16:07

IvanS95


4 Answers

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!

like image 189
Chellappan வ Avatar answered Nov 04 '22 09:11

Chellappan வ


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,

like image 31
Ramsarvan Avatar answered Nov 04 '22 09:11

Ramsarvan


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.

like image 2
Avinash Maurya Avatar answered Nov 04 '22 09:11

Avinash Maurya


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

like image 1
Malindu Sandaruwan Avatar answered Nov 04 '22 09:11

Malindu Sandaruwan