What is the best way to determine if a mat-menu in Material Angular is currently displaying or hidden?

Question

What is the best way to determine if a mat-menu in Material Angular is currently displaying or hidden?

Is there a way to determine if the mat-menu is currently open so that I can dynamically apply a class to the corresponding button using [ngClass] depending on the menu's state?

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

css angular typescript angular-material

Answer 1

Answer №1

If you want to determine whether the menu is open or not, you can utilize the Material matMenuTrigger directive.

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

Take a look at this example for reference: https://stackblitz.com/edit/angular-9hbzdw

You can also use ngClass binding to dynamically change the style of your button!

Answer 2

If you want to determine whether the menu is open or not, you can utilize the Material matMenuTrigger directive.

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

Take a look at this example for reference: https://stackblitz.com/edit/angular-9hbzdw

You can also use ngClass binding to dynamically change the style of your button!

Answer 3

Answer №2

If you want to trigger a method when the Menu is opened, you can bind it to the "menuOpened" event.

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

Don't forget to add the "isOpened" method in your component:

isOpened(evt:any){
    // Set a flag here that you can use in ng-class for the buttons.
}

I hope this explanation was helpful to you.

Answer 4

If you want to trigger a method when the Menu is opened, you can bind it to the "menuOpened" event.

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

Don't forget to add the "isOpened" method in your component:

isOpened(evt:any){
    // Set a flag here that you can use in ng-class for the buttons.
}

I hope this explanation was helpful to you.

Answer 5

Answer №3

At times, you may encounter an issue with the mat-menu in your Angular application that is using onPush changeDetection. In such situations, it is essential to inform Angular whether the menu is open or closed.

Angular Material provides events to determine the status of the menu:

menuOpened: Triggered when the menu is opened.
menuClosed: Fired when the menu is closed.

Below is the code snippet illustrating this:

<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
            (menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
      Menu
      <span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>

Answer 6

At times, you may encounter an issue with the mat-menu in your Angular application that is using onPush changeDetection. In such situations, it is essential to inform Angular whether the menu is open or closed.

Angular Material provides events to determine the status of the menu:

menuOpened: Triggered when the menu is opened.
menuClosed: Fired when the menu is closed.

Below is the code snippet illustrating this:

<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
            (menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
      Menu
      <span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>

Answer 7

Answer №4

I encountered a similar situation and found a solution using CSS.

When the menu is clicked, a custom aria tag is added to the menu and then removed when the dropdown is closed. This allows us to utilize a CSS custom selector (compatible with most modern browsers).

.parentclass a[aria-expanded] { apply your styling here }

In some cases (for buttons):

.parentclass button[aria-expanded] { apply your styling here }

Thank you,

Answer 8

I encountered a similar situation and found a solution using CSS.

When the menu is clicked, a custom aria tag is added to the menu and then removed when the dropdown is closed. This allows us to utilize a CSS custom selector (compatible with most modern browsers).

.parentclass a[aria-expanded] { apply your styling here }

In some cases (for buttons):

.parentclass button[aria-expanded] { apply your styling here }

Thank you,

Answer 9

Answer №5

 <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 // Starting with a default value of 1
 onSelectMenuItem(id): void {
    this.selectedMenuItem = id;
 }

Answer 10

 <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 // Starting with a default value of 1
 onSelectMenuItem(id): void {
    this.selectedMenuItem = id;
 }

What is the best way to determine if a mat-menu in Material Angular is currently displaying or hidden?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Troubleshooting: When attempting to integrate a Flask Backend with a NextJS frontend, encountering issues with files not being received properly

Issues with launching project following updates to Angular-cli

How about: "Loop through an array of objects fetched from an observable and initiate an HTTP request for each object's ID?"

Issue: CSS breaking in Node.js Express app when navigating with multiple child paths or parameter paths in the route.Description: Encounter

Sending information to a deeply nested child component in Angular 4

Encountering a validation error when attempting to submit the form

What causes block elements to act like inline elements?

Guide on associating an array of object keys with an array of their corresponding values within a specified object

To modify the pageSize of the KendoGrid in order to display 1-10 out of 100, you can customize the appearance and functionality of the page numbers by changing

Turn off hover opacity effect for a specific image

Guide to synchronizing schema changes for legacy document collections in MongoDB using default values

objects continue to escape the confines of the container

Adjust the Express JS response to prevent certain specific values from being included

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

Is there a way to create a mobile-exclusive slideshow using JavaScript?

Using ts-loader with Webpack 2 will result in compatibility issues

Tips for updating the barchart legend in an Angular application

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Bootstrap: the rows are breaching the boundaries of their parent containers, causing them to overlap with