Angular Material mat-drawer
November 17, 2022
On this page we learn to use Material drawer in our Angular application.
1. Angular Material provides two sets of components to add collapsible side content. These are sidenav and drawer components.
2. The sidenav components add side content to a full screen app whereas drawer components add side content to a small section of our app.
3. The components to add sidenav are
<mat-sidenav-container>, <mat-sidenav>, <mat-sidenav-content> and corresponding components to add drawer are <mat-drawer-container>, <mat-drawer>, <mat-drawer-content>.
4. To work with sidenav and drawer, we need to import following module in our Angular Material application.
import { MatSidenavModule } from '@angular/material/sidenav';
Contents
1. Technologies Used
Find the technologies being used in our example.1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0
2. <mat-drawer-container>
The< mat-drawer-container> is the parent component for <mat-drawer> and <mat-drawer-content> component.
Find
@Input properties.
autosize : Boolean. If true, container will automatically resize the container whenever the size of any of its drawers changes.
hasBackdrop : Boolean. If true, the drawer container will have a backdrop while one of the sidenavs is open.
Find
@Output property.
backdropClick : Event emitted when the drawer backdrop is clicked.
It is used as following.
<mat-drawer-container> ------ </mat-drawer-container>
3. <mat-drawer>
The<mat-drawer> creates a drawer that is opened on the drawer container.
Find
@Input properties.
autoFocus : Boolean. If true, drawer will focus the first focusable element automatically when opens.
disableClose : Boolean. If true, the drawer can be closed with the escape key or by clicking on the backdrop.
mode : Mode of the drawer. Its values are 'over', 'push' or 'side'.
opened : Boolean. Whether the drawer is opened.
position : The side that the drawer is attached to. The values are 'start' and 'end'.
Find
@Output properties.
closedStart : Event emitted when the drawer has started closing.
positionChanged : Event emitted when the drawer's position changes.
openedChange : Event emitted when the drawer open state is changed.
openedStart : Event emitted when the drawer has started opening.
Find the methods of
<mat-drawer> component.
close() : Close the drawer.
open() : Open the drawer.
toggle() : Toggle this drawer.
The
<mat-drawer> is used as following.
<mat-drawer-container>
<mat-drawer>
------
</mat-drawer>
</mat-drawer-container>
4. <mat-drawer-content>
The<mat-drawer-content> contains the content. The content within <mat-drawer-container> except <mat-drawer> are drawer content. We can use <mat-drawer-content> to write content, but if we don’t use, the contents other than <mat-drawer>, are considered to be drawer content, by default.
Find the methods of
<mat-drawer-content> component.
elementScrolled() : Returns
Observable that emits when a scroll event is fired.
getElementRef : Gets the
ElementRef for the viewport.
measureScrollOffset : Measures the scroll offset relative to the specified edge of the viewport and returns a number.
scrollTo : Scrolls to the specified offsets.
The
<mat-drawer-content> is used as following.
<mat-drawer-container>
<mat-drawer>
------
</mat-drawer>
<mat-drawer-content>
------
</mat-drawer-content>
</mat-drawer-container>
<mat-drawer-content> element has not been used, all the contents within <mat-drawer-container> except <mat-drawer> are considered to be within <mat-drawer-content> by default.
<mat-drawer-container>
<mat-drawer>
Drawer content
</mat-drawer>
Content
</mat-drawer-container>
5. Drawer Mode and Position
The<mat-drawer> mode is handled by its mode property and position is handled by its position property.
A. Mode :
The values of
mode property are as following.
over : Drawer floats over the primary content, which is covered by a backdrop. It is default value.
<mat-drawer mode="over"> ------ </mat-drawer>
<mat-drawer mode="push"> ------ </mat-drawer>
<mat-drawer mode="side"> ------ </mat-drawer>
B. Position :
The values of
position property are as following.
start : Drawer is attached to start side. It is default value.
end : Drawer is attached to end side.
Find the code.
<mat-drawer mode="side" position="end"> ------ </mat-drawer>
Complete Example
example-drawer.component.html
<mat-drawer-container class="my-container">
<mat-drawer #drawer class="my-drawer" mode="over" position="start">
Drawer Demo
</mat-drawer>
<mat-drawer-content>
<div class="my-drawer-content">
<button type="button" mat-button (click)="drawer.toggle()">
Toggle Drawer
</button>
</div>
</mat-drawer-content>
</mat-drawer-container>
import { Component } from '@angular/core';
@Component({
selector: 'example-drawer',
templateUrl: 'example-drawer.component.html',
styleUrls: ['example-drawer.component.css']
})
export class ExampleDrawerComponent {
}
.my-container {
width: 400px;
height: 300px;
}
.my-drawer-content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.my-drawer {
padding: 30px;
background-color: burlywood;
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<example-drawer></example-drawer>`
})
export class AppComponent {
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { AppComponent } from './app.component';
import { ExampleDrawerComponent } from './example-drawer.component';
@NgModule({
declarations: [
AppComponent,
ExampleDrawerComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MatButtonModule,
MatSidenavModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
7. Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
