Angular Material Nested Menu
September 24, 2022
On this page we will learn to create nested menus in our Angular Material application.
1. Menu is created using
<mat-menu>
element.
2. Menu items are created using
mat-menu-item
attribute.
3. To create a sub-menu, we need to set
[matMenuTriggerFor]
on the mat-menu-item
that should trigger the sub-menu.
4. To support the Menu in our Angular Material application, we need to import
MatMenuModule
in our application module.
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
Creating Sub-Menu
Here we will create a nested menu for plants. In our example, root menu will contain sub-menus and sub-menu will contain sub-sub-menu and then menu items.Step-1 : Create root menu with some sub-menus.
<button mat-button [matMenuTriggerFor]="plants">Plants</button> <mat-menu #plants="matMenu"> <button mat-menu-item [matMenuTriggerFor]="vegetables">Vegetables</button> ------ </mat-menu>
mat-menu-item
that triggers to sub-sub-menu using [matMenuTriggerFor]
.
Step-2 : Create sub-sub-menu.
<mat-menu #vegetables="matMenu"> <button mat-menu-item [matMenuTriggerFor]="leafy">Leafy Green</button> ------ </mat-menu>
<mat-menu #leafy="matMenu"> <button mat-menu-item>Lettuce</button> ------ </mat-menu>
Complete Example
menu-app.component.html<button mat-button [matMenuTriggerFor]="plants">Plants</button> <mat-menu #plants="matMenu"> <button mat-menu-item [matMenuTriggerFor]="vegetables">Vegetables</button> <button mat-menu-item [matMenuTriggerFor]="fruits">Fruits</button> </mat-menu> <mat-menu #vegetables="matMenu"> <button mat-menu-item [matMenuTriggerFor]="leafy">Leafy Green</button> <button mat-menu-item [matMenuTriggerFor]="marrow">Marrow</button> <button mat-menu-item>Potato</button> <button mat-menu-item>Onion</button> </mat-menu> <mat-menu #fruits="matMenu"> <button mat-menu-item>Apple</button> <button mat-menu-item>Banana</button> <button mat-menu-item>Mango</button> <button mat-menu-item>Orange</button> <button mat-menu-item>Papaya</button> </mat-menu> <mat-menu #leafy="matMenu"> <button mat-menu-item>Lettuce</button> <button mat-menu-item>Spinach</button> <button mat-menu-item>Silverbeet</button> </mat-menu> <mat-menu #marrow="matMenu"> <button mat-menu-item>Pumpkin</button> <button mat-menu-item>Cucumber</button> <button mat-menu-item>Zucchini</button> </mat-menu>
import { Component } from '@angular/core'; @Component({ selector: 'app-menu', templateUrl: './menu-app.component.html' }) export class MenuAppComponent { }
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.
