Angular material menu

Updated April 5, 2023

Introduction to Angular material menu

By the use of Angular material, we can create the menu as well, by using them in the build module and library. the menu is often representing the features and functionality offered by the application which can be used by the user to perform the specific task. Also, it makes the application interactive and easy for the user. By the use of the menu, we can easily list all the options into a single panel we can say and represent these to the user. In Angular material we have modules that enable us to create this menu quick and fast, they are used to represent the list of options and act as the floating panel for us. In the coming section of the article, we will see the configuration required to make this work and also, an idea about implementing a menu for our angular application using the material library in detail.

Syntax

As we know it represents the list of option and we can use the inbuild directive to create our very first menu on material, let’s have a look at the tax to understand it better see below;

<button mat-button [matMenuTriggerFor]="menu">My Menu</button>
<mat-menu #menu="matMenu">
// list of options
</mat-menu>

As you can see in the above piece of syntax we have used ‘mat-menu’ and ‘matMenuTriggerFor’ to create the menu using the angular material library, here keep in mind using ‘matMenuTriggerFor’ is very important in order to view the menu on the screen, this we will discuss in detail in the coming section with some practical example for more clarity.

How to Create a menu in Angular material?

As we have discussed so far, menu represents the list of option in the panel, but in order to make use of these inside our angular application we have to make few configurations and also we will import the module inside which this directive exists. Lets’ get started;

1) MatMenuModule: This module is necessary to import in order to create the menu using angular material, we can import this inside or root module of the application or a child module in which we want to create the menu. For reference see the below line of code, to import this module inside the application;

e.g. :

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

Just paste the above line of code into the root module.

2) mat-menu : This is the selector which can be used on the template to create our menu. We can export it as ‘matMenu’ in the application. It has come up with different property some of them are mentioned below;

1. a) panelClass
2. b) arialLabel
3. c) xPosition
4. d) yPosition

3) mat-menu-item : This is used to represent that single item that will present inside the ‘mat-menu’ tag.

4) matMenuTrigger : This directive is used to trigger the ‘mat-menu’ because just using the tag ‘mat-menu’ inside the template will not render anything we have to use the ‘matMenuTrigger’ in order to trigger it and render it to screen.

Now let’s get started with the steps that needs to be taken in order to step up our angular material project initially for beginners see below;

1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli) The above command will install the CLI globally in our system hence we can use it globally when required.

2) Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your command Promat and press enter see below;

e.g. :

ng new your project name
>> ng new my-first-project

This command will create the project with the name my-first-project, you can create your project with any name mentioned.

3) Just to make sure try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

4) Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any error or bugs inside it.

e.g. :

ng serve

5) go on browser and try to run the application with the below URL :

e.g. :

http://localhps:4200

By default angular project runs on port 4200, you can change it as per your need if required.

6) Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example

Basic menu using angular material :

1) inde.html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Menu demo using angular material</title>
</head>
<body class="mat-app-background">
<menu-demo>Loading.. </menu-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>

2) module.ts code :

import {NgModule} from '@angular/core';
import {MatMenuModule} from '@angular/material/menu';
@NgModule({
exports: [
MatMenuModule,
]
})
export class MenuMaterialDemo {}

3)menu.demo.component.ts code :

import {Component} from '@angular/core';
/**
* @title Menu demo using angular material
*/
@Component({
selector: 'menu-demo',
templateUrl: 'menu-demo.html',
})
export class MenuDemo {}

4) HTML code :

<h5><u><i>Menu demo using angular Material !!</i></u></h5>
<button mat-raised-button color="primary" mat-button [matMenuTriggerFor]="menu">Click for Menu !!</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item>Option 2</button>
<button mat-menu-item>Option 3</button>
<button mat-menu-item>Option 4</button>
<button mat-menu-item>Option 5</button>
<button mat-menu-item>Option 6</button>
</mat-menu>

Output:

before click:

After click :

Conclusion

The menu is important and they represent the list of options to the user and make the features available in one place. Flow the above steps to create your menu using angular material, which is very easy, readable, and easy to maintain as well, and create the menu very fast with default styling for us.

Recommended Articles

We hope that this EDUCBA information on “Angular material menu” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

1. Angular CLI
2. Angular 7 Features
3. Angular Time Picker
4. Angular 2 Directives