In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in admin panel also mostly we use side nav.
There are few steps we need to follow to implement angular material sidenav.
STEP 1 - install @angular/cli in your system
If @angular/cli is not installed in your system then first install angular/cli .Open the command prompt or terminal and run the below command to install @angular/cli
npm install -g @angular/cli
STEP 2 - Create new angular project
Open the command prompt or terminal and run the below command , this command will create new angular project
ng new angular-sidenav
STEP 3 - Install the Angular Material Package
Install the Angular Material package by running below command
Import MatSidenavModule in the app.module file
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatSidenavModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
STEP 4 - Add the Navbar code in the view template
In this last step we are going to add the code sidenav in the app.component.html
file and add some style in app.component.css
file, in this example i have used app.component.html
but you can use any component.
src/app/app.component.html
<mat-drawer-container class="container" autosize>
<mat-drawer #drawer class="sidenav" opened mode="side">
<p>Side Navbar</p>
</mat-drawer>
<div class="sidenav-content">
<button mat-raised-button color="primary" (click)="drawer.toggle()">Menu</button>
</div>
</mat-drawer-container>
Note : If you want to keep the navbar open use opened
directive in the <mat-deawer>
element , drawer.toggle()
this function helps to toggle the navbar.
src/app/app.component.css
.container {
min-height: 100Vh;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.sidenav {
padding: 20px;
min-width: 300px;
background-color: rgb(146, 166, 255);
}
Now you are ready just run the local server , run the below command to start the server
Open this URL http://localhost:4200/
I hope this article is helpful for you , i am very glad to help you thanks for reading