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