Angular Material Open Menu on Hover

By Arvind Rai, 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>

The template reference variable menuTrigger is passed to a method and that method can be called on an event.

openMyMenu(menuTrigger: MatMenuTrigger) {
     menuTrigger.openMenu();
}

In the above method we call 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>

menu-app.component.ts

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

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
           <app-menu></app-menu>
          `
})
export class AppComponent {
}

app.module.ts

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.