I have 2 angular material icons with in one component, each with a menu - for example menu1 and menu2 . When I click the menu1 icon it will open the menu1 list. Then, when I click the menu2 icon I need to close the menu1 list and open menu2 . But now I need to do two clicks to do this activity. First click closes the menu1 and only second click opens the menu2 . How can I implement one-click open of the second menu using mat-menu
?
Menu1 html
<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu1="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
Menu2 html
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu2="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
Example present angular material sample . My question is how open and close menu in a single short?
Menu1 html
<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu (closed)="menuOneClosed()" #menu1="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
Menu2 html
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu2="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
Component instance
@ViewChild(MatMenuTrigger) menu2: MatMenuTrigger;
menuOneClosed(){
this.meu2.openMenu();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.