Angular Material Open Menu on Hover
September 29, 2022
On this page we will learn to open menu programmatically on hover in Angular Material application. The openMenu()
method of MatMenuTrigger
directive opens menu panel programmatically.
MatMenuTrigger methods :
The
MatMenuTrigger
directive is applied to an element that should trigger a mat-menu
. The MatMenuTrigger
has following methods.
openMenu() : Opens the menu.
closeMenu() : Closes the menu.
toggleMenu() : Toggles the menu between the open and closed states.
triggersSubmenu() : Whether the menu triggers a sub-menu or a top-level one.
updatePosition() : Updates the position of the menu to ensure that it fits all options within the viewport.
focus() : Focuses the menu trigger.
On this page we will create a menu that will open on
mouseover
event.
Technologies Used
Find the technologies being used in our example.1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0
Using openMenu()
The openMenu()
method of MatMenuTrigger
directive is used to open the menu. To create the MatMenuTrigger
instance, we use template reference variable.
<button mat-icon-button #menuTrigger="matMenuTrigger" (mouseover)="openMyMenu(menuTrigger)" [matMenuTriggerFor]="myMenu"> Menu </button>
menuTrigger
is passed to a method and that method can be called on an event.
openMyMenu(menuTrigger: MatMenuTrigger) { menuTrigger.openMenu(); }
openMenu()
that will open menu panel. The openMyMenu()
method will be called on mouseover
event.
Complete Example
menu-app.component.html<table class="menu"><tr><td> <button mat-icon-button #menuTrigger1="matMenuTrigger" (mouseover)="openMyMenu(menuTrigger1)" [matMenuTriggerFor]="myMenu1"> Menu 1 </button> <mat-menu #myMenu1="matMenu"> <ng-template matMenuContent> <button mat-menu-item>A 1</button> <button mat-menu-item>A 2</button> <button mat-menu-item>A 3</button> </ng-template> </mat-menu> </td><td> <button mat-icon-button #menuTrigger2="matMenuTrigger" (mouseover)="openMyMenu(menuTrigger2)" [matMenuTriggerFor]="myMenu2"> Menu 2 </button> <mat-menu #myMenu2="matMenu"> <ng-template matMenuContent> <button mat-menu-item>B 1</button> <button mat-menu-item>B 2</button> <button mat-menu-item>B 3</button> </ng-template> </mat-menu> </td></tr></table>
import { Component } from '@angular/core'; import { MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'app-menu', templateUrl: './menu-app.component.html' }) export class MenuAppComponent { openMyMenu(menuTrigger: MatMenuTrigger) { menuTrigger.openMenu(); } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-menu></app-menu> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatMenuModule } from '@angular/material/menu'; import { MatButtonModule } from '@angular/material/button'; import { AppComponent } from './app.component'; import { MenuAppComponent } from './menu-app.component'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MatMenuModule, MatButtonModule ], declarations: [ AppComponent, MenuAppComponent ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
