Sidenav

API for sidenav

API reference for Angular Material sidenav

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

Selector: mat-drawer-content

Properties
Name Description

dir: Directionality

elementRef: ElementRef<HTMLElement>

ngZone: NgZone

scrollDispatcher: ScrollDispatcher

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

disableClose: boolean

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

mode: 'over' | 'push' | 'side'

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
close

Close the drawer.
Returns
Promise<MatDrawerToggleResult>

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>

toggle

Toggle this drawer.
Parameters

isOpen

boolean = !this.opened

Whether the drawer should be open.

openedVia

FocusOrigin = 'program'

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

Selector: mat-sidenav-content

Properties
Name Description

dir: Directionality

elementRef: ElementRef<HTMLElement>

ngZone: NgZone

scrollDispatcher: ScrollDispatcher

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.
@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: 'over' | 'push' | 'side'

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
close

Close the drawer.
Returns
Promise<MatDrawerToggleResult>

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>

toggle

Toggle this drawer.
Parameters

isOpen

boolean = !this.opened

Whether the drawer should be open.

openedVia

FocusOrigin = 'program'

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

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

type MatDrawerToggleResult = 'open' | 'close';

Configures whether drawers should use auto sizing by default.

const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;