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
Harness for interacting with a standard mat-drawer in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
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>
|
|
getMode | |
---|---|
Gets the mode that the drawer is in. |
|
Returns | |
Promise<'over' | 'push' | 'side'>
|
|
getPosition | |
---|---|
Gets the position of the drawer inside its container. |
|
Returns | |
Promise<'start' | 'end'>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
isOpen | |
---|---|
Whether the drawer is open. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options DrawerHarnessFilters = {}
|
Options for filtering which drawer instances are considered a match. |
Returns | |
HarnessPredicate<MatDrawerHarness>
|
a |
MatDrawerContainerHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard mat-drawer-container in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getContent
|
|
---|---|
Gets the element that has the container's content. |
|
Returns | |
Promise<MatDrawerContentHarness>
|
|
async
getDrawers
|
|
---|---|
Gets drawers that match particular criteria within the container. |
|
Parameters | |
filter DrawerHarnessFilters = {}
|
Optionally filters which chips are included. |
Returns | |
Promise<MatDrawerHarness[]>
|
|
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 DrawerContainerHarnessFilters = {}
|
Options for filtering which container instances are considered a match. |
Returns | |
HarnessPredicate<MatDrawerContainerHarness>
|
a |
MatDrawerContentHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard mat-drawer-content in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
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 DrawerContentHarnessFilters = {}
|
Options for filtering which drawer content instances are considered a match. |
Returns | |
HarnessPredicate<MatDrawerContentHarness>
|
a |
MatSidenavContainerHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard mat-sidenav-container in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getContent
|
|
---|---|
Gets the element that has the container's content. |
|
Returns | |
Promise<MatSidenavContentHarness>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getSidenavs
|
|
---|---|
Gets sidenavs that match particular criteria within the container. |
|
Parameters | |
filter DrawerHarnessFilters = {}
|
Optionally filters which chips are included. |
Returns | |
Promise<MatSidenavHarness[]>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options DrawerContainerHarnessFilters = {}
|
Options for filtering which container instances are considered a match. |
Returns | |
HarnessPredicate<MatSidenavContainerHarness>
|
a |
MatSidenavContentHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard mat-sidenav-content in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
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 DrawerContentHarnessFilters = {}
|
Options for filtering which sidenav content instances are considered a match. |
Returns | |
HarnessPredicate<MatSidenavContentHarness>
|
a |
MatSidenavHarness
Harness for interacting with a standard mat-sidenav in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
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>
|
|
getMode | |
---|---|
Gets the mode that the drawer is in. |
|
Returns | |
Promise<'over' | 'push' | 'side'>
|
|
getPosition | |
---|---|
Gets the position of the drawer inside its container. |
|
Returns | |
Promise<'start' | 'end'>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isFixedInViewport
|
|
---|---|
Whether the sidenav is fixed in the viewport. |
|
Returns | |
Promise<boolean>
|
|
isOpen | |
---|---|
Whether the drawer is open. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options DrawerHarnessFilters = {}
|
Options for filtering which sidenav instances are considered a match. |
Returns | |
HarnessPredicate<MatSidenavHarness>
|
a |
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. |
DrawerContainerHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerContainerHarness
instances.
DrawerContentHarnessFilters
A set of criteria that can be used to filter a list of MatDrawerContentHarness
instances.