Create a Responsive Toolbar using Angular Material

Question

I have created a toolbar using Angular Material. However, it is not responsive. How can I make the toolbar responsive?

Code for toolbar:

<md-toolbar color = "primary">     <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button>     <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button>     <md-menu #bMenu="mdMenu">       <button md-menu-item [routerLink]="['/a4']">Angular Component</button>       <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button>       <button md-menu-item [routerLink]="['/inout']">Event Emitters</button>       <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button>       <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button>       <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button>       <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button>       <button md-menu-item [routerLink]="['/viewchild']">View Child</button>       <button md-menu-item [routerLink]="['/view']">View Encapsulation</button>     </md-menu>      <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button>     <md-menu #aMenu="mdMenu">       <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button>       <button md-menu-item [routerLink]="['/guard']">Angular Guards</button>       <button md-menu-item [routerLink]="['/host']">Host & Host-Context</button>     </md-menu>      <button md-button (click)="openDialog()">&nbsp;Contact Card</button>   </md-toolbar> 

Answer 1

Here is my favorite way of creating a responsive Navigation Bar in Angular. If you use Angular 6, make sure you use a version 6.1+
Working example on Stackblitz: https://stackblitz.com/edit/angular-v6xwte

Example on a smaller screen:

Example on a larger screen:

Here are precise steps how to do it:

1) Install necessary packages. Type in your terminal:

npm install --save @angular/material @angular/cdk @angular/animations  npm install @angular/flex-layout --save 

2) Import necessary modules in your app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FlexLayoutModule } from '@angular/flex-layout'; import {   MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; 

Remember to add these modules to the imports array below.

3) Add Material Icons link to your index.html
The link must go before any Angular content.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

4) In your styles.css add an Angular theme and set margins to 0%

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; body{     margin: 0%; } 

5) Add toolbar HTML code in your app.component.html

<div>    <mat-toolbar color="primary">     <div fxShow="true" fxHide.gt-sm="true">       <button mat-icon-button (click)="sidenav.toggle()">         <mat-icon>menu</mat-icon>       </button>     </div>      <a mat-button class="companyName" routerLink="/">       <span>Site name</span>     </a>     <span class="example-spacer"></span>     <div fxShow="true" fxHide.lt-md="true">       <a mat-button routerLink="/about-us">About us</a>       <a mat-button routerLink="/prices">Prices</a>       <a mat-button routerLink="/start-page">Start page</a>       <a mat-button routerLink="/offer">Offer</a>       <a mat-button routerLink="/contact">Contact</a>     </div>    </mat-toolbar>   <mat-sidenav-container fxFlexFill class="example-container">      <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">       <div fxLayout="column">         <a mat-button routerLink="/about-us">About us</a>         <a mat-button routerLink="/prices">Prices</a>         <a mat-button routerLink="/start-page">Start page</a>         <a mat-button routerLink="/offer">Offer</a>         <a mat-button routerLink="/contact">Contact</a>       </div>     </mat-sidenav>     <mat-sidenav-content fxFlexFill>       Awesome content     </mat-sidenav-content>   </mat-sidenav-container> </div> 

6) Style the toolbar in your app.component.css

.companyName{     font-size: 150%; }  .mat-toolbar{   height: 7vh; }  div {     overflow: inherit; }  .mat-sidenav-container{   background-color: lightskyblue;   min-height: 93vh !important; }  a{     text-decoration: none;     font-size: 110%;     white-space: normal; }  button{     font-size: 110%;     min-width: min-content; }  .example-icon {     padding: 0 14px;   }    .example-spacer {     flex: 1 1 auto;   }    .mat-sidenav-content{       font-size: 200%;       text-align: center;   }