We will add some more advanced behaviours

Adding the submenu

Now i want to add a section for the addresses that contains the list of addresses and the addition of a new one. Various things had been added.

<mat-toolbar color="primary">
    <button mat-button routerLink="/">{Angular 9 basic tutorial-Toolbar submenus}</button>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
        <button mat-button routerLink="/"><mat-icon>home</mat-icon></button>
        <button mat-menu-item [matMenuTriggerFor]="addresses">Addresses Manager</button>
        <mat-menu #addresses="matMenu">
            <button mat-menu-item routerLink="/address"> Addresses</button>
            <button mat-menu-item routerLink="/address/-1">Add Address</button>
        </mat-menu>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm><mat-icon>menu</mat-icon></button>
    <mat-menu x-position="before" #menu="matMenu">
        <button mat-menu-item routerLink="/"><mat-icon>home</mat-icon> Home</button>
            <button mat-menu-item [matMenuTriggerFor]="addressesMenu" >Addresses Manager</button>
            <mat-menu #addressesMenu="matMenu">
                <button mat-menu-item routerLink="/address"> Addresses</button>
                <button mat-menu-item routerLink="/address/-1">Add Address</button>
            </mat-menu>
    </mat-menu>
</mat-toolbar>

A new button "Addresses Manager is added inside the mat toolbar, the button before it has the matMenuTriggerFor attribute set, and refers to the following mat-menu, named addresses

The same happens inside the "main" mat menu

The result is the following when collapsed

mat-menu-collapsed

Or when expanded

mat-menu-expanded


Last modified on: February 17, 2020