3. Creating Navigation Header

To create a navigation header, we need to use the mat-toolbar element. But first thing first.

This component has its own module, so we need to register that module inside the material.module.ts file:

import { ..., MatToolbarModule } from '@angular/material';

imports: [
MatToolbarModule,

exports: [
MatToolbarModule,

ng g component navigation/header --spec false

app.component.html

<mat-sidenav-content>
<app-header></app-header>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>

header.component.html

<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button (click)="onToggleSidenav()">
<mat-icon>menu</mat-icon>
</button>
</div>
<div>
<a routerLink="/home">Owner-Account</a>
</div>
<div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
<ul fxLayout fxLayoutGap="15px" class="navigation-items">
<li>
<a routerLink="/owner">Owner Actions</a>
</li>
<li>
<a routerLink="/account">Account Actions</a>
</li>
</ul>
</div>
</mat-toolbar>

To continue, let’s register the MatIconModule and MatButtonModule inside the material module file:

import { ... MatIconModule, MatButtonModule } from '@angular/material';

imports: [
MatButtonModule,
MatIconModule,

exports: [
MatButtonModule,
MatIconModule,

modify the header.component.css file:

a {
text-decoration: none;
color: white;
}

a:hover, a:active{
color: lightgray;
}

.navigation-items{
list-style-type: none;
padding: 0;
margin: 0;
}

mat-toolbar{
border-radius: 3px;
}

@media(max-width: 959px){
mat-toolbar{
border-radius: 0px;
}
}

If we take a look at the icon button code, we can see the onToggleSidenav() event. We need to implement it inside the header.component.ts file:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

@Output() public sidenavToggle = new EventEmitter();

constructor() { }

ngOnInit() {
}

public onToggleSidenav = () => {
this.sidenavToggle.emit();
}

}

Finally, we have to react to this event emitter inside our app.component.html file:

<mat-sidenav-content>
<app-header (sidenavToggle)="sidenav.toggle()"></app-header>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>

Now it is obvious why we need the #sidenav local reference inside the mat-sidenav component.