Angular Material 8 Tutorial Navigation UI

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
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,
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:
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
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>
</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
About the Author x
Techiediaries is a website dedicated to bring you tutorials for the latest web technologies
Website
Twitter
LinkedIn
GitHub
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
report this ad report this ad
Subscribe in a reader
Subscribe for Angular 8 Video Tutorials

Techiediaries
YouTube
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
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.
Bharathi • 3 months ago

Do we really need this tag <router-outlet></router-outlet> ?? why we are using it here?
techiediaries.com Mod > Bharathi • 3 months ago

This is where the Router will insert the matched components.
edem victor • 2 months ago

can i get the link to the next tutorial
abhiram s > edem victor • a month ago

can you please share the link here
△ ▽ • 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

Angular Material 8 Tutorial Navigation UI

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Angular Material 8 Tutorial Navigation UI

Hochgeladen von

Copyright:

Verfügbare Formate

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

Your e-mail Subs c r ibe

Setting up Angular Material 8

Let’s choose Deep Purple/Amber.

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

Importing Angular Material Components: x

MatListModule, MatButtonModule and x

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

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

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

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

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

Angular 8 Material Toolbar Example

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

This is a screenshot of our toolbar:

Angular Material Sidenav Example

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

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

This is a screenshot of our UI:

Background Acts Contacts Mp4 Download Contemporary accent chairs

About the Author x

Angular 7/8 Authentication with JWT Tutorial

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

report this ad report this ad

Subscribe for Angular 8 Video Tutorials

Get our books

Read our other tutorials

What do you think?

Upvote Funny Love Surprised Angry Sad

 Recommend t Tweet f Share Sort by Best

Join the discussion…

Gediminas Bukauskas • a month ago

Brook • a month ago

techiediaries.com Mod > Brook • 14 days ago

Bharathi • 3 months ago

techiediaries.com Mod > Bharathi • 3 months ago

edem victor • 2 months ago

abhiram s > edem victor • a month ago

Copyright © 2019 Techiediaries

Das könnte Ihnen auch gefallen