Angular Material Toolbar

Manav Pandya  Print 
03 Oct 2018
 
Intermediate
119

The toolbar is one of the important parts of many web applications which allows the user to navigate from one page to another; we have a separate component in the angular material to integrate with the angular application.The main use of toolbar is to show the application title and few different options like the material menu and other buttons.

In this article of angular material tutorial series, we will try different layout using the toolbar, so that you get to know the different ways to use toolbar into your angular application.For that create a new angular project and install angular material, you can follow my previous articles for that.

How to include Toolbar

To use the toolbar in our angular app, we need to import it into root module as described below.

App.module.ts
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// To use Animations 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material';

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 FormsModule,
 BrowserAnimationsModule,
 MatCardModule,
 MatToolbarModule
 ],
 exports: [
 BrowserModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

As you can see that first we have imported Material toolbar module and that included inside import array, now we will be able to use toolbar module in our angular application.

Basic Toolbar

To include toolbar in our angular application, we need to use simple markup tag as described below.

Syntax

 
 <mat-toolbar>
 </mat-toolbar>

Example

App.component.html
 
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Toolbar Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Simple Toolbar</h2>
 <mat-toolbar>Angular Material Toolbar</mat-toolbar>
 </mat-card>

In the above source code, I have used different material component.

  • <mat-card>

    To display static information for this article

  • <mat-toolbar>

To show a simple toolbar with some static textWe don’t have any menu or buttons within the toolbar, it’s just a simple toolbar, but we can enhance it as per our requirement.Now try to run above example and you can see output like this.

Output

Multi-Row Toolbar

We have seen the simple toolbar, but we can also have Toolbar with multiple rows so that we can have multiple options to select from the toolbars.For that, we have additional markup to show different rows within the single toolbar.

Syntax

 
 <mat-toolbar>
 <mat-toolbar-row>
 <!-- Toolbar content -->
 </mat-toolbar-row>
 <mat-toolbar-row>
 <!-- Another Toolbar content -->
 </mat-toolbar-row>
</mat-toolbar>

We have used new markup tag <mat-toolbar-row>, which is used to add a new row to the toolbar, let’s see a simple example for that.

Example

App.component.ts
 
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Toolbar Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Toolbar With Multiple Rows</h2>
 <mat-toolbar>
 <mat-toolbar-row>
 <h3>This is toolbar 1</h3>
 </mat-toolbar-row>
 <mat-toolbar-row>
 <h3>This is toolbar 2</h3>
 </mat-toolbar-row>
 <mat-toolbar-row>
 <h3>This is toolbar 3</h3>
 </mat-toolbar-row>
 </mat-toolbar>
 </mat-card>

Here in this example, I have created three different rows inside the Toolbar component, and when we run this it will look like this.

Output

Now we have multiple rows within a single material toolbar something like the above image.

Rows with Icons

In the previous example, we have learned that how to use multiple rows with Toolbar, same way if we want to use icons related to toolbar title than we can use material icons along with toolbar rows.But before using icons we need to add style sheet for material icons in index.html file.

/src/index.html
 <!doctype html>
 <html lang="en">
 
 <head>
 <meta charset="utf-8">
 <title>Angularmaterialcomponents</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- To use material icons -->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>
 <app-root></app-root>
 </body>
 </html>

Now we have added stylesheet link to our app, and then we can use tons of material icons into our angular application, to add icons, we need to use markup tag like this.

Syntax

 <mat-icon>
 // icon name
 </mat-icon>

Do not forget to import the material icon module into app.module as described below.

App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// To use Animations 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 FormsModule,
 BrowserAnimationsModule,
 MatCardModule,
 MatToolbarModule,
 MatIconModule
 ],
 exports: [
 BrowserModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Example

App.component.html
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Toolbar Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Toolbar With Multiple Rows and Icons</h2>
 <mat-toolbar>
 <mat-toolbar-row>
 <h3>This is toolbar 1</h3>
 <mat-icon>shopping_cart</mat-icon>
 </mat-toolbar-row>
 <mat-toolbar-row>
 <h3>This is toolbar 2</h3>
 <mat-icon>supervisor_account</mat-icon>
 </mat-toolbar-row>
 <mat-toolbar-row>
 <h3>This is toolbar 3</h3>
 <mat-icon>videocam</mat-icon>
 </mat-toolbar-row>
 </mat-toolbar>
 </mat-card>

In this example, I have used multiple rows with a single toolbar and also added different material icons like Shopping cart, supervisor account, and videocam.Now run above example, and see that how it actually works.

Output

As you can see into above image that along with each toolbar rows, I have different material icons attached, so this the way you can try including icons to get the batter information about the toolbar and other options.

Toolbar with Menu

So far we have tried Toolbar with a single row, multiple rows and with icons as well, but it will be awesome if we can use menu with the toolbar, yes we can also use and implement Menu with the toolbar. In order to use menu with the toolbar, we need to import toolbar module in our root app module file like this.

App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// To use Animations 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatButtonModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 FormsModule,
 BrowserAnimationsModule,
 MatCardModule,
 MatToolbarModule,
 MatIconModule,
 MatButtonModule
 ],
 exports: [
 BrowserModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

In this module file, we have imported other material components like menu module, icon module and button module to use menu with the toolbar module. Now let’s design our Toolbar with the menu, for that open app.component.html file and paste the following code.

App.component.html
 <mat-card>
 <div class="alert alert-info">
 <strong>Angular Material Toolbar Component</strong>
 </div>
 </mat-card>
 <mat-card>
 <h2>Toolbar With Menu</h2>
 <mat-toolbar>
 <h3 class="custom-space">Angular Material Toolbar With Menu</h3>
 <button mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menu="matMenu">
 <button mat-menu-item>
 <mat-icon>volume_mute</mat-icon>
 <span>Mute Volume</span>
 </button>
 <button mat-menu-item>
 <mat-icon>volume_down</mat-icon>
 <span>Down Volume</span>
 </button>
 <button mat-menu-item>
 <mat-icon>volume_off</mat-icon>
 <span>Off Volume</span>
 </button>
 </mat-menu>
 </mat-toolbar>
 </mat-card>

Here, in this example, I have included a button and on click button, there will be menu window will be popped-up and can see the different menu items.Now run above example and see how it looks like.

Output

This is how we have used menu within toolbar component, thus we can implement many another component to make toolbar more expandable as per requirement like we can include different links, buttons, and other HTML elements.

Summary

In this part of Angular Material series, we have learned about how to use toolbars with different options.

  • Basic Toolbar module introduction

  • Use multiple toolbar rows

  • Toolbars with material icons

  • Toolbars with menu

    But I would recommend you to go through all the above example can create different toolbars so you will understand more, I hope you got an idea about how to implement toolbar component with the angular application.

Hands-on Learning
Free Interview Books
 
+