Angular Material Toolbar Component

Last Updated : 16 Jan, 2022

Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code.

The <mat-toolbar> is a container for headers, titles, or actions. In Angular material, the toolbar is placed at the top of the application that may include the title or some action in the specific position of an application. The toolbar can be of a single row or multiple rows, depending on the specific requirement. Creating the toolbar with a single row can be accomplished with <mat-toolbar> & </mat-toolbar> tags. For creating the toolbar with multiple rows, we can place the <mat-toolbar-row> elements inside of a <mat-toolbar>.

Syntax:

<mat-toolbar> Content </mat-toolbar>

Installation Syntax:

The basic pre-requisite is that we must have Angular CLI installed on the system in order to add and configure the Angular material library. After satisfying the required condition, we can type the following command on the Angular CLI:

ng add @angular/material

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding Toolbar component:

To use the toolbar component, we need to import it into the module.ts file.

import { MatToolbarModule } from '@angular/material/toolbar';

Then, we need to add this component into our imports array. After this, we can use it in our code.

Project Structure:

After successful installation, the project structure will look like the following image:

Project Structure

Example: The below example illustrates the implementation of the Angular Material Toolbar.

app.module.ts

import { CommonModule } from "@angular/common"; 
import { NgModule } from "@angular/core"; 
  
import { MatToolbarModule } from "@angular/material/toolbar"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { AppComponent } from "./app.component"; 
import { BrowserAnimationsModule }  
      from "@angular/platform-browser/animations"; 
import { MatIconModule } from "@angular/material/icon"; 
  
@NgModule({ 
  declarations: [AppComponent], 
  exports: [AppComponent], 
  imports: [ 
    CommonModule, 
    BrowserAnimationsModule, 
    MatToolbarModule, 
    BrowserModule, 
    MatIconModule, 
  ], 
  bootstrap: [AppComponent], 
}) 
export class AppModule {}

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent  {}

app.component.html

<mat-toolbar class="title-toolbar"> 
  <mat-toolbar-row> 
    <span class="title-center">GeeksforGeeks</span> 
  </mat-toolbar-row> 
</mat-toolbar> 
  
<mat-toolbar> 
  <mat-toolbar-row> 
    <span>Tutorials</span> 
    <span class="example-spacer"></span> 
    <mat-icon class="example-icon" 
              aria-hidden="false" 
              aria-label="Tutorials">assignment 
    </mat-icon> 
  </mat-toolbar-row> 
  
  <mat-toolbar-row> 
    <span>Contribute Article</span> 
    <span class="example-spacer"></span> 
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Write article">create 
    </mat-icon> 
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Login or Register"> 
      how_to_reg 
    </mat-icon> 
  </mat-toolbar-row> 
</mat-toolbar>

app.component.css

@import "~material-icons/iconfont/material-icons.css"; 
  
.example-icon { 
  padding: 0 14px; 
} 
.example-spacer { 
  flex: 1 1 auto; 
} 
  
.title-center { 
  margin: 0 auto; 
  color: white; 
} 
  
.title-toolbar { 
  background: green; 
}