Sort header

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.

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