Angular Material

API reference for Angular Material list

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

Directives

`MatNavList`

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.

`MatList`

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.

`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.
@Input() `disabled: boolean`	Whether the option is disabled.

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

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

Classes

`MatSelectionListChange`

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.

Constants

`MAT_LIST`

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

`MAT_NAV_LIST`

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

Classes

`MatActionListHarness`

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

`MatActionListItemHarness`

Harness for interacting with an action list item.

Methods

async blur
Blurs the action list item.
`Promise<void>`	Promise that resolves when the action completes.

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

`MatListHarness`

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

`MatListItemHarness`

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

`MatNavListHarness`

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

`MatNavListItemHarness`

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

`MatSelectionListHarness`

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.

`MatListOptionHarness`

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.

Interfaces

`ListHarnessFilters`

`ActionListHarnessFilters`

`NavListHarnessFilters`

`SelectionListHarnessFilters`

`BaseListItemHarnessFilters`

Properties

Name	Description
`text: string \| RegExp`

`ListItemHarnessFilters`

`ActionListItemHarnessFilters`

`NavListItemHarnessFilters`

Properties

Name	Description
`href: string \| RegExp \| null`

`ListOptionHarnessFilters`

Properties

Name	Description
`selected: boolean`

`SubheaderHarnessFilters`

Properties

Name	Description
`text: string \| RegExp`

List

API reference for Angular Material list

link Directives

link MatNavList

Properties

link MatList

Properties

link MatListItem

Properties

link MatListOption

Properties

Methods

link MatSelectionList

Properties

Methods

link Classes

link MatSelectionListChange

Properties

link Constants

link MAT_LIST

link MAT_NAV_LIST

API reference for Angular Material list-testing

link Classes

link MatActionListHarness

Methods

link MatActionListItemHarness

Methods

link MatListHarness

Methods

link MatListItemHarness

Methods

link MatNavListHarness

Methods

link MatNavListItemHarness

Methods

link MatSelectionListHarness

Methods

link MatListOptionHarness

Methods

link Interfaces

link ListHarnessFilters

link ActionListHarnessFilters

link NavListHarnessFilters

link SelectionListHarnessFilters

link BaseListItemHarnessFilters

Properties

link ListItemHarnessFilters

link ActionListItemHarnessFilters

link NavListItemHarnessFilters

Properties

link ListOptionHarnessFilters

Properties

link SubheaderHarnessFilters

Properties

Directives

`MatNavList`

`MatList`

`MatListItem`

`MatListOption`

`MatSelectionList`

Classes

`MatSelectionListChange`

Constants

`MAT_LIST`

`MAT_NAV_LIST`

Classes

`MatActionListHarness`

`MatActionListItemHarness`

`MatListHarness`

`MatListItemHarness`

`MatNavListHarness`

`MatNavListItemHarness`

`MatSelectionListHarness`

`MatListOptionHarness`

Interfaces

`ListHarnessFilters`

`ActionListHarnessFilters`

`NavListHarnessFilters`

`SelectionListHarnessFilters`

`BaseListItemHarnessFilters`

`ListItemHarnessFilters`

`ActionListItemHarnessFilters`

`NavListItemHarnessFilters`

`ListOptionHarnessFilters`

`SubheaderHarnessFilters`