A seamless guide on Angular Material Menu Component
Harshal Suthar
Posted on February 13, 2023
Introduction
The Angular Material Menu component is used to display a menu with several menu items which can be used to navigate from one page to another. Well, it's a simple floating menu that contains various menu selections with appropriate links to the application's various pages. We can also use menus inside toolbars, drawers, and footers depending on the project requirements.
In this article, we will construct a menu with many options, that will be quickly explained below.
What is the material menu component?
The Material menu is a floating panel containing a list of options.
In Angular, we may apply the MatMenuModule angular material menu module to build menu items.
The element does not render anything on its own.
Table of contents
Step:1: Import angular material menu module
A material menu module can be included in our components ts file, app.module.ts file, and any other common material module used throughout the application.
import { MatMenuModule } from "@angular/material/menu";
Step:2: Use a mat menu selector to display menu items
Use mat-menu selector, which is nothing more than a floating panel containing a list of menu selections, after importing MatMenuModule in our component code.
<mat-menu menu="materialMenu"><button mat-menu-item="">Menu Item</button><button mat-menu-item="">Menu Item</button>
</mat-menu>
As a Menu Item, I'm using the button element.
And do not forget to add mat-menu-item to the menu options.
In the mat-menu variable, add a template reference variable which will be used to refer to our menu panel.
In this scenario, I've included the variable menu.
<mat-menu menu="materialMenu"> </mat-menu>
Step:3 : Add matMenuTriggerFor element.
The above mat-menu element has no render on the user interface.
The mat-menu is a directive that is used to trigger the menu options when the button click event is triggered because it cannot open menu items by itself.
The menu should be tied to a trigger element that uses the matMenuTriggerFor directive to open and shut the menu.
Simple menu:
<button mat-button="">Simple Menu</button>
<mat-menu menu="matMenu"><button mat-menu-item="">Menu Item 1</button><button mat-menu-item="">Menu Item 2</button>
</mat-menu>
Changing mat menu position
The material menu will be displayed by default above the menu trigger element.
If you want the menu to display before or after the menu trigger element, set the xPosition value to "before" or "after."
Set the xPosition value to "before" or "after" if you just want the menu to appear before or after the menu trigger element.
The xPosition attribute sets the menu all along the horizontal axis.
The yPosition attribute is used to change the menu's vertical position.
Set the yPosition property to "above" to display the menu just above the menu trigger element.
The values "above" and "below" are accepted by yPosition.
Read More: Creating Reusable Angular Components
<button mat-button="">Before</button>
<mat-menu beforemenu="matMenu" xposition="before"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">After</button>
<mat-menu aftermenu="matMenu" xposition="after"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">Above</button>
<mat-menu abovemenu="matMenu" yposition="above"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu><button mat-button="">Below</button>
<mat-menu belowmenu="matMenu" yposition="below"><button mat-menu-item="">Item 1</button><button mat-menu-item="">Item 2</button>
</mat-menu>
[output:2]
[output:3]
[output:4]
[output:5]
How to create Nested menus?
So far, we've created a simple menu with menu items, but what if we have several categories of menu items?
The nested menu will be useful if we have a big number of pages in a single application so we want the user to be able to access all of the application's pages from a single page.
With a material menu, we have the right to customize a nested menu with the child menu items; just follow the basic steps and we will have a nested material menu.
It is quite simple to create nested menus or sub-menus.
Using the matmenutriggerFor attribute, we have to add another menu to the mat-menu-item.
<button mat-button="">Animal index</button>
<mat-menu animals="matMenu"><button mat-menu-item="">Vertebrates</button><button mat-menu-item="">Invertebrates</button>
</mat-menu>
<mat-menu vertebrates="matMenu"><button mat-menu-item="">Fishes</button><button mat-menu-item="">Amphibians</button><button mat-menu-item="">Reptiles</button><button mat-menu-item="">Birds</button><button mat-menu-item="">Mammals</button>
</mat-menu>
<mat-menu invertebrates="matMenu"><button mat-menu-item="">Insects</button><button mat-menu-item="">Molluscs</button><button mat-menu-item="">Crustaceans</button><button mat-menu-item="">Corals</button><button mat-menu-item="">Arachnids</button><button mat-menu-item="">Velvet worms</button><button mat-menu-item="">Horseshoe crabs</button>
</mat-menu>
<mat-menu fish="matMenu"><button mat-menu-item="">Baikal oilfish</button><button mat-menu-item="">Bala shark</button><button mat-menu-item="">Ballan wrasse</button><button mat-menu-item="">Bamboo shark</button><button mat-menu-item="">Banded killifish</button>
</mat-menu>
<mat-menu amphibians="matMenu"><button mat-menu-item="">Sonoran desert toad</button><button mat-menu-item="">Western toad</button><button mat-menu-item="">Arroyo toad</button><button mat-menu-item="">Yosemite toad</button>
</mat-menu>
<mat-menu reptiles="matMenu"><button mat-menu-item="">Banded Day Gecko</button><button mat-menu-item="">Banded Gila Monster</button><button mat-menu-item="">Black Tree Monitor</button><button mat-menu-item="">Blue Spiny Lizard</button><button disabled="disabled" mat-menu-item="">Velociraptor</button>
</mat-menu>
[app.component.html]
[output:6]
[output:7]
How to disable mat-menu-item?
The disabled property can be used to disable the mat menu item.
I've added a property called IsDisabled to the MatMenuListItem object described above. It can also be used to turn off the menu link.
<button mat-menu-item="" ngfor="let item of menuListItems">
<mat-icon>{{ item.menuIcon }}</mat-icon>
<span> {{ item.menuLinkText }}</span></button>
[app.component.html]
Searching for Reliable AngularJS Development Company?
Another example of mat-menu with icon:
In this example, I'll use one menu with an icon;
We developed a simple menu in our previous example, but we can also use different material icons with menu and menu items in this example. Simply follow the instructions outlined below to accomplish this.
I'm going to use various material icons in this example, so we'll need a style sheet like this.
<meta charset="utf-8"><title></title><base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"><link href="favicon.ico" rel="icon" type="image/x-icon"><link href="fonts.gstatic.com" rel="preconnect"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><p>
<app-root></app-root></p>
[index.html]
In this file, we have added a style sheet file to use different material icons throughout the application.
<mat-toolbar color="primary">
<mat-toolbar-row><button mat-icon-button="">
<mat-icon>menu</mat-icon></button>
<mat-menu menu="matMenu"><button mat-menu-item="">
<mat-icon>home</mat-icon>
<span>Home</span></button><button mat-menu-item="">
<mat-icon>storefront</mat-icon>
<span>Shop By Categories</span></button><button mat-menu-item="">
<mat-icon>star_border</mat-icon>
<span>Orders</span></button><button mat-menu-item="">
<mat-icon>contact_support</mat-icon>
<span>Contact Us</span></button><button mat-menu-item="">
<mat-icon>quiz</mat-icon>
<span>FAQ</span></button><button mat-menu-item="">
<mat-icon>exit_to_app</mat-icon>
<span>Logout</span></button>
</mat-menu>
<span>Clothes Shop</span><button mat-button="" routerlink="/logincrud">Login</button><button mat-button="" routerlink="/registration">
Registration</button><button mat-button="" routerlink="/menu">
Details of Suppliers</button>
<mat-icon>more_vert</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
<section class="hero is-info is-fullheight is-bold"><div class="hero-body"><div class="container"> </div></div></section>
<!--!doctype-->
[app.component.html]
[output:8]
Conclusion
In this article, we have learned how to integrate a material menu component with our Angular application with step by step procedure. We have also gone through changing the position of mat menu, how to enable and disable it practically.
Posted on February 13, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
