Sort header

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
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.
Deprecated

sortButtonLabel: (id: string) => { return `Change sorting for ${id}`; }

ARIA label for the sorting button.

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

Sets the position of the arrow that displays when sorted.
@Input()

disableClear: boolean

Overrides the disable clear value of the containing MatSort for this MatSortable.
@Input()

disabled: boolean

Whether the component 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()

start: 'asc' | 'desc'

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('matSortDisableClear')

disableClear: boolean

Whether to disable the user from clearing the sort by finishing the sort direction cycle. May be overriden by the MatSortable's disable clear input.
@Input( matSortDisabled)

disabled: boolean

Whether the component is disabled.
@Input('matSortStart')

start: 'asc' | 'desc'

The direction to set when an MatSortable is initially sorted. May be overriden 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>

Stream that emits once during the directive/component's ngOnInit.

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: 'asc' | 'desc'

Starting sort direction.

The current sort state.

Properties
Name Description

active: string

The id of the column being sorted.

direction: SortDirection

The sort direction.

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

API reference for Angular Material sort-testing

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

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

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>

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

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>

Deprecated
async
getAriaLabel

Gets the aria-label of the sort header.
Returns
Promise<string | null>

Properties
Name Description

label: string | RegExp

sortDirection: SortDirection

Sort header
Testing