API reference for Angular Material bottom-sheet
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
Services
MatBottomSheet
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. |
Classes
MatBottomSheetConfig
Configuration used when opening a bottom sheet.
Properties
Name | Description |
---|---|
|
Aria label to assign to the bottom sheet element. |
|
Whether this is a modal dialog. Used to set the |
|
Where the bottom sheet should focus on open. |
|
Custom class for the backdrop. |
|
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 |
|
Data being injected into the child component. |
|
Text layout direction for the bottom sheet. |
|
Whether the user can use escape or clicking outside to close the bottom sheet. |
|
Whether the bottom sheet has a backdrop. |
|
Height for the bottom sheet. |
|
Maximum height for the bottom sheet. If a number is provided, assumes pixel units. |
|
Minimum height for the bottom sheet. If a number is provided, assumes pixel units. |
|
Extra CSS classes to be added to the bottom sheet container. |
|
Whether the bottom sheet should restore focus to the previously-focused element, after it's closed. |
|
Scroll strategy to be used for the bottom sheet. |
|
The view container to place the overlay for the bottom sheet into. |
MatBottomSheetRef
Reference to a bottom sheet dispatched from the bottom sheet service.
Properties
Name | Description |
---|---|
|
|
|
Whether the user is allowed to close the bottom sheet. |
|
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>
|
|
Type aliases
AutoFocusTarget
Options for where to set focus to automatically on dialog open
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
Constants
MAT_BOTTOM_SHEET_DEFAULT_OPTIONS
Injection token that can be used to specify default bottom sheet options.
const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;
MAT_BOTTOM_SHEET_DATA
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>;
matBottomSheetAnimations
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';
Classes
MatBottomSheetHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard MatBottomSheet in tests.
Properties
Name | Description |
---|---|
|
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 |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options BottomSheetHarnessFilters = {}
|
Options for narrowing the search. |
Returns | |
HarnessPredicate<MatBottomSheetHarness>
|
a |