Angular Material 7 - Toolbar

The <mat-toolbar>, an Angular Directive, is used to create a toolbar to show title, header or any action button.

<mat-toolbar> - Represents the main container.

<mat-toolbar-row> - Add a new row.

In this chapter, we will showcase the configuration required to draw a toolbar control using Angular Material.

Create Angular Apppcation

Follow the following steps to update the Angular apppcation we created in Angular 6 - Project Setup chapter −

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { AppComponent } from  ./app.component ;
import {BrowserAnimationsModule} from  @angular/platform-browser/animations ;
import {MatToolbarModule} from  @angular/material 
import {FormsModule, ReactiveFormsModule} from  @angular/forms ;
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatToolbarModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified CSS file app.component.css.

.filler {
   flex: 1 1 auto;
}
.gap {
   margin-right: 10px;
}

Following is the content of the modified HTML host file app.component.html.

<mat-toolbar color = "primary">
   <span class = "gap">File</span>
   <span>Edit</span>
   <span class = "filler"></span>
   <span>About</span>
</mat-toolbar>

Result

Verify the result.

Details

As first, we ve created a toolbar spanning the complete page.

Then labels are added.