API reference for Angular Material sidenav
import {MatSidenavModule} from '@angular/material/sidenav';
Directives
MatDrawerContent
extends
CdkScrollable
Selector: mat-drawer-content
Methods
elementScrolled | |
---|---|
Returns observable that emits when a scroll event is fired on the host element. |
|
Returns | |
Observable<Event>
|
|
getElementRef | |
---|---|
Gets the ElementRef for the viewport. |
|
Returns | |
ElementRef<HTMLElement>
|
|
measureScrollOffset | |
---|---|
Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
Parameters | |
from "top" | "bottom" | "start" | "end" | "left" | "right"
|
The edge to measure from. |
Returns | |
number
|
|
scrollTo | |
---|---|
Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
Parameters | |
options ExtendedScrollToOptions
|
specified the offsets to scroll to. |
MatDrawer
This component corresponds to a drawer that can be opened on the drawer container.
Selector: mat-drawer
Exported as: matDrawerProperties
Name | Description |
---|---|
@Input()
|
Whether the drawer should focus the first focusable element automatically when opened.
Defaults to false in when |
@Input()
|
Whether the drawer can be closed with the escape key or by clicking on the backdrop. |
@Input()
|
Mode of the drawer; one of 'over', 'push' or 'side'. |
@Input()
|
Whether the drawer is opened. We overload this because we trigger an event when it starts or end. |
@Input()
|
The side that the drawer is attached to. |
@Output()
|
Event emitted when the drawer has started closing. |
@Output('positionChanged')
|
Event emitted when the drawer's position changes. |
@Output()
|
Event emitted when the drawer open state is changed. |
@Output()
|
Event emitted when the drawer has started opening. |
Methods
async
close
|
|
---|---|
Close the drawer. |
|
Returns | |
Promise<MatDrawerToggleResult>
|
|
async
open
|
|
---|---|
Open the drawer. |
|
Parameters | |
openedVia? FocusOrigin
|
Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
Returns | |
Promise<MatDrawerToggleResult>
|
|
async
toggle
|
|
---|---|
Toggle this drawer. |
|
Parameters | |
isOpen boolean = !this.opened
|
Whether the drawer should be open. |
openedVia? FocusOrigin
|
Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
Returns | |
Promise<MatDrawerToggleResult>
|
|
MatDrawerContainer
<mat-drawer-container>
component.
This is the parent component to one or two <mat-drawer>
s that validates the state internally
and coordinates the backdrop and content styling.
Selector: mat-drawer-container
Exported as: matDrawerContainerProperties
Name | Description |
---|---|
@Input()
|
Whether to automatically resize the container whenever the size of any of its drawers changes. Use at your own risk! Enabling this option can cause layout thrashing by measuring
the drawers on every change detection cycle. Can be configured globally via the
|
@Input()
|
Whether the drawer container should have a backdrop while one of the sidenavs is open.
If explicitly set to |
@Output()
|
Event emitted when the drawer backdrop is clicked. |
|
The drawer child with the |
|
Reference to the CdkScrollable instance that wraps the scrollable content. |
|
The drawer child with the |
Methods
close | |
---|---|
Calls |
open | |
---|---|
Calls |
updateContentMargins | |
---|---|
Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow. |
MatSidenavContent
extends
MatDrawerContent
Selector: mat-sidenav-content
Methods
elementScrolled | |
---|---|
Returns observable that emits when a scroll event is fired on the host element. |
|
Returns | |
Observable<Event>
|
|
getElementRef | |
---|---|
Gets the ElementRef for the viewport. |
|
Returns | |
ElementRef<HTMLElement>
|
|
measureScrollOffset | |
---|---|
Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
Parameters | |
from "top" | "bottom" | "start" | "end" | "left" | "right"
|
The edge to measure from. |
Returns | |
number
|
|
scrollTo | |
---|---|
Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
Parameters | |
options ExtendedScrollToOptions
|
specified the offsets to scroll to. |
MatSidenav
extends
MatDrawer
Selector: mat-sidenav
Exported as: matSidenavProperties
Name | Description |
---|---|
@Input()
|
Whether the drawer should focus the first focusable element automatically when opened.
Defaults to false in when |
@Input()
|
Whether the drawer can be closed with the escape key or by clicking on the backdrop. |
@Input()
|
The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in fixed mode. |
@Input()
|
Whether the sidenav is fixed in the viewport. |
@Input()
|
The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed mode. |
@Input()
|
Mode of the drawer; one of 'over', 'push' or 'side'. |
@Input()
|
Whether the drawer is opened. We overload this because we trigger an event when it starts or end. |
@Input()
|
The side that the drawer is attached to. |
@Output()
|
Event emitted when the drawer has started closing. |
@Output('positionChanged')
|
Event emitted when the drawer's position changes. |
@Output()
|
Event emitted when the drawer open state is changed. |
@Output()
|
Event emitted when the drawer has started opening. |
Methods
async
close
|
|
---|---|
Close the drawer. |
|
Returns | |
Promise<MatDrawerToggleResult>
|
|
async
open
|
|
---|---|
Open the drawer. |
|
Parameters | |
openedVia? FocusOrigin
|
Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
Returns | |
Promise<MatDrawerToggleResult>
|
|
async
toggle
|
|
---|---|
Toggle this drawer. |
|
Parameters | |
isOpen boolean = !this.opened
|
Whether the drawer should be open. |
openedVia? FocusOrigin
|
Whether the drawer was opened by a key press, mouse click or programmatically. Used for focus management after the sidenav is closed. |
Returns | |
Promise<MatDrawerToggleResult>
|
|
MatSidenavContainer
extends
MatDrawerContainer
Selector: mat-sidenav-container
Exported as: matSidenavContainerProperties
Name | Description |
---|---|
@Input()
|
Whether to automatically resize the container whenever the size of any of its drawers changes. Use at your own risk! Enabling this option can cause layout thrashing by measuring
the drawers on every change detection cycle. Can be configured globally via the
|
@Input()
|
Whether the drawer container should have a backdrop while one of the sidenavs is open.
If explicitly set to |
@Output()
|
Event emitted when the drawer backdrop is clicked. |
|
The drawer child with the |
|
Reference to the CdkScrollable instance that wraps the scrollable content. |
|
The drawer child with the |
Methods
close | |
---|---|
Calls |
open | |
---|---|
Calls |
updateContentMargins | |
---|---|
Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow. |
Type aliases
MatDrawerToggleResult
Result of the toggle promise that indicates the state of the drawer.
type MatDrawerToggleResult = 'open' | 'close';
MatDrawerMode
Drawer and SideNav display modes.
type MatDrawerMode = 'over' | 'push' | 'side';
Constants
MAT_DRAWER_DEFAULT_AUTOSIZE
Configures whether drawers should use auto sizing by default.
const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
API reference for Angular Material sidenav-testing
import {MatDrawerHarness} from '@angular/material/sidenav/testing';
Classes
MatDrawerHarness
extends
ComponentHarness
Harness for interacting with a standard mat-drawer in tests.
Methods
async
getMode
|
|
---|---|
Gets the mode that the drawer is in. |
|
Returns | |
Promise<'over' | 'push' | 'side'>
|
|
async
getPosition
|
|
---|---|
Gets the position of the drawer inside its container. |
|
Returns | |
Promise<'start' | 'end'>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isOpen
|
|
---|---|
Whether the drawer is open. |
|
Returns | |
Promise<boolean>
|
|
MatSidenavHarness
extends
MatDrawerHarness
Harness for interacting with a standard mat-sidenav in tests.
Methods
async
getMode
|
|
---|---|
Gets the mode that the drawer is in. |
|
Returns | |
Promise<'over' | 'push' | 'side'>
|
|
async
getPosition
|
|
---|---|
Gets the position of the drawer inside its container. |
|
Returns | |
Promise<'start' | 'end'>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isFixedInViewport
|
|
---|---|
Whether the sidenav is fixed in the viewport. |
|
Returns | |
Promise<boolean>
|
|
async
isOpen
|
|
---|---|
Whether the drawer is open. |
|
Returns | |
Promise<boolean>
|
|
Interfaces
DrawerHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose side is the given value. |