Sidenav

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
API for sidenav

API reference for Angular Material sidenav

import {MatSidenavModule} from '@angular/material/sidenav';

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.

This component corresponds to a drawer that can be opened on the drawer container.

Selector: mat-drawer

Exported as: matDrawer
Properties
Name Description
@Input()

autoFocus: boolean

Whether the drawer should focus the first focusable element automatically when opened. Defaults to false in when mode is set to side, otherwise defaults to true. If explicitly enabled, focus will be moved into the sidenav in side mode as well.
@Input()

disableClose: boolean

Whether the drawer can be closed with the escape key or by clicking on the backdrop.
@Input()

mode: MatDrawerMode

Mode of the drawer; one of 'over', 'push' or 'side'.
@Input()

opened: boolean

Whether the drawer is opened. We overload this because we trigger an event when it starts or end.
@Input()

position: 'start' | 'end'

The side that the drawer is attached to.
@Output()

closedStart: Observable<void>

Event emitted when the drawer has started closing.
@Output('positionChanged')

onPositionChanged: EventEmitter<void>

Event emitted when the drawer's position changes.
@Output()

openedChange: EventEmitter<boolean>

Event emitted when the drawer open state is changed.
@Output()

openedStart: Observable<void>

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>

<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: matDrawerContainer
Properties
Name Description
@Input()

autosize: boolean

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 MAT_DRAWER_DEFAULT_AUTOSIZE token.
@Input()

hasBackdrop: any

Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.
@Output()

backdropClick: EventEmitter<void>

Event emitted when the drawer backdrop is clicked.

end: MatDrawer | null

The drawer child with the end position.

scrollable: CdkScrollable

Reference to the CdkScrollable instance that wraps the scrollable content.

start: MatDrawer | null

The drawer child with the start position.
Methods
close

Calls close of both start and end drawers
open

Calls open of both start and end drawers
updateContentMargins

Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow.

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.

Selector: mat-sidenav

Exported as: matSidenav
Properties
Name Description
@Input()

autoFocus: boolean

Whether the drawer should focus the first focusable element automatically when opened. Defaults to false in when mode is set to side, otherwise defaults to true. If explicitly enabled, focus will be moved into the sidenav in side mode as well.
@Input()

disableClose: boolean

Whether the drawer can be closed with the escape key or by clicking on the backdrop.
@Input()

fixedBottomGap: number

The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in fixed mode.
@Input()

fixedInViewport: boolean

Whether the sidenav is fixed in the viewport.
@Input()

fixedTopGap: number

The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed mode.
@Input()

mode: MatDrawerMode

Mode of the drawer; one of 'over', 'push' or 'side'.
@Input()

opened: boolean

Whether the drawer is opened. We overload this because we trigger an event when it starts or end.
@Input()

position: 'start' | 'end'

The side that the drawer is attached to.
@Output()

closedStart: Observable<void>

Event emitted when the drawer has started closing.
@Output('positionChanged')

onPositionChanged: EventEmitter<void>

Event emitted when the drawer's position changes.
@Output()

openedChange: EventEmitter<boolean>

Event emitted when the drawer open state is changed.
@Output()

openedStart: Observable<void>

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>

Selector: mat-sidenav-container

Exported as: matSidenavContainer
Properties
Name Description
@Input()

autosize: boolean

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 MAT_DRAWER_DEFAULT_AUTOSIZE token.
@Input()

hasBackdrop: any

Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.
@Output()

backdropClick: EventEmitter<void>

Event emitted when the drawer backdrop is clicked.

end: MatDrawer | null

The drawer child with the end position.

scrollable: CdkScrollable

Reference to the CdkScrollable instance that wraps the scrollable content.

start: MatDrawer | null

The drawer child with the start position.
Methods
close

Calls close of both start and end drawers
open

Calls open of both start and end drawers
updateContentMargins

Recalculates and updates the inline styles for the content. Note that this should be used sparingly, because it causes a reflow.

Result of the toggle promise that indicates the state of the drawer.

type MatDrawerToggleResult = 'open' | 'close';

Drawer and SideNav display modes.

type MatDrawerMode = 'over' | 'push' | 'side';

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

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 Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

async
isOpen

Whether the drawer is open.
Returns
Promise<boolean>

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 Promise for the TestElement representing the host element of the component.
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>

A set of criteria that can be used to filter a list of MatDrawerHarness instances.

Properties
Name Description

position: 'start' | 'end'

Only find instances whose side is the given value.
Sidenav
Testing