13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

Techiediaries

Angular Material 8
Tutorial: Build
Navigation UI with
Toolbar and Side
Navigation Menu
Receive new Angular 8 tutorials.

Your e-mail Subs c r ibe

In the previous tutorial we’ve seen how to create an Angular 8 application for consuming a simple CRM REST
API. We’ve also added component routing to our application in this tutorial. Now, let’s build on those tutorials
to create the UI using Angular Material 8. x

Setting up Angular Material 8

We'll be using Material Design to style our CRM UI, so we need to add Angular Material 8 to our project.
https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 1/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

Fortunately, this is only one command away. Open a new terminal and run the following commands: x

$ cd ./ngsimplecrm
$ ng add @angular/material

The command will ask you to Choose a prebuilt theme name, or "custom" for a custom theme: (Use
arrow keys)

Indigo/Pink
Deep Purple/Amber
Pink/Blue Grey
Purple/Green

Let’s choose Deep Purple/Amber.

You’ll be also asked if you want to Set up HammerJS for gesture recognition? (Y/n) Choose the default
answer which is Yes. And if you want to Set up browser animations for Angular Material? (Y/n) You can
also choose Yes.

That's it! Angular Material is configured in your application.

Importing Angular Material Components: x

MatToolbarModule, MatSidenavModule,

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 2/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

MatListModule, MatButtonModule and x

MatIconModule
After that, you need to import the Angular Material components that you want to use in your project.

Open the src/app/app.module.ts file and add the following changes:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule, MatButto

import { AppRoutingModule } from './app-routing.module';

// [...]

@NgModule({
declarations: [
// [...]
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AppRoutingModule,
MatToolbarModule,
MatSidenavModule,
MatListModule,
MatButtonModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } x

We import the following Material components modules for building our navigation UI:

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 3/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

MatToolbarModule which provides <mat-toolbar> and <mat-toolbar-row> components. x

MatSidenavModule
MatListModule
MatButtonModule which provides mat-button and mat-icon-button .
MatIconModule which provides <mat-icon> .

Note: Make sure you import the Angular Material modules after Angular's BrowserModule, as the
import order matters for NgModules.

Angular 8 Material Toolbar Example

The Material toolbar components are designed to add containers for headers, titles, or actions. We can use
various component such as <mat-toolbar> and <mat-toolbar-row> to create and structure toolbars for
your application.

Open the src/app/app.component.html file and start by adding the toolbar:

<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button>
<mat-icon (click)="sidenav.toggle()">menu</mat-icon>
</button>
<h1>SimpleCRM</h1>
<span class="menu-spacer"></span>
<div>
<a mat-button [routerLink]="'/accounts'"> Accounts </a>
<a mat-button [routerLink]="'/create-account'"> Create Account </a>
<a mat-button [routerLink]="'/contacts'"> Contacts </a>
<a mat-button [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-button [routerLink]="'/activities'"> Activities </a>
<a mat-button [routerLink]="'/create-activity'"> Create Activity </a>

</div>
</mat-toolbar-row>

<mat-toolbar-row>
<span style="font-size: 12px;">SimpleCRM helps you easily manage your contact
</mat-toolbar-row>
</mat-toolbar> x

We use a primary color for our toolbar. Next, we create tow toolbar rows using the <mat-toolbar-row> . In
the first row, we add an icon button (using mat-icon-button )with a Material icon ( <mat-icon> ) to toggle
https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 4/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

the sidenav menu which we'll add next. Next, we add a bunch of navigation buttons using <a> tags with mat- x
button .

You can set the color of a <mat-toolbar> component by using the color property. By default,
toolbars make use a neutral background color depending on the current theme (light or dark). This
can be changed to primary , accent , or warn .

This is a screenshot of our toolbar:

Angular Material Sidenav Example

According to the docs :

The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav
we use three components: <mat-sidenav-container> which acts as a structural container for
our content and sidenav, <mat-sidenav-content> which represents the main content, and
<mat-sidenav> which represents the added side content.

In the same src/app/app.component.html file, add:

<mat-sidenav-container>
<mat-sidenav #sidenav>
<mat-nav-list>

<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>

<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a> x
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

</mat-nav-list>

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 5/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

</mat-sidenav> x
<mat-sidenav-content>
<div style="height: 88vh;">

<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

We used a Material navigation list to create a list of buttons using <mat-nav-list> and mat-list-item .
We also added a #sidenav template reference variable to <mat-sidenav #sidenav> to be able to call its
toggle() method from the menu icon in the toolbar so we toggle it on and off ( <mat-icon
(click)="sidenav.toggle()">menu</mat-icon> )

This is a screenshot of our UI:

Conclusion
In this tutorial, we’ve added Angular Material 8 to our Angular 8 application which will allow us to build a
professional-grade UI for our CRM. Next, we created a navigation UI with Material toolbar, sidenav, buttons
and icons components. In the next tutorial, we'll build our table and form UI to create a CRUD interface for
x
creating reading, updating and deleting items from or CRM REST API.

Background Acts Contacts Mp4 Download Contemporary accent chairs

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 6/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

About the Author x

Techiediaries is a website dedicated to bring you tutorials for the latest web technologies
Website
Twitter
LinkedIn
GitHub

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 7/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

05 Jun 2019 x

angular
angular8

« Angular 8 Data (Event & Property) Binding Tutorial: Build your First Angular App
Angular 8 Material Design Tutorial & Example »

report this ad

RELATED TUTORIALS
Responsive Images Tutorial for Angular 7/8 Devs

Angular 7/8 Authentication with JWT Tutorial

Angular 7/8 Tutorial: Login & Reactive Form Example with Validation

Angular 7/8 By Example: HTTP GET Requests with HttpClient (Services, Async Pipe and
Observables)

Using Bootstrap 4 with Angular 7/8

Angular 7/8 & Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1]

Angular 7/8 and Bootstrap Tutorial

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 8/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

report this ad report this ad

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 9/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

Subscribe in a reader

Subscribe for Angular 8 Video Tutorials

Techiediaries

YouTube

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 10/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

report this ad

Get our books

Practical Angular: Build your first web apps with Angular 8
React Native for Beginners [2019]

Read our other tutorials

Angular Tutorial
Laravel 6 Tutorial
React Tutorial
React Hooks Tutorial
React Native Tutorial
Webpack Tutorial
PHP Tutorial
JavaScript Tutorial
Django Tutorial
Java Spring Tutorial
Rails 6 Tutorial
Ionic 4 Tutorial
TypeScript Tutorial
Bootstrap 4 Tutorial x
Electron Tutorial
Cordova Tutorial
HTML Tutorial

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 11/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

GraphQL Tutorial x
CSS Grid Layout Tutorial
PWA Tutorial

What do you think?

13 Responses

Upvote Funny Love Surprised Angry Sad

7 Comments techiediaries 
1 Login

 Recommend t Tweet f Share Sort by Best

Join the discussion…

LOG IN WITH
OR SIGN UP WITH DISQUS ?

Name

Gediminas Bukauskas • a month ago

2 very important questions are not answered: 1) how to create multilevel menu, 2) how to
insert separator above 'close'
1△ ▽ • Reply • Share ›

Brook • a month ago

First, i would like say THANK Y OU for tutorials. but ask i want to ask one question, we were
create a service for each component but we didn't use them Why?
△ ▽ • Reply • Share ›

techiediaries.com Mod > Brook • 14 days ago

No bp. We'll use them later in the next sections.
△ ▽ • Reply • Share ›

Bharathi • 3 months ago

Do we really need this tag <router-outlet></router-outlet> ?? why we are using it here?
△ ▽ • Reply • Share ›

techiediaries.com Mod > Bharathi • 3 months ago

This is where the Router will insert the matched components.
△ ▽ • Reply • Share ›

edem victor • 2 months ago

can i get the link to the next tutorial
△ ▽ • Reply • Share ›

abhiram s > edem victor • a month ago

can you please share the link here
https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 12/13
13/09/2019 Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu | Techiediaries

△ ▽ • Reply • Share › x

ALSO ON TECHIEDIARIES

Fixing Dual Booting Windows 10 with Angular 8 Tutorial By Example: (REST API,
Ubuntu 19.04: Grub not Showing and … HttpClient GET, Components, Services & …
1 comment • 3 months ago 5 comments • 3 months ago
aye decoder — Thank you very much for this Juan Felipe Alvarez — it seems easy but I
Avatararticle. I am using Ubuntu 16.04 LTS on Avatarcouldn't. I need bring a list with category of
Windows 10 and it worked perfectly well for youtube videos. when I choose one, this bring

Ionic 4 React Tutorial: Build a Mobile App Angular 8 Tutorial: Build your First Angular
with Ionic 4, Axios and React App
1 comment • 5 months ago 1 comment • 3 months ago
Matt — Thanks! I disabled the axios data in this Gayathri S — Great!! Thanks for sharing the
Avatarscreenshot, but I followed your layout. The Avatarinformative blog about building a Calculator
header isn't quite right yet on the iOS devices. App with Angular JS.Custom Web Application

✉ Subscribe d Add Disqus to your siteAdd DisqusAdd 🔒 Disqus' Privacy PolicyPrivacy PolicyPrivacy

Copyright © 2019 Techiediaries

https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/ 13/13