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