The <mat-sort-header> and matSort, an Angular Directives, are used to add sorting capability to a table header.

In this chapter, we will showcase the configuration required to show a Sort Header using Angular Material.

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import {BrowserAnimationsModule} from ''@angular/platform-browser/animations'';
import {MatSortModule} from ''@angular/material''
import {FormsModule, ReactiveFormsModule} from ''@angular/forms'';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSortModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<table matSort (matSortChange) = "sortFood($event)">
   <tr>
      <th mat-sort-header = "name">Dessert (100g)</th>
      <th mat-sort-header = "calories">Calories</th>
      <th mat-sort-header = "fat">Fat (g)</th>
      <th mat-sort-header = "carbs">Carbs (g)</th>
      <th mat-sort-header = "protein">Protein (g)</th>
   </tr>
   <tr *ngFor = "let food of sortedFood">
      <td>{{food.name}}</td>
      <td>{{food.calories}}</td>
      <td>{{food.fat}}</td>
      <td>{{food.carbs}}</td>
      <td>{{food.protein}}</td>
   </tr>
</table>

Following is the content of the modified ts file app.component.ts.

import {Component, Injectable} from ''@angular/core'';
import {Sort} from ''@angular/material'';
export interface Food {
   calories: number;
   carbs: number;
   fat: number;
   name: string;
   protein: number;
}
@Component({
   selector: ''app-root'',
   templateUrl: ''app.component.html'',
   styleUrls: [''app.component.css'']
})
export class AppComponent { 
   foods: Food[] = [
      {name: ''Yogurt'', calories: 159, fat: 6, carbs: 24, protein: 4},
      {name: ''Sandwich'', calories: 237, fat: 9, carbs: 37, protein: 4},
      {name: ''Eclairs'', calories: 262, fat: 16, carbs: 24, protein: 6},
      {name: ''Cupcakes'', calories: 305, fat: 4, carbs: 67, protein: 4},
      {name: ''Gingerbreads'', calories: 356, fat: 16, carbs: 49, protein: 4},
   ];
   sortedFood: Food[];
   constructor() {
      this.sortedFood = this.foods.slice();
   }
   sortFood(sort: Sort) {
      const data = this.foods.slice();
      if (!sort.active || sort.direction === '''') {
         this.sortedFood = data;
         return;
      }
      this.sortedFood = data.sort((a, b) => {
         const isAsc = sort.direction === ''asc'';
         switch (sort.active) {
            case ''name'': return compare(a.name, b.name, isAsc);
            case ''calories'': return compare(a.calories, b.calories, isAsc);
            case ''fat'': return compare(a.fat, b.fat, isAsc);
            case ''carbs'': return compare(a.carbs, b.carbs, isAsc);
            case ''protein'': return compare(a.protein, b.protein, isAsc);
            default: return 0;
         } 
      });
   }
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Result

Verify the result.

Details

• Here, we”ve created a table. Added matSort and handles its matSortChange event.