Angular Material Bottom Sheet

By Arvind Rai, October 12, 2022

On this page we will learn to use Angular Material bottom sheet.
1. The MatBottomSheet service is used to open Material Design panels to the bottom of the screen.
2. Bottom sheets are primarily useful in mobile devices where they can be used as an alternative to dialogs and menus.
3. Bottom sheet can be created either using Component or <ng-template>.
4. To work with MatBottomSheet, import the following module.

import { MatBottomSheetModule } from '@angular/material/bottom-sheet';

5. In addition to MatBottomSheet service, Angular Material provides some classes and constants to handle bottom sheet. The classes are MatBottomSheetConfig and MatBottomSheetRef. The constants are MAT_BOTTOM_SHEET_DEFAULT_OPTIONS and MAT_BOTTOM_SHEET_DATA.

Technologies Used
MatBottomSheet
MatBottomSheetRef
MatBottomSheetConfig
Opening and Closing Bottom Sheet
Passing CSS Class to Bottom Sheet
Bottom Sheet with a Component
Bottom Sheet with <ng-template>
Other Files used in Example
Run Application
Reference
Download Source Code

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

MatBottomSheet

The MatBottomSheet service is used to trigger Material Design bottom sheets. Find its methods.
open() : Opens a bottom sheet containing the given component or template.
dismiss() : Dismisses the currently-visible bottom sheet.

MatBottomSheetRef

The MatBottomSheetRef is reference to a bottom sheet dispatched from the bottom sheet service. It can be used to close the bottom sheet or get notified once the bottom is opened or closed. Find the MatBottomSheetRef methods.
dismiss() : Closes the bottom sheet.
afterDismissed() : Returns an Observable that is notified when the bottom sheet is finished closing.
afterOpened() : Returns an Observable that is notified when the bottom sheet has opened and appeared.
backdropClick() : Returns an Observable that emits when the overlay's backdrop has been clicked.
keydownEvents : Returns an Observable that emits when keydown events are targeted on the overlay.

MatBottomSheetConfig

We can pass our configuration to bottom sheet as MatBottomSheetConfig to open() method or to global configuration in application module. Find some properties of MatBottomSheetConfig class.
data : Data to pass to bottom sheet.
autoFocus : Boolean. Whether the bottom sheet should focus on open.
backdropClass : Custom class for the backdrop.
closeOnNavigation : Boolean. If bottom sheet should close when the user goes backwards/forwards in history.
direction : Text layout direction for the bottom sheet.
disableClose : Boolean. Whether the user can use escape or clicking outside to close the bottom sheet.
hasBackdrop : Boolean. Whether the bottom sheet has a backdrop.
panelClass : CSS classes for bottom sheet.
restoreFocus : Boolean. Whether the bottom sheet should restore focus to the previously-focused element, after it's closed.
scrollStrategy : Scroll strategy to be used for the bottom sheet.
viewContainerRef : The view container to place the overlay for the bottom sheet info.

Opening and Closing Bottom Sheet

1. Bottom sheets are created using a Component or a Template.
2. Bottom sheet can be opened and closed using the instance of MatBottomSheet.
3. We can inject MatBottomSheet in our component using constructor.

constructor(private bottomSheet: MatBottomSheet) { }

4. A bottom sheet can be created using a Component or <ng-template>. To open a bottom sheet, call MatBottomSheet.open() method.
a. Opening a bottom sheet as Component.

constructor(private bottomSheet: MatBottomSheet) { }

openBottomSheet(config?: MatBottomSheetConfig) {
   this.bottomSheet.open(Example1BottomSheetComponent, config);
}

b. Opening a bottom sheet as TemplateRef.

@ViewChild('spring') springTemplate = {} as TemplateRef<any>;

constructor(private bottomSheet: MatBottomSheet) { }

openBottomSheet(config?: MatBottomSheetConfig) {
   this.bottomSheet.open(this.springTemplate, config);
}

5. To close a bottom sheet, call MatBottomSheet.dismiss() or MatBottomSheetRef.dismiss() methods.
a. Closing a bottom sheet created as Component :

constructor(private bottomSheetRef: MatBottomSheetRef<Example1BottomSheetComponent>) { }

closeBottomSheet() {
     this.bottomSheetRef.dismiss();
}

To be notified if the bottom sheet is closed, we can subscribe the Observable obtained by afterDismissed() method.

this.bottomSheetRef.afterDismissed().subscribe(() => {
   console.log('Bottom sheet is closed.');
});

b. Closing a bottom sheet created as TemplateRef :

closeBottomSheet() {
     this.bottomSheet.dismiss(this.springTemplate);
}

Passing CSS Class to Bottom Sheet

We can pass CSS class to bottom sheet using panelClass property of MatBottomSheetConfig locally or globally.
Passing CSS class locally : We assign CSS class to panelClass property of MatBottomSheetConfig and pass to MatBottomSheet.open() method.
Find the TypeScript code.

openBottomSheet(config?: MatBottomSheetConfig) {
   this.bottomSheet.open(Example1BottomSheetComponent, config);
}

Find the HTML template code.

<button mat-raised-button (click)="openBottomSheet({ panelClass: 'mybottomsheet' })">Open Bottom Sheet</button>

Passing CSS class globally : We can override MAT_BOTTOM_SHEET_DEFAULT_OPTIONS by MatBottomSheetConfig in application module.
Assign CSS class to panelClass property.

providers: [
      { provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,
                 useValue: { panelClass: 'mybottomsheet', hasBackdrop: false }
      }
]

Bottom Sheet with a Component

1. Create a bottom sheet as component.
example-1-bottom-sheet.component.html

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

example-1-bottom-sheet.component.ts

import { Component } from '@angular/core';
import { MatBottomSheetRef, MatBottomSheetConfig } from '@angular/material/bottom-sheet';

@Component({
	templateUrl: './example-1-bottom-sheet.component.html'
})
export class Example1BottomSheetComponent {
	constructor(private bottomSheetRef: MatBottomSheetRef) { }

	closeBottomSheet() {
		this.bottomSheetRef.afterDismissed().subscribe(() => {
			console.log('Bottom sheet is closed.');
		});
		this.bottomSheetRef.dismiss();
	}
}

2. Open bottom sheet from different component.
example-1.component.html

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

example-1.component.ts

import { Component } from '@angular/core';
import { MatBottomSheet, MatBottomSheetConfig, MatBottomSheetRef } from '@angular/material/bottom-sheet';
import { Example1BottomSheetComponent } from './example-1-bottom-sheet.component';

@Component({
  selector: 'app-example-1',
  templateUrl: './example-1.component.html'
})
export class Example1Component {
  constructor(private bottomSheet: MatBottomSheet) { }

  openBottomSheet(config?: MatBottomSheetConfig) {
    this.bottomSheet.open(Example1BottomSheetComponent, config);
  }
}

Bottom Sheet with <ng-template>

Here bottom sheet is created using <ng-template>.
example-2.component.html

<ng-template #spring>
    Learn Spring Framework @ConcretePage.com
    <br/><br/>
    <button mat-raised (click)="closeBottomSheet()">Got it</button>
</ng-template>

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

example-2.component.ts

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatBottomSheet, MatBottomSheetConfig } from '@angular/material/bottom-sheet';

@Component({
    selector: 'app-example-2',
    templateUrl: './example-2.component.html'
})
export class Example2Component {
    @ViewChild('spring') springTemplate = {} as TemplateRef<any>;

    constructor(private bottomSheet: MatBottomSheet) { }

    openBottomSheet(config?: MatBottomSheetConfig) {
        this.bottomSheet.open(this.springTemplate, config);
    }
    closeBottomSheet() {
        this.bottomSheet.dismiss(this.springTemplate);
    }
}

Other Files used in Example

app.component.ts

import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
     <app-example-1></app-example-1>
     <app-example-2></app-example-2>
  `
})
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 { Example1BottomSheetComponent } from './example-1-bottom-sheet.component';
import { Example1Component } from './example-1.component';
import { Example2Component } from './example-2.component';


@NgModule({
      imports: [
            BrowserModule,
            BrowserAnimationsModule,
            MatBottomSheetModule,
            MatButtonModule
      ],
      declarations: [
            AppComponent,
            Example1Component,
            Example1BottomSheetComponent,
            Example2Component
      ],
      providers: [
            {
                  provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,
                  useValue: { panelClass: 'mybottomsheet', hasBackdrop: false }
            }
      ],
      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.