Angular Material Menu Component
Angular Course
Angular Material Menu Component: An Overview
The menu component of Angular Material is used to show a Menu with different menu items to navigate from one page to another. Well, it is a simple floating menu that contains different menu options with the appropriate link to the other pages of the application, we can use a menu inside a toolbar, and drawer, and a footer as well depending on project requirements. The main module of the Angular Material for implementing the menu is called MatMenuModuleand to show the menu element in the HTML template, we can use the mat-menu selectorwhich is used to show the floating menu along with the menu items.In this Angular Material Tutorial, we are going to implement a 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 material menu module from the angular material package into our root module file along with other related modules as described below.
App.module.ts
Import the different classes for the menu component and other components as given below.
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,
]
In the above example, we have imported four different elements of Angular material for using the menu, button, card, and icon modules and combinedly we will create our layout effectively.
Here, in this example, we are going to trigger the menu based on button click that is why we have imported the button module and also going to use icons with it.
Step 2
After importing all the required modules, the next step is to create and use the material menu element using the selector mat-menuand for that open the app.component.html file and paste the following lines of code snippets.
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:It is used for showing some static data and it is the wrapper of the material menu element
- Mat-button:A material button is used to trigger a click event when we want to open the menu manually or programmatically
- matMenuTriggerFor:It is a directive, which is used to trigger the menu options when the button click event is triggered because the mat-menu cannot open menu items by itself
- #basicmenu:This identifies that the name with the basic menu will act as a menu component when the button click event is triggered
- Mat-menu-item:This is used to specify the items on the menu once the main menu is accessed when either the click or the hover event triggers
Step 3
So far, we have implemented all necessary configurations such as importing essential modules and the template menu configuration.
Menu with Icons
In our previous example, we implemented a simple menu, but in the same way, we can also use different material icons with menu and menu items for representing menu items in a unique way such as home menu items with the home icons. For that just follow the simple steps described below.
Step 1
For this example, I am going to use the different material icons and for that, we need to add a style sheet that allows us to access the icon themes and related features, we can include it as given below.
/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 a style sheet file to use different material icons throughout the application.
Step 2
After the icon-related themes and font configuration, the next step Is to implement and use the directive called mat-icon, for that, 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 the menu element is the same and it is the same as the above example, but a different part is that we have used material icons with the menu items so that each menu item has multiple icons so once the menu item gets rendered, each item contains icon elements.
<mat-con>
This directive is used to include and use the material icons along with the different components such as the menu. We need to provide an appropriate icon name with it as per the need such as the back menu may have a back icon, the home menu item may have a home icon, and so on.
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 cases where we have a large number of pages in a single application, and we allow the user to use all the pages of the application from a 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 follow the simple step and we will have a 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 three different menus:
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>
When the user clicks on the button, a child menu will appear named the 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 of the values, 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 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 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>
Summary
A floating menu for page navigation is provided by the Angular Material menu component. It is flexible, supporting icon-based menus, simple menus, and even nested menus for intricate navigation. Buttons can be used to launch menus, and positioning and icon directives can be used to personalize them.
Previous Tutorial
