A seamless guide on Angular Material Menu Component

import { MatMenuModule } from "@angular/material/menu";

Menu ItemMenu Item
 

Simple Menu
Menu Item 1Menu Item 2

Before
Item 1Item 2
After
Item 1Item 2
Above
Item 1Item 2
Below
Item 1Item 2

Animal index
VertebratesInvertebrates

FishesAmphibiansReptilesBirdsMammals

InsectsMolluscsCrustaceansCoralsArachnidsVelvet wormsHorseshoe crabs

Baikal oilfishBala sharkBallan wrasseBamboo sharkBanded killifish

Sonoran desert toadWestern toadArroyo toadYosemite toad

Banded Day GeckoBanded Gila MonsterBlack Tree MonitorBlue Spiny LizardVelociraptor
    

{{ item.menuIcon }}
 {{ item.menuLinkText }}

 

menu

home
Home
storefront
Shop By Categories
star_border
Orders
contact_support
Contact Usquiz
FAQ
exit_to_app
Logout

Clothes ShopLogin
Registration
Details of Suppliers    
more_vert
 

 

A seamless guide on Angular Material Menu Component Table of Content 1. Introduction 2. What is the material menu component? 3. Table of contents 4. Changing mat menu position 5. How to create Nested menus? 6. How to disable mat-menu-item? 7. Conclusion   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"; [app.module.ts] 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.   Menu ItemMenu Item [app.component.html] 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.   [app.component.html] 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: Simple Menu Menu Item 1Menu Item 2 [app.component.html] [output:1] 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   Before Item 1Item 2 After Item 1Item 2 Above Item 1Item 2 Below Item 1Item 2 [app.component.html] [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.   Animal index VertebratesInvertebrates FishesAmphibiansReptilesBirdsMammals InsectsMolluscsCrustaceansCoralsArachnidsVelvet wormsHorseshoe crabs Baikal oilfishBala sharkBallan wrasseBamboo sharkBanded killifish Sonoran desert toadWestern toadArroyo toadYosemite toad Banded Day GeckoBanded Gila MonsterBlack Tree MonitorBlue Spiny LizardVelociraptor [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.   {{ item.menuIcon }} {{ item.menuLinkText }} [app.component.html] Searching for Reliable AngularJS Development Company ? CONTACT US 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.   [index.html] In this file, we have added a style sheet file to use different material icons throughout the application.   menu home Home storefront Shop By Categories star_border Orders contact_support Contact Usquiz FAQ exit_to_app Logout Clothes ShopLogin Registration Details of Suppliers more_vert   [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.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.