API reference for Angular Material list

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

Selector: mat-list-option

Exported as: matListOption
Properties
Name Description
@Input()

color: ThemePalette

Theme color of the list option. This sets the color of the checkbox/radio. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/list/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input()

disableRipple: boolean

Whether ripples for list items are disabled.
@Input()

disabled: boolean

Whether the list-item is disabled.
@Input()

lines: string | number

The number of lines this list item should reserve space for. If not specified, lines are inferred based on the projected content.

Explicitly specifying the number of lines is useful if you want to acquire additional space and enable the wrapping of text. The unscoped text content of a list item will always be able to take up the remaining space of the item, unless it represents the title.

A maximum of three lines is supported as per the Material Design specification.
@Input()

selected: boolean

Whether the option is selected.
@Input()

togglePosition: MatListOptionTogglePosition

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

value: any

Value of the option
@Input()
Deprecated

checkboxPosition: MatListOptionTogglePosition

Whether the label should appear before or after the checkbox/radio. Defaults to 'after'
Methods
focus

Allows for programmatic focusing of the option.
getLabel

Gets the text label of the list option. Used for the typeahead functionality in the list.
toggle

Toggles the selection state of the option.

Selector: mat-action-list

Exported as: matActionList
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples for all list items is disabled.
@Input()

disabled: boolean

Whether the entire list is disabled. When disabled, the list itself and each of its list items are disabled.

Selector: mat-list

Exported as: matList
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples for all list items is disabled.
@Input()

disabled: boolean

Whether the entire list is disabled. When disabled, the list itself and each of its list items are disabled.

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

Exported as: matListItem
Properties
Name Description
@Input()

activated: boolean

Indicates whether an item in a <mat-nav-list> is the currently active page.
@Input()

disableRipple: boolean

Whether ripples for list items are disabled.
@Input()

disabled: boolean

Whether the list-item is disabled.
@Input()

lines: string | number

The number of lines this list item should reserve space for. If not specified, lines are inferred based on the projected content.

Explicitly specifying the number of lines is useful if you want to acquire additional space and enable the wrapping of text. The unscoped text content of a list item will always be able to take up the remaining space of the item, unless it represents the title.

A maximum of three lines is supported as per the Material Design specification.

Selector: mat-nav-list

Exported as: matNavList
Properties
Name Description
@Input()

disableRipple: boolean

Whether ripples for all list items is disabled.
@Input()

disabled: boolean

Whether the entire list is disabled. When disabled, the list itself and each of its list items are disabled.

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. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/list/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@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 for all list items is disabled.
@Input()

disabled: boolean

Whether the entire selection list is disabled. When true, each list item is also disabled and each list item is removed from the tab order (has tabindex="-1").
@Input()

hideSingleSelectionIndicator: boolean

Whether radio indicator for all list items is hidden.
@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[]

Directive capturing the title of a list item. A list item usually consists of a title and optional secondary or tertiary lines.

Text content for the title never wraps. There can only be a single title per list item.

Selector: [matListItemTitle]

Directive capturing a line in a list item. A list item usually consists of a title and optional secondary or tertiary lines.

Text content inside a line never wraps. There can be at maximum two lines per list item.

Selector: [matListItemLine]

Directive matching an optional meta section for list items.

List items can reserve space at the end of an item to display a control, button or additional text content.

Selector: [matListItemMeta]

Directive matching an optional avatar within a list item.

List items can reserve space at the beginning of an item to display an avatar.

Selector: [matListItemAvatar]

Directive matching an optional icon within a list item.

List items can reserve space at the beginning of an item to display an icon.

Selector: [matListItemIcon]

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.

Object that can be used to configure the default options for the list module.

Properties
Name Description

hideSingleSelectionIndicator: boolean

Whether icon indicators should be hidden for single-selection.

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

type MatListOptionTogglePosition = '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>;

const MAT_SELECTION_LIST_VALUE_ACCESSOR: any;

Injection token that can be used to provide the default options for the list module.

const MAT_LIST_CONFIG: InjectionToken<MatListConfig>;