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
