Create Sorting Pipe in Angular5

Angular Pipe:-

A pipe takes in data as input and transforms it to a desired output. In this page, you'll use pipes to transform a component's Array of object data into sorting order(ascending/descending).

Create pipe using cli

ng g pipe order-by

write below code in order-by.pipe.ts file

import { Pipe, PipeTransform } from '@angular/core';

import { retry } from 'rxjs/operator/retry';

@Pipe({

name: 'orderBy'

})

export class OrderByPipe implements PipeTransform {

transform(items: any[], key?: string, order?: string, typeOf?: string): any[] {

if (items && Array.isArray(items)) {

let asc = (order != 'dsc') ? -1 : 1, c, d;//c,d update only value not reffrence

return items.sort(function (a, b) {

if (key)

c = a[key], d = b[key];

else

c = a, d = b;

if (typeOf === 'date') {

c = typeof (c) === 'string' ? new Date(c) : c;

d = typeof (d) === 'string' ? new Date(d) : d;

}

else if (typeOf === 'number') {

c = parseFloat(c);

d = parseFloat(d);

}

return (c > d) ? (asc * -1) : (c < d ? asc : 0);

});

}

return [];

}

}

Write below code where you want to sort data(In component html)

<div *ngFor="let detail of auditSiteData | orderBy:'audit_date':'asc':'date'">

{{detail.audit_date }}

</div>