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.

Parameters

result?

R

Data to pass to the bottom sheet instance.

open

Opens a bottom sheet containing the given component.

Parameters

component

ComponentType<T>

Type of the component to load into the bottom sheet.

config?

MatBottomSheetConfig<D>

Extra configuration options.

Returns
MatBottomSheetRef<T, R>

Reference to the newly-opened bottom sheet.

open

Opens a bottom sheet containing the given template.

Parameters

template

TemplateRef<T>

TemplateRef to instantiate as the bottom sheet content.

config?

MatBottomSheetConfig<D>

Extra configuration options.

Returns
MatBottomSheetRef<T, R>

Reference to the newly-opened bottom sheet.

Configuration used when opening a bottom sheet.

Properties
Name Description

ariaLabel: string | null

Aria label to assign to the bottom sheet element.

ariaModal: boolean

Whether this is a modal dialog. Used to set the aria-modal attribute. Off by default, because it can interfere with other overlay-based components (e.g. mat-select) and because it is redundant since the dialog marks all outside content as aria-hidden anyway.

autoFocus: AutoFocusTarget | string | boolean

Where the bottom sheet should focus 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.

height: string

Height for the bottom sheet.

maxHeight: number | string

Maximum height for the bottom sheet. If a number is provided, assumes pixel units.

minHeight: number | string

Minimum height for the bottom sheet. If a number is provided, assumes pixel units.

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.

scrollStrategy: ScrollStrategy

Scroll strategy to be used for the bottom sheet.

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

componentRef: ComponentRef<T> | null

ComponentRef of the component opened into the bottom sheet. Will be null when the bottom sheet is opened using a TemplateRef.

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>

Options for where to set focus to automatically on dialog open

type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';

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; };

API reference for Angular Material bottom-sheet-testing

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

Harness for interacting with a standard MatBottomSheet in tests.

Properties
Name Description

static hostSelector: '.mat-bottom-sheet-container'

Methods
async
dismiss

Dismisses the bottom sheet by pressing escape. Note that this method cannot be used if "disableClose" has been set to true via the config.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAllChildLoaders
Parameters

selector

S

Returns
Promise<HarnessLoader[]>

async
getAllHarnesses
Parameters

query

HarnessQuery<T>

Returns
Promise<T[]>

async
getAriaLabel

Gets the value of the bottom sheet's "aria-label" attribute.

Returns
Promise<string | null>

async
getChildLoader
Parameters

selector

S

Returns
Promise<HarnessLoader>

async
getHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<T>

async
getHarnessOrNull
Parameters

query

HarnessQuery<T>

Returns
Promise<T | null>

async
hasHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a bottom sheet with specific attributes.

Parameters

options

BottomSheetHarnessFilters = {}

Options for narrowing the search.

Returns
HarnessPredicate<MatBottomSheetHarness>

a HarnessPredicate configured with the given options.

Azure & Blue theme selected.