Angular Material Menu Component

Manav Pandya  Print 
05 Oct 2018
 
Intermediate
349

Menu component of Angular Material is used to show Menu with different menu items to navigate from one page to another. Well, it is a simple floating menu which contains different menu options with the appropriate link of the other pages of the application, we can use menu inside a toolbar, and drawer and footer as well depend on project requirements. In this article, we are going to implement menu with different options which are described below in brief.

Basic Menu

In the basic menu, we are just going to render different menu options, let's see the step by step procedure.

Step 1

The first step is to import the menu module from the angular material package into our root module file as described below.

App.module.ts

Import the different class for the menu component and others like this.

 import { MatCardModule, MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
 
 Now, we need to add all these classes to the import array.
 imports: [
 CommonModule,
 MatCardModule,
 MatButtonModule,
 MatMenuModule,
 MatIconModule,
 ]

Here, in this example, we are going to trigger menu based on button click that is why we have imported button module and also going to use icons with it.

Step 2

Open the app.component.html file and paste the following lines of source code.

App.component.html
<mat-card>
<div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
</div>
</mat-card>
<mat-card>
<h2>Basic Menu</h2>
<button mat-button [matMenuTriggerFor]="basicmenu">Menu</button>
<mat-menu #basicmenu="matMenu">
 <button mat-menu-item>Angular</button>
 <button mat-menu-item>React</button>
 <button mat-menu-item>Vue</button>
 <button mat-menu-item>Meteor</button>
 <button mat-menu-item>Vanilla</button>
</mat-menu>
</mat-card>

In this example, we have used different material components like

  • Mat-card

    To hold our menu example within card component

  • Mat-button

    A material button, which is used to trigger a click event when we want to open the menu

  • matMenuTriggerFor

    It is a directive, which is used to trigger the menu options when the button click event will be triggered because mat-menu cannot open menu items by itself

  • #basicmenu

    Which identifies that the named with the basic menu will act as a menu component when button click event will be triggered

  • Mat-menu-item

    This is used to specify the items of the menu

Step 3

So far, we have implemented all necessary things, now its time to run above example and see the output.

Output

And when we click on the menu button, menu options will appear like this.

This is how we have implemented a simple menu; let’s try the menu with material icons in our next example.

Menu with Icons

In our previous example, we have implemented a simple menu, but the same way we can also use different material icons with menu and menu items.For that just follow the simple steps described below.

Step 1

For this example, I am going to use different material icons so for that we need to add style sheet like this.

/src/index.html
 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Angularmaterialcomponents</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- To use material icons -->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
 <app-root></app-root>
 </body>
 </html>

In this file, we have added style sheet file to use different material icons throughout the application.

Step 2

Open the app.component.html file and paste the following source code.

App.component.html
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Basic Menu With Icons</h2>
 <button mat-button [matMenuTriggerFor]="menu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>
 <mat-menu #menu="matMenu">
 <button mat-menu-item>
 <mat-icon>favorite</mat-icon>Angular
 </button>
 <button mat-menu-item>
 <mat-icon>favorite_border</mat-icon>React
 </button>
 <button mat-menu-item>
 <mat-icon>launch</mat-icon>Vue
 </button>
 <button mat-menu-item>
 <mat-icon>input</mat-icon>Meteor
 </button>
 <button mat-menu-item>
 <mat-icon>lock</mat-icon>Vanilla
 </button>
 </mat-menu>
 </mat-card>

In this example, you can observe that menu is simple which is same as above example, but a different part is that we have used material icons with the menu items.

<mat-con>

This is used to include and use material icons with different components.We need to provide an appropriate icon name with it.

Step 3

Now let’s run the above example and you can see output like this.

In this image, you can see that with the menu I have used one material icon, now press on the button and will get output like this.

So when we click on the menu, the menu items will be appeared and can see that there are different icons will be used with each and every menu items.

Nested Menu

So far, we have developed a simple menu with menu items, but what if we have menu items in different categories. The nested menu will be helpful in such case where we have a large number of pages in the single application, and we allow the user to use all the pages of application from the single page. For that, we have flexibility with a material menu that we can also create a nested menu with the child menu items, for that just follow the simple step and we will have nested material menu.

Step 1

Open the app.component.html file and paste the following lines of source code.

App.component.ts
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Menu Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>
 Nested Menu
 </h2>
 <button mat-button [matMenuTriggerFor]="rootMenu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>
 <mat-menu #rootMenu="matMenu">
 <button mat-menu-item [matMenuTriggerFor]="subMenu1">Angular</button>
 <button mat-menu-item [matMenuTriggerFor]="subMenu2">React</button>
 </mat-menu>
 
 <mat-menu #subMenu1="matMenu">
 <button mat-menu-item>Angular 1.x</button>
 <button mat-menu-item>Angular 2</button>
 <button mat-menu-item>Angular 4</button>
 <button mat-menu-item>Angular 5</button>
 <button mat-menu-item>Angular 6</button>
 </mat-menu>
 
 <mat-menu #subMenu2="matMenu">
 <button mat-menu-item>React 16.0</button>
 <button mat-menu-item>React 16.1</button>
 <button mat-menu-item>React 16.2</button>
 <button mat-menu-item>React 16.3</button>
 <button mat-menu-item>React 16.4</button>
 <button mat-menu-item>React 16.5</button>
 </mat-menu>
 
 </mat-card>

Let me explain a bit about the above example.In this example, mainly we have different three menus named :

  • rootMenu

  • subMenu1

  • subMenu2

Our first menu will be triggered when the button is clicked, and you can see the code like this.

 
 <button mat-button [matMenuTriggerFor]="rootMenu">
 <mat-icon>dashboard</mat-icon>
 Menu
 </button>

And when the user clicks on the button, child menu will be appeared named root menu, which contains two different menu categories like

  • Angular

  • React

 
 <mat-menu #rootMenu="matMenu">
 <button mat-menu-item [matMenuTriggerFor]="subMenu1">Angular</button>
 <button mat-menu-item [matMenuTriggerFor]="subMenu2">React</button>
 </mat-menu>

When we click one-two of the value, it will find the sub child module with the relevant name from the list of child menus and trigger the menu item to the end-user.So when the user selects on any of the child items of the menu from Angular or React, at that time their respective menus will appear and we have implemented the code like below.

 
 <mat-menu #subMenu1="matMenu">
 <button mat-menu-item>Angular 1.x</button>
 <button mat-menu-item>Angular 2</button>
 <button mat-menu-item>Angular 4</button>
 <button mat-menu-item>Angular 5</button>
 <button mat-menu-item>Angular 6</button>
 </mat-menu>
 
 <mat-menu #subMenu2="matMenu">
 <button mat-menu-item>React 16.0</button>
 <button mat-menu-item>React 16.1</button>
 <button mat-menu-item>React 16.2</button>
 <button mat-menu-item>React 16.3</button>
 <button mat-menu-item>React 16.4</button>
 <button mat-menu-item>React 16.5</button>
 </mat-menu>

Step 2

We have developed our nested menu with nested menu items, now next move is to run above example and see that how it works.When you run above example, you can see first output like this.

When we click on the menu button, now we will have two different child menu items named Angular and React, and it looks like this.

And when the user hovers over the child menu items, they can see the list of submenu items like this.

As you can see into the above image that we have now three level menus with different child options, to use the material menu for your project, you can implement routing with these child menu items.

Summary

In this part of angular material tutorial series, we have learned three different example of Angular Material Menu Component.

  • Simple menu

  • Simple menu with Material icons

  • Nested Menu

This is the basic article which shows that how to integrate material menu component with our angular application in a very easy manner, thus we can customize its properties to be used in our upcoming projects, Thanks for reading.

Crack Your Technical Interview

 
Join Our Hands-on Training Programs

+