import { Component } from '@angular/core' ; import { Sort } from '@angular/material' ; export interface Dessert { calories : number ; carbs : number ; fat : number ; name : string ; protein : number ; } title @ Component ( { selector : 'sort-overview-example' , templateUrl : 'sort-overview-example.html' , styleUrls : [ 'sort-overview-example.css' ] , } ) export class SortOverviewExample { desserts : Dessert [ ] = [ { name : 'Frozen yogurt' , calories : 159 , fat : 6 , carbs : 24 , protein : 4 } , { name : 'Ice cream sandwich' , calories : 237 , fat : 9 , carbs : 37 , protein : 4 } , { name : 'Eclair' , calories : 262 , fat : 16 , carbs : 24 , protein : 6 } , { name : 'Cupcake' , calories : 305 , fat : 4 , carbs : 67 , protein : 4 } , { name : 'Gingerbread' , calories : 356 , fat : 16 , carbs : 49 , protein : 4 } , ] ; sortedData : Dessert [ ] ; constructor ( ) { this . sortedData = this . desserts . slice ( ) ; } sortData ( sort ) { const data = this . desserts . slice ( ) ; if ( ! sort . active || sort . direction === '' ) { this . sortedData = data ; return ; } this . sortedData = 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 , b , isAsc ) { return ( a < b ? - 1 : 1 ) * ( isAsc ? 1 : - 1 ) ; }