List

API for list

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: 'before' | 'after'

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

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.

focus

Focuses the selection list.

Parameters

options?

FocusOptions

selectAll

Selects all of the options.

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.

Deprecated

option: MatListOption

Reference to the option that has been changed.

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

API reference for Angular Material list-testing

import {MatActionListHarness} from '@angular/material/list/testing';

Harness for interacting with a standard mat-action-list in tests.

Methods
getItems
Parameters

filters?

F

Returns
Promise<C[]>

getItemsGroupedByDividers
Parameters

filters?

F

Returns
Promise<C[][]>

getItemsGroupedBySubheader
Parameters

filters?

F

Returns
Promise<ListSection<C>[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<[ ]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<C[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatSubheaderHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatDividerHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatSubheaderHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<(MatSubheaderHarness | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters?

{ item?

Returns
Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

Harness for interacting with an action list item.

Methods
async
blur

Blurs the action list item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
click

Clicks on the action list item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the action list item.

Returns
Promise<void>

Promise that resolves when the action completes.

getHarnessLoaderForContent
Returns
Promise<HarnessLoader>

getLinesText
Returns
Promise<string[]>

getText
Returns
Promise<string>

hasAvatar
Returns
Promise<boolean>

hasIcon
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isFocused

Whether the action list item is focused.

Returns
Promise<boolean>

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

Methods
getItems
Parameters

filters?

F

Returns
Promise<C[]>

getItemsGroupedByDividers
Parameters

filters?

F

Returns
Promise<C[][]>

getItemsGroupedBySubheader
Parameters

filters?

F

Returns
Promise<ListSection<C>[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<[ ]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<C[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatSubheaderHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatDividerHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatSubheaderHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<(MatSubheaderHarness | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters?

{ item?

Returns
Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

Harness for interacting with a list item.

Methods
getHarnessLoaderForContent
Returns
Promise<HarnessLoader>

getLinesText
Returns
Promise<string[]>

getText
Returns
Promise<string>

hasAvatar
Returns
Promise<boolean>

hasIcon
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

Harness for interacting with a standard mat-nav-list in tests.

Methods
getItems
Parameters

filters?

F

Returns
Promise<C[]>

getItemsGroupedByDividers
Parameters

filters?

F

Returns
Promise<C[][]>

getItemsGroupedBySubheader
Parameters

filters?

F

Returns
Promise<ListSection<C>[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<[ ]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<C[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatSubheaderHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatDividerHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatSubheaderHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<(MatSubheaderHarness | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters?

{ item?

Returns
Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

Harness for interacting with a nav list item.

Methods
async
blur

Blurs the nav list item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
click

Clicks on the nav list item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the nav list item.

Returns
Promise<void>

Promise that resolves when the action completes.

getHarnessLoaderForContent
Returns
Promise<HarnessLoader>

async
getHref

Gets the href for this nav list item.

Returns
Promise<string | null>

getLinesText
Returns
Promise<string[]>

getText
Returns
Promise<string>

hasAvatar
Returns
Promise<boolean>

hasIcon
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isFocused

Whether the nav list item is focused.

Returns
Promise<boolean>

Harness for interacting with a standard mat-selection-list in tests.

Methods
async
deselectItems

Deselects all items matching any of the given filters.

Parameters

filters

Filters that specify which items should be deselected.

...filters

ListItemHarnessFilters[]

Returns
Promise<void>

Promise that resolves when the action completes.

getItems
Parameters

filters?

F

Returns
Promise<C[]>

getItemsGroupedByDividers
Parameters

filters?

F

Returns
Promise<C[][]>

getItemsGroupedBySubheader
Parameters

filters?

F

Returns
Promise<ListSection<C>[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<[ ]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<C[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatSubheaderHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<MatDividerHarness[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatSubheaderHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item?

Returns
Promise<(C | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters

{ item

Returns
Promise<(MatSubheaderHarness | MatDividerHarness)[]>

getItemsWithSubheadersAndDividers
Parameters

filters?

{ item?

Returns
Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the selection list is disabled.

Returns
Promise<boolean>

async
selectItems

Selects all items matching any of the given filters.

Parameters

filters

Filters that specify which items should be selected.

...filters

ListOptionHarnessFilters[]

Returns
Promise<void>

Promise that resolves when the action completes.

Harness for interacting with a list option.

Methods
async
blur

Blurs the list option.

Returns
Promise<void>

Promise that resolves when the action completes.

async
deselect

Puts the list option in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked.

async
focus

Focuses the list option.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getCheckboxPosition

Gets the position of the checkbox relative to the list option content.

Returns
Promise<'before' | 'after'>

getHarnessLoaderForContent
Returns
Promise<HarnessLoader>

getLinesText
Returns
Promise<string[]>

getText
Returns
Promise<string>

hasAvatar
Returns
Promise<boolean>

hasIcon
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the list option is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the list option is focused.

Returns
Promise<boolean>

async
isSelected

Whether the list option is selected.

Returns
Promise<boolean>

async
select

Puts the list option in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked.

async
toggle

Toggles the checked state of the checkbox.

Properties
Name Description

text: string | RegExp

Properties
Name Description

href: string | RegExp | null

Properties
Name Description

selected: boolean

Properties
Name Description

text: string | RegExp