We will add some more advanced behaviours

• Part 1: A simple crud
  • Installation
  • The generated app
  • The list of addresses
  • The detail
  • Editing the detail
  • Validation
• Part 2: A node.js express-based API
  • Setup Express
  • Simple handler
  • Handling pagination
• Part 3: Advanced material
  • Header and footer
  • Toolbar
  • Submenus
  • Using a Real API
  • The DataSource object
  • Code on github https://github.com/kendarorg/Angular101

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

Or when expanded

Last modified on: February 17, 2020