Bottom Sheet Modal Open in Angular

In My last article i discussed on how to implement rang-slider in our application using angular material. In these article I discuss on How to create Bottom Sheet Modal using Angular material.
For implement bottom sheet modal we have use “MatBottomSheet” Service from the angular material. It open popup from the bottom of the screen.
First we need to import “MatBottomSheetModule” in app.module.ts file.

//we need to import first TimepickerModule  From Bootstrap.
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
  imports: [
export class AppModule(){}

Basic Example of Bottom Sheet

import {Component} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';

  selector: 'bottom-sheet',
  templateUrl: 'bottom-sheet.html'
export class BottomSheetExample {
  constructor(private bottomSheet: MatBottomSheet) {}

  openBottomSheet(): void {;

  selector: 'bottom-sheet-overview',
  templateUrl: 'bottom-sheet-overview.html',
export class BottomSheetExampleSheet {
  constructor(private bottomSheetRef: MatBottomSheetRef) {}


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




In above example you can see we have create 2 class one for main class and 2nd for data for 1st component click. Display output in below video.

MatBottomSheet has 2 Methods dismiss & open

1) Open

Component Or TemplateRef <br/> ComponentType<T> | TemplateRef<T>

MatBottomSheetRef<T, R>

2) Dismiss : It dismisses the currently-visible bottom sheet.

MatBottomSheetRef has 5 Methods afterDismissed,afterOpened,backdropClick,dismiss,keydownEvents

1) afterDismissed: It triggers when the bottom sheet is finished closing. It gets an observable.
2) afterOpened: It triggers when bottom sheet has opened and appeared.It gets an observable.
3) backdropClick: It triggers when overlay’s backdrop has been clicked. It gets an observable that emits when trigger.
4) dismiss: It dismisses the currently-visible bottom sheet.
5) keydownEvents :It triggers when keydown events are targeted on the overlay.It gets observable.

Spread the love
  • 49