Angular Material Bottom Sheet Close Button

By Arvind Rai, 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();
}

2. MatBottomSheetRef.dismiss() : Dismisses the bottom sheet.
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

The afterDismissed() 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.');
});

In the same way, for 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.html

Learn Angular @ConcretePage.com
<br/><br/> Learn Spring @ConcretePage.com
<br/><br/> Learn Hibernate @ConcretePage.com
<br/><br/>
<button mat-raised (click)="closeBottomSheet()">Close</button>

bottom-sheet.component.ts

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.');
		});
	}
}

example.component.html

<button mat-raised-button (click)="openBottomSheet()">Open Bottom Sheet</button>
<button mat-raised-button (click)="closeBottomSheet()">Close Bottom Sheet</button>

example.component.ts

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.');
    });
  }
}

app.component.ts

import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
     <app-bottom-sheet></app-bottom-sheet>
  `
})
export class AppComponent {
}

styles.css

.mybottomsheet {
	background-color: burlywood;
	color: blue;
	font-size: large;
}

app.module.ts

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.