Using Material Mat Menu and Nested Mat Menu in Angular 19

Angular Material provides a rich set of UI components, and the MatMenu component is a powerful tool for creating user-friendly navigation menus. In this article, we’ll explore how to use MatMenu and set up a nested menu structure in Angular 19

Setting Up the Angular Material Project

Before we dive into the implementation, let’s make sure Angular Material is installed in your project. If not, run the following command:

ng add @angular/material

Follow the prompts to configure Material theming and animations.

Basic Mat Menu Implementation

The MatMenu component is straightforward to use. Here’s how you can create a simple menu:

HTML:

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

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

Key Points:

1. The mat–menu directive defines the menu.

2. The matMenuTriggerFor directive links the trigger button to the menu.

Creating a Nested Mat Menu

Nested menus allow for hierarchical structures, which are particularly useful for complex navigation. Let’s implement a nested menu.

HTML:

<mat-menu #mainMenu="matMenu">
  <button mat-menu-item>Home</button>
  <button mat-menu-item>About</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Services</button>
</mat-menu>

<mat-menu #subMenu="matMenu">
  <button mat-menu-item>Web Development</button>
  <button mat-menu-item>Mobile Apps</button>
  <button mat-menu-item>Consulting</button>
</mat-menu>

<button mat-button [matMenuTriggerFor]="mainMenu">Open Main Menu</button>

Key Points:

• The matMenuTriggerFor directive on a mat-menu-item links to a submenu.

• Ensure each mat-menu has a unique reference variable.

Styling the Menus

Angular Material menus can be styled to match your application’s theme. Use Angular Material’s CSS variables or define custom styles.

Example

.mat-menu-panel {
  background-color: #f9f9f9;
  color: #333;
  border-radius: 8px;
}

.mat-menu-item {
  font-size: 14px;
}

Advanced Features

Dynamic Menu Items

Menu items can be generated dynamically based on data from a service or API.

TypeScript:

menuItems = [
  { name: 'Home' },
  { name: 'About' },
  { name: 'Services', subMenu: ['Web Development', 'Mobile Apps', 'Consulting'] }
];

<mat-menu #mainMenu="matMenu">
  <ng-container *ngFor="let item of menuItems">
    <button *ngIf="!item.subMenu" mat-menu-item>{{ item.name }}</button>
    <button *ngIf="item.subMenu" mat-menu-item [matMenuTriggerFor]="subMenu">
      {{ item.name }}
    </button>
  </ng-container>
</mat-menu>

<mat-menu #subMenu="matMenu">
  <button *ngFor="let sub of menuItems[2].subMenu" mat-menu-item>{{ sub }}</button>
</mat-menu>

Troubleshooting Tips

1. Menu Closes Immediately: Ensure all menu items have proper references and are correctly linked to their parent menus.

2. Menu Styling Issues: Verify that your theme is applied properly and doesn’t override Material defaults unintentionally.

Conclusion

Using MatMenu and nested menus in Angular 19 is a great way to implement intuitive and accessible navigation in your application. By combining basic and advanced features, you can create menus that cater to various user needs.

Feel free to share your thoughts or challenges in the comments section. Happy coding! 🚀