Angular Material NavBar

Add nav bar to your angular project

Introduction

If you are not familiar with Angular routing here is a blog on that, angular-routing

Navigate to your project on the command line and run the commands below

• Add angular material to your project

ng add @angular/material

• Let’s create a navbar component

ng g c navbar

• Update the navbar to your app.component.html

<app-navbar></app-navbar>

To check the name above. Open your nav-bar.component.ts and copy the contents on the selector inside the @component.

• Add toolbar module to app.module.ts

Import MatToolbarModule and MatButtonModule

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';

Add your module to the imports in the Ngmodule .

imports: [
MatToolbarModule,
MatButtonModule
],

Update the nav-bar.componet.html

<mat-toolbar color="primary">
 <span>User Management</span>
  <a mat-button>Home</a>
  <a mat-button>About</a>
  <a mat-button>Contact</a>
</mat-toolbar>

Add spacing

<mat-toolbar color="primary">
<span>User Management</span>
<div class="spacer"></div>
  <a mat-button>Home</a>
  <a mat-button>About</a>
  <a mat-button>Contact</a>
</mat-toolbar>

Add styling

.mat-toolbar{
  background-color: cornflowerblue;
  color: white;
}
.mat-button{
   color: white;
}
.spacer{
  flex: 1 1 auto;
}

Update the routes with router

<mat-toolbar color="primary">
 <span>User Management</span>
  <div class="spacer"></div>
    <a mat-button routerLink="/users">Home</a>
    <a mat-button routerLink="/add">About</a>
    <a mat-button routerLink="/">Contact</a>
</mat-toolbar>

source: Angular Material Toolbar

The toolbar will display in all the pages

Happy coding!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!