Angular Material Toolbar

Google created the UI component toolkit known as Angular Material to enable Angular developers to create contemporary apps in an organized and responsive manner.

This collection offers contemporary, ready-to-use items that need little to no further coding when used directly.

The toolbar for an Angular Material application is located at the top and may feature the application’s title or a specific action.

Depending on the particular demand, the toolbar may consist of a single row or several rows. The <mat-toolbar> & </mat-toolbar> tags can be used to create a toolbar with a single row. The <mat-toolbar-row> components can be included inside of a <mat-toolbar> to create a toolbar with many rows.

The fundamental prerequisite is that in order to add and configure the Angular material library, we must have Angular CLI installed on the system. Once the necessary condition has been met, we may enter the following command into the Angular CLI:

ng add @angular/material

Import Toolbar in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FormsModule } from '@angular/forms';

import { CommonModule } from '@angular/common';
import { 
  MatButtonModule, 
  MatIconModule, 
  MatMenuModule,
  MatToolbarModule,
} from '@angular/material';

import { AppComponent } from './app.component';

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

Update app.component.html

<mat-toolbar color="primary">
  <span class="fill-remaining-space">
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <span>Logout</span>
      </button>
    </mat-menu>
  </span>
  <span class="fill-remaining-space">Application</span>
</mat-toolbar>

app.component.ts

.fill-remaining-space {
  flex: 1 1 auto;
}

OUTPUT: