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

Toolbar

Global configuration

First we will import a bunch of modules to app.module.ts. This are for the toolbar, the menu to show when the view is narrow and the animation to show the menu and submenus, and the flex layout to adapt to view

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';

And imports: [ ... MatToolbarModule, MatMenuModule, BrowserAnimationsModule, FlexLayoutModule, ],

Inside the global style.less we then add a theme for angular material

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Inside the header

Adding the title to show for the application

export class HeaderComponent implements OnInit {
  title:string = "My Demo App";

Then we can finally add the menus. First with the simple "home" button and the application title. Notice the mat-menu inside the mat-toolbar. This is to show the menu when the toolbar is narrowed.

We even assign a name to the matMenu to use it later "#menu".

<mat-toolbar color="primary">
    <button mat-button routerLink="/">{Angular 9 basic tutorial-Toolbars}</button>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
        <button mat-button routerLink="/"><mat-icon>home</mat-icon></button>            
    </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>
    </mat-menu>
</mat-toolbar>

Last modified on: February 17, 2020