Bottom Sheet

API for bottom-sheet

API reference for Angular Material bottom-sheet

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

Service to trigger Material Design bottom sheets.

Methods
dismiss

Dismisses the currently-visible bottom sheet.
open
Parameters

component

ComponentType<T>

config?

MatBottomSheetConfig<D>

Returns
MatBottomSheetRef<T, R>

open
Parameters

template

TemplateRef<T>

config?

MatBottomSheetConfig<D>

Returns
MatBottomSheetRef<T, R>

Configuration used when opening a bottom sheet.

Properties
Name Description

ariaLabel: string | null

Aria label to assign to the bottom sheet element.

autoFocus: boolean

Whether the bottom sheet should focus the first focusable element on open.

backdropClass: string

Custom class for the backdrop.

closeOnNavigation: boolean

Whether the bottom sheet should close when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).

data: D | null

Data being injected into the child component.

direction: 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: string | string[]

Extra CSS classes to be added to the bottom sheet container.

restoreFocus: boolean

Whether the bottom sheet should restore focus to the previously-focused element, after it's closed.

viewContainerRef: ViewContainerRef

The view container to place the overlay for the bottom sheet into.

Reference to a bottom sheet dispatched from the bottom sheet service.

Properties
Name Description

disableClose: boolean | undefined

Whether the user is allowed to close the bottom sheet.

instance: T

Instance of the component making up the content of the bottom sheet.
Methods
afterDismissed

Gets an observable that is notified when the bottom sheet is finished closing.
Returns
Observable<R | undefined>

afterOpened

Gets an observable that is notified when the bottom sheet has opened and appeared.
Returns
Observable<void>

backdropClick

Gets an observable that emits when the overlay's backdrop has been clicked.
Returns
Observable<MouseEvent>

dismiss

Dismisses the bottom sheet.
Parameters

result?

R

Data to be passed back to the bottom sheet opener.
keydownEvents

Gets an observable that emits when keydown events are targeted on the overlay.
Returns
Observable<KeyboardEvent>

Injection token that can be used to specify default bottom sheet options.

const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;

Injection token that can be used to access the data that was passed in to a bottom sheet.

const MAT_BOTTOM_SHEET_DATA: InjectionToken<any>;

Animations used by the Material bottom sheet.

const matBottomSheetAnimations: { readonly bottomSheetState: AnimationTriggerMetadata; };