Angular Material Bottom Sheet Close Button
October 14, 2022
On this page we will learn to close Material bottom sheet in Angular application. To close bottom sheet, we need to use dismiss()
method. Bottom sheet is opened using open()
method. On success of opening and closing bottom sheet, we can be notified by afterOpened()
and afterDismissed()
method respectively.
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
dismiss() Method
Angular Material can be dismissed using following methods.1. MatBottomSheet.dismiss() : Dismisses the bottom sheet.
Parameter :
result? : R
Optional. Data to be passed back to the bottom sheet opener.
Find the code snippet.
constructor(private bottomSheet: MatBottomSheet) { } closeBottomSheet() { this.bottomSheet.dismiss(); }
Parameter :
result? : R
Data to be passed back to the bottom sheet opener.
Find the code snippet.
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>) { } closeBottomSheet() { this.bottomSheetRef.dismiss(); }
afterDismissed() Method
TheafterDismissed()
is the method of MatBottomSheetRef
class.
The afterDismissed()
returns an Observable
that is notified when the bottom sheet is finished closing.
this.bottomSheetRef.afterDismissed().subscribe(() => { console.log('Bottom sheet is closed.'); });
open()
method, MatBottomSheetRef
class provides afterOpened()
method that returns Observable
that is notified when the bottom sheet has opened and appeared.
Complete Example
bottom-sheet.component.htmlLearn Angular @ConcretePage.com <br/><br/> Learn Spring @ConcretePage.com <br/><br/> Learn Hibernate @ConcretePage.com <br/><br/> <button mat-raised (click)="closeBottomSheet()">Close</button>
import { Component } from '@angular/core'; import { MatBottomSheetRef, MatBottomSheetConfig } from '@angular/material/bottom-sheet'; @Component({ templateUrl: './bottom-sheet.component.html' }) export class BottomSheetComponent { constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>) { } closeBottomSheet() { this.bottomSheetRef.dismiss(); this.bottomSheetRef.afterDismissed().subscribe(() => { console.log('Bottom sheet is closed.'); }); } }
<button mat-raised-button (click)="openBottomSheet()">Open Bottom Sheet</button> <button mat-raised-button (click)="closeBottomSheet()">Close Bottom Sheet</button>
import { Component } from '@angular/core'; import { MatBottomSheet, MatBottomSheetConfig, MatBottomSheetRef } from '@angular/material/bottom-sheet'; import { BottomSheetComponent } from './bottom-sheet.component'; @Component({ selector: 'app-bottom-sheet', templateUrl: './example.component.html' }) export class ExampleComponent { bottomSheetRef = {} as MatBottomSheetRef<BottomSheetComponent> constructor(private bottomSheet: MatBottomSheet) { } openBottomSheet(config?: MatBottomSheetConfig) { this.bottomSheetRef = this.bottomSheet.open(BottomSheetComponent, config); this.bottomSheetRef.afterOpened().subscribe(() => { console.log('Bottom sheet is open.'); }); } closeBottomSheet() { //this.bottomSheet.dismiss(); this.bottomSheetRef.dismiss(); this.bottomSheetRef.afterDismissed().subscribe(() => { console.log('Bottom sheet is closed.'); }); } }
import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-bottom-sheet></app-bottom-sheet> ` }) export class AppComponent { }
.mybottomsheet { background-color: burlywood; color: blue; font-size: large; }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; import { MatButtonModule } from '@angular/material/button'; import { MAT_BOTTOM_SHEET_DEFAULT_OPTIONS } from '@angular/material/bottom-sheet'; import { AppComponent } from './app.component'; import { BottomSheetComponent } from './bottom-sheet.component'; import { ExampleComponent } from './example.component'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MatBottomSheetModule, MatButtonModule ], declarations: [ AppComponent, ExampleComponent, BottomSheetComponent ], providers: [ { provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: { panelClass: 'mybottomsheet' } } ], bootstrap: [ AppComponent ] }) export class AppModule { }
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.
