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: AutoFocusTarget | string | 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: boolean

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: AutoFocusTarget | string | 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: boolean

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.

Properties
Name Description

static hostSelector: '.mat-drawer'

The selector for the host element of a MatDrawer instance.

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

Returns
Promise<TestElement>

isOpen

Whether the drawer is open.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a MatDrawerHarness that meets certain criteria.

Parameters

options

DrawerHarnessFilters = {}

Options for filtering which drawer instances are considered a match.

Returns
HarnessPredicate<MatDrawerHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-drawer-container in tests.

Properties
Name Description

static hostSelector: '.mat-drawer-container'

The selector for the host element of a MatDrawerContainer instance.

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

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a MatDrawerContainerHarness that meets certain criteria.

Parameters

options

DrawerContainerHarnessFilters = {}

Options for filtering which container instances are considered a match.

Returns
HarnessPredicate<MatDrawerContainerHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-drawer-content in tests.

Properties
Name Description

static hostSelector: '.mat-drawer-content'

The selector for the host element of a MatDrawerContent instance.

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

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a MatDrawerContentHarness that meets certain criteria.

Parameters

options

DrawerContentHarnessFilters = {}

Options for filtering which drawer content instances are considered a match.

Returns
HarnessPredicate<MatDrawerContentHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-sidenav-container in tests.

Properties
Name Description

static hostSelector: '.mat-sidenav-container'

The selector for the host element of a MatSidenavContainer instance.

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

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a MatSidenavContainerHarness that meets certain criteria.

Parameters

options

DrawerContainerHarnessFilters = {}

Options for filtering which container instances are considered a match.

Returns
HarnessPredicate<MatSidenavContainerHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-sidenav-content in tests.

Properties
Name Description

static hostSelector: '.mat-sidenav-content'

The selector for the host element of a MatSidenavContent instance.

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

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a MatSidenavContentHarness that meets certain criteria.

Parameters

options

DrawerContentHarnessFilters = {}

Options for filtering which sidenav content instances are considered a match.

Returns
HarnessPredicate<MatSidenavContentHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-sidenav in tests.

Properties
Name Description

static hostSelector: '.mat-sidenav'

The selector for the host element of a MatSidenav instance.

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

isOpen

Whether the drawer is open.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a MatSidenavHarness that meets certain criteria.

Parameters

options

DrawerHarnessFilters = {}

Options for filtering which sidenav instances are considered a match.

Returns
HarnessPredicate<MatSidenavHarness>

a HarnessPredicate configured with the given options.

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.

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

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

Azure & Blue theme selected.