in Angular Material by
Explain Angular Material Sort Header

1 Answer

0 votes

The <mat-sort-header> is used to add sorting state and display the data in tabular data.

Adding sort to table headers

Adding sorting behavior and styling a set of table headers adds the <mat-sort-header> component to every heading and provides an ID that will recognize it. These headers can be included with the parent element along with the parent element directive, which triggers a truncation on any user header when a matSortChange event will emit.

Users can trigger sort headers by a single mouse click or a single keyboard action. When this happens, matSort will emit a matSortChange event having the (ID ascending or descending order) direction for sorting the ID and mat of the header.

Changing the sort order

By default, the sort header starts sorting on asc and then desc.

Set matSortStart to descending on the matSort directive to reverse the sort order of all headers. Instead of changing the order for the particular header, set the start input to the header only.

Disabling sorting

If we want to prevent the user from changing the order of any column, then we have to use the matSortDizable bindings when disabled on mat-sort or on the mat-sort-header.


The aria-label for the sort button will be set in MatSortHeaderIntl.

Related questions

0 votes
asked May 31, 2022 in Angular Material by Robin
0 votes
asked Mar 17, 2020 in C Plus Plus by SakshiSharma
0 votes
0 votes
asked Jan 26, 2020 in Big Data | Hadoop by rajeshsharma
0 votes
asked Mar 19, 2022 in SAP S/4 HANA Enterprise Management by sharadyadav1986