We will add some more advanced behaviours
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