Open In App

Angular Material Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Angular Material is a UI component library developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By using this library, we can significantly increase an end-users user experience, thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code. In this article, we will see the Angular Material Menu.

To create a menu, we can use <mat-menu>, which is a floating panel containing the option lists. The <mat-menu> element does not display anything by itself. The matMenuTriggerFor directive is used with the menu to list the options.

Syntax:

<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Installation Syntax: The basic pre-requisite is that we must have Angular CLI installed on the system in order to add and configure the Angular material library. The following command is executed on the Angular CLI to install the angular material library:

ng add @angular/material

Make sure the path should be opened in the terminal before executing the above command.

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding Menu Component: To use the Menu Component, we need to import the below modules into the app.module.ts file:

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

To use the Menu component in our code we have to import MatMenuModule into the imports array.

To use the icon, we need to import the below modules into the app.module.ts file:

import {MatIconModule} from '@angular/material/icon';

To use the icon module in our code we have to import MatIconModule into the imports array.

Project Structure: After successful installation, the project structure will look like the following image:

Project Structure

Example 1: The below example illustrates the implementation of the Angular Material Menu

  • app.component.html

HTML




<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Menu</h3>
    <button mat-button [matMenuTriggerFor]="menu1">
        CSS Menu
    </button>
    <mat-menu #menu1="matMenu">
        <button mat-menu-item>
            Material UI
        </button>
        <button mat-menu-item>
            Tailwind Css
        </button>
        <button mat-menu-item>
            Bootstrap
        </button>
    </mat-menu>
</div>


  • app.component.ts

Javascript




import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'AngularApp';
}


  • app.module.ts

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatMenuModule,
        MatIconModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }


Output:

Angular Material Menu 

Example 2: The below example illustrates the implementation of the Angular Material Menu with Icons

  • app.component.html

HTML




<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Icon Menu</h3>
    <button mat-icon-button [matMenuTriggerFor]="menu2"
            aria-label="Example icon-button with a menu">
        <mat-icon>list</mat-icon>
    </button>
    <mat-menu #menu2="matMenu">
        <button mat-menu-item>
            <mat-icon>thumb_up</mat-icon>
            <span>Thumbs up</span>
        </button>
        <button mat-menu-item disabled>
            <mat-icon>thumb_down</mat-icon>
            <span>Thumbs down</span>
        </button>
        <button mat-menu-item>
            <mat-icon>info</mat-icon>
            <span>Info</span>
        </button>
    </mat-menu>
</div>


  • app.component.ts

Javascript




import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'AngularApp';
}


  • app.module.ts

Javascript




import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { MatMenuModule } from "@angular/material/menu";
import { MatIconModule } from "@angular/material/icon";
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatMenuModule,
    MatIconModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Output:

Angular Material Icon Menu

Reference: https://material.angular.io/components/menu/overview



Last Updated : 06 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads