Angular Material 10/9 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu
In the previous tutorial we’ve seen how to consume a REST API with Angular 10/9 HttpClient.
We’ve also added component routing to our application. Now, let’s learn to create the UI using Angular Material 10.
Setting up Angular Material 10/9
We'll be using Material Design to style our App UI, so we need to add Angular Material 10 to our Angular project.
Fortunately, this is only one command away. Open a new terminal and run the following commands:
$ 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: MatToolbarModule, MatSidenavModule, MatListModule, MatButtonModule and 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, MatButtonModule } from '@angular/material';
import { AppRoutingModule } from './app-routing.module';
// [...]
@NgModule({
declarations: [
// [...]
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AppRoutingModule,
MatToolbarModule,
MatSidenavModule,
MatListModule,
MatButtonModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
We import the following Material components modules for building our navigation UI:
- MatToolbarModule which provides
<mat-toolbar>
and<mat-toolbar-row>
components. - MatSidenavModule
- MatListModule
- MatButtonModule which provides
mat-button
andmat-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 10 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 Angular 10 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 contacts</span>
</mat-toolbar-row>
</mat-toolbar>
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-button
.
You can set the color of a
<mat-toolbar>
component by using thecolor
property. By default, toolbars make use a neutral background color depending on the current theme (light or dark). This can be changed toprimary
,accent
, orwarn
.
This is a screenshot of our toolbar:
Angular 10 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>
<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>
<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 10 to our application which will allow us to build a professional-grade UI for our apps. 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 creating reading, updating and deleting items from or CRM REST API.
Most Popular Posts
Anguar 12 New Features 10+ Best Anguar 9/10 Templates for Developers 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial Angular 11 CRUD REST API Angular 11 Tutorial with HttpClient Routing and Navigation with Angular 11 Router Full Vue 3 Tutorial by Example CSS Centering CSS Grid Layout Tutorial Adding Comments to JSON How to Delete Local/Remote Git Branches Webpack Tutorial for Angular Developers GraphQL Tutorial for Angular Developers Git and GitHub for Angular Developers Bootstrap 5 with Sass and Gulp 4 Tutorial by ExampleAngular Newsletter
Get our Angular book for free!