List

API reference for Angular Material list

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

link Directives

link MatNavList

Selector: mat-nav-list

Exported as: matNavList

Properties

Name	Description
@Input() disableRipple: boolean	Whether ripples are disabled.

link MatList

Selector: mat-list mat-action-list

Exported as: matList

Properties

Name	Description
@Input() disableRipple: boolean	Whether ripples are disabled.

link MatListItem

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.

link MatListOption

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: 'before' | 'after'	Whether the label should appear before or after the checkbox. Defaults to 'after'
@Input() disableRipple: boolean	Whether ripples are disabled.
@Input() disabled: any	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.

link MatSelectionList

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

focus
Focuses the selection list.

selectAll
Selects all of the options.

link Classes

link MatSelectionListChange

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

Properties

Name	Description
option: MatListOption	Reference to the option that has been changed.
source: MatSelectionList	Reference to the selection list that emitted the event.