Angular Material Sidenav and Toolbar Example

Posted at: April 18, 2019 3:53 PM

How to create sidenav and toolbar in Angular Material?

In this lesson we will learn, how to create sidenav and toolbar in angular material with help of example.

Import Angular Material Module.

Import angular material module in your own NgModule.

MatSidenavModule: This module import for creating sidenav

MatToolbarModule: This module import for creating toolbar

Above these are modules import and export in your own NgModule

material-design/material-design.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  .....
  MatSidenavModule,
  MatToolbarModule
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    .....
  	MatSidenavModule,
  	MatToolbarModule
  ],
  exports: [
    .....
  	MatSidenavModule,
  	MatToolbarModule
  ]
})
export class MaterialDesignModule { }
Copy

Import NgModule MaterialDesignModule

Import this NgModule MaterialDesignModule wherever you would like to use the Angular Material components. For example import in AppModule

src/app/app-module.ts


import { BrowserModule } from '@angular/platform-browser';
...........
import { MaterialDesignModule } from './material-design/material-design.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
...........

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialDesignModule,
    .......
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Copy

Use in HTML

src/app/app.component.html


<mat-sidenav-container fullscreen>
  <mat-sidenav mode="side" #sidenav opened position="start">
    left panel
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My Application
      <span class="toolbar-spacer"></span>
      My Account
    </mat-toolbar>
    <div class="main-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
Copy

src/styles.css


/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
mat-sidenav {
    width: 280px;
    padding:15px;
}
.mat-drawer { 
    background-color: #023075;
    color:#fff
}
.main-content {
    padding:20px;
}
.toolbar-spacer {
    flex: 1 1 auto;
}
Copy

Output

sidenav and toolbar in angular material
This lesson also available on YouTube
angular material sidenav angular material toolbar angular material drawer

Please leave comments

6 Comments


Laura 1 year ago
¡Hola! He querido escribirte porque veo una excelente oportunidad para que tu empresa sea el foco de una *entrevista* que tengo en mente que podríamos realizar. Esta entrevista no sólo sería una conversación enriquecedora, sino que además, *se publicaría en decenas de medios* y periódicos de gran reputación. Como beneficio adicional, enlazaremos tu sitio web en la entrevista, lo cual ayudará a mejorar su posicionamiento. El hecho de que aparezcas en una entrevista en medios confiables contribuirá a generar más confianza en tu negocio. ¿Sería posible que me dieras un *número de teléfono* para discutir los detalles? Gracias.
Reply
Laura 1 year ago
¡Hola! Me llamo Laura y estoy encantada de saludarte. Quería escribirte porque me ha parecido interesante comentar contigo la posibilidad de que tu negocio aparezca cada mes en *periódicos digitales como noticia* para posicionar en los primeros lugares de internet, es decir, con artículos reales dentro del periódico que no se marcan como publicidad y que no se borran. La noticia es publicada por más de sesenta periódicos de gran autoridad para mejorar el *posicionamiento de tu web* y la reputación. ¿Podrías facilitarme un teléfono para ofrecerte *hasta dos meses gratuitos*? Gracias
Reply
Laura 2 years ago
¡Hola! Me llamo Laura y estoy encantada de saludarte. Quería escribirte porque me ha parecido interesante comentar contigo la posibilidad de que tu negocio aparezca cada mes en *periódicos digitales como noticia* para posicionar en los primeros lugares de internet, es decir, con artículos reales dentro del periódico que no se marcan como publicidad y que no se borran. La noticia es publicada por más de sesenta periódicos de gran autoridad para mejorar el *posicionamiento de tu web* y la reputación. ¿Podrías facilitarme un teléfono para ofrecerte *hasta dos meses gratuitos*? Gracias
Reply
Jose 2 years ago
Buenas tardes, encantado de saludarte. Soy Jose Quería escribirte porque me ha parecido interesante comentar contigo la posibilidad de que tu negocio aparezca cada mes en periódicos digitales como noticia para posicionar en los primeros lugares de internet, es decir, con artículos reales dentro del periódico que no se marcan como publicidad y que no se borran. La noticia es publicada por más de cuarenta periódicos de gran autoridad para mejorar el posicionamiento de tu web y la reputación. ¿Podrías facilitarme un teléfono para ofrecerte un mes gratuito? Gracias
Reply
tushar 5 years ago
this is really so helpfull. please keep posting the same stuff.
Reply
Taratarini patnaik 6 years ago
Thank you for useful videos
Reply