API for sort

API reference for Angular Material sort

import {MatSortModule} from '@angular/material/sort';

To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and include it in a custom provider.

Properties
Name Description

changes: Subject<void>

Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.

Applies sorting behavior (click to change sort) and styles to an element, including an arrow to display the current sort direction.

Must be provided with an id and contained within a parent MatSort directive.

If used on header cells in a CdkTable, it will automatically default its id from its containing column definition.

Selector: [mat-sort-header]

Exported as: matSortHeader
Properties
Name Description
@Input()

arrowPosition: SortHeaderArrowPosition

Sets the position of the arrow that displays when sorted.

@Input({ transform: booleanAttribute })

disableClear: boolean

Overrides the disable clear value of the containing MatSort for this MatSortable.

@Input({ transform: booleanAttribute })

disabled: boolean

whether the sort header is disabled.

@Input('mat-sort-header')

id: string

ID of this sort header. If used within the context of a CdkColumnDef, this will default to the column's name.

@Input()

sortActionDescription: string

Description applied to MatSortHeader's button element with aria-describedby. This text should describe the action that will occur when the user clicks the sort header.

@Input()

start: SortDirection

Overrides the sort start value of the containing MatSort for this MatSortable.

Container for MatSortables to manage the sort state and provide default sort parameters.

Selector: [matSort]

Exported as: matSort
Properties
Name Description
@Input('matSortActive')

active: string

The id of the most recently sorted MatSortable.

@Input('matSortDirection')

direction: SortDirection

The sort direction of the currently active MatSortable.

@Input({ alias: 'matSortDisableClear', transform: booleanAttribute })

disableClear: boolean

Whether to disable the user from clearing the sort by finishing the sort direction cycle. May be overridden by the MatSortable's disable clear input.

@Input({ alias: 'matSortDisabled', transform: booleanAttribute })

disabled: boolean

Whether the sortable is disabled.

@Input('matSortStart')

start: SortDirection

The direction to set when an MatSortable is initially sorted. May be overridden by the MatSortable's sort start.

@Output('matSortChange')

sortChange: EventEmitter<Sort>

Event emitted when the user changes either the active sort or sort direction.

initialized: Observable<void>

Emits when the paginator is initialized.

sortables: Map<string, MatSortable>

Collection of all registered sortables that this directive manages.

Methods
deregister

Unregister function to be used by the contained MatSortables. Removes the MatSortable from the collection of contained MatSortables.

Parameters

sortable

MatSortable

getNextSortDirection

Returns the next sort direction of the active sortable, checking for potential overrides.

Parameters

sortable

MatSortable

Returns
SortDirection

register

Register function to be used by the contained MatSortables. Adds the MatSortable to the collection of MatSortables.

Parameters

sortable

MatSortable

sort

Sets the active sort id and determines the new sort direction.

Parameters

sortable

MatSortable

Interface for a directive that holds sorting state consumed by MatSortHeader.

Properties
Name Description

disableClear: boolean

Whether to disable clearing the sorting state.

id: string

The id of the column being sorted.

start: SortDirection

Starting sort direction.

The current sort state.

Properties
Name Description

active: string

The id of the column being sorted.

direction: SortDirection

The sort direction.

Default options for mat-sort.

Properties
Name Description

arrowPosition: SortHeaderArrowPosition

Position of the arrow that displays when sorted.

disableClear: boolean

Whether to disable clearing the sorting state.

type SortDirection = 'asc' | 'desc' | '';

Position of the arrow that displays when sorted.

type SortHeaderArrowPosition = 'before' | 'after';

Injection token to be used to override the default options for mat-sort.

const MAT_SORT_DEFAULT_OPTIONS: InjectionToken<MatSortDefaultOptions>;

API reference for Angular Material sort-testing

import {MatSortHarness} from '@angular/material/sort/testing';

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

Properties
Name Description

static hostSelector: '.mat-sort'

Methods
async
getActiveHeader

Gets the selected header in the mat-sort.

Returns
Promise<MatSortHeaderHarness | null>

async
getSortHeaders

Gets all of the sort headers in the mat-sort.

Parameters

filter

SortHeaderHarnessFilters = {}

Returns
Promise<MatSortHeaderHarness[]>

async
host

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

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a mat-sort with specific attributes.

Parameters

options

SortHarnessFilters = {}

Options for narrowing the search.

Returns
HarnessPredicate<MatSortHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard Angular Material sort header in tests.

Properties
Name Description

static hostSelector: '.mat-sort-header'

Methods
async
click

Clicks the header to change its sorting direction. Only works if the header is enabled.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getLabel

Gets the label of the sort header.

Returns
Promise<string>

async
getSortDirection

Gets the sorting direction of the header.

Returns
Promise<SortDirection>

async
host

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

Returns
Promise<TestElement>

async
isActive

Gets whether the sort header is currently being sorted by.

Returns
Promise<boolean>

async
isDisabled

Whether the sort header is disabled.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a sort header with specific attributes.

Parameters

options

SortHeaderHarnessFilters = {}

Returns
HarnessPredicate<MatSortHeaderHarness>

Properties
Name Description

label: string | RegExp

sortDirection: SortDirection

Azure & Blue theme selected.