API reference for Angular Material list

import {MatListModule} from '@angular/material/list';

Selector: mat-nav-list

Exported as: matNavList
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the component is disabled.

Selector: mat-list mat-action-list

Exported as: matList
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the component is disabled.

An item within a Material Design list.

Selector: mat-list-item a[mat-list-item] button[mat-list-item]

Exported as: matListItem
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the option is disabled.

Component for list-options of selection-list. Each list-option can automatically generate a checkbox and can put current item into the selectionModel of selection-list if the current item is selected.

Selector: mat-list-option

Exported as: matListOption
Properties
Name Description
@Input()

checkboxPosition: MatListOptionCheckboxPosition

Whether the label should appear before or after the checkbox. Defaults to 'after'
@Input()

color: ThemePalette

Theme color of the list option. This sets the color of the checkbox.
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the option is disabled.
@Input()

selected: boolean

Whether the option is selected.
@Input()

value: any

Value of the option
Methods
focus

Allows for programmatic focusing of the option.
toggle

Toggles the selection state of the option.

Material Design list component where each item is a selectable option. Behaves as a listbox.

Selector: mat-selection-list

Exported as: matSelectionList
Properties
Name Description
@Input()

color: ThemePalette

Theme color of the selection list. This sets the checkbox color for all list options.
@Input()

compareWith: (o1: any, o2: any) => boolean

Function used for comparing an option against the selected value when determining which options should appear as selected. The first argument is the value of an options. The second one is a value from the selected value. A boolean must be returned.
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the selection list is disabled.
@Input()

multiple: boolean

Whether selection is limited to one or multiple items (default multiple).
@Output()

selectionChange: EventEmitter<MatSelectionListChange>

Emits a change event whenever the selected state of an option changes.

options: QueryList<MatListOption>

The option components contained within this selection-list.

selectedOptions: SelectionModel<MatListOption>

The currently selected options.
Methods
deselectAll

Deselects all of the options. Returns the options that changed as a result.
Returns
MatListOption[]

focus

Focuses the selection list.
Parameters

options?

FocusOptions

selectAll

Selects all of the options. Returns the options that changed as a result.
Returns
MatListOption[]

Change event that is being fired whenever the selected state of an option changes.

Properties
Name Description

options: MatListOption[]

Reference to the options that have been changed.

source: MatSelectionList

Reference to the selection list that emitted the event.

Type describing possible positions of a checkbox in a list option with respect to the list item's text.

type MatListOptionCheckboxPosition = 'before' | 'after';

Injection token that can be used to inject instances of MatList. It serves as alternative token to the actual MatList class which could cause unnecessary retention of the class and its component metadata.

const MAT_LIST: InjectionToken<MatList>;

Injection token that can be used to inject instances of MatNavList. It serves as alternative token to the actual MatNavList class which could cause unnecessary retention of the class and its component metadata.

const MAT_NAV_LIST: InjectionToken<MatNavList>;