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.
Angular Material Open Menu on Hover
By default, the tab index focus will be on first item of menu. The selected item can be changed by down/up arrow.

Reference

Angular Material Menu

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us