OrderBy Pipe in Angular

Updated on December 10, 2020     Kisan Patel

Lets create OrderBy pipes by running below command using angular cli:

$ ng g p OrderBy

safe-url.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'orderBy',
  pure: true
})
export class OrderByPipe implements PipeTransform {

    transform(value: any[], propertyName: string, reverse: boolean): any[] {
       if (propertyName && !reverse)
         return value.sort((a: any, b: any) => b[propertyName].localeCompare(a[propertyName]));
       else if (propertyName && reverse) {
        let arr = value.sort((a: any, b: any) => b[propertyName].localeCompare(a[propertyName]));
         return arr.reverse();
       }
       else
         return value;
    }
}

Now, use it as the following:

<table border='1' cellpadding='5'>
   <tr *ngFor="let item of data | orderBy:'lastName' : true">
     <td>{{item.firstName}}</td>
     <td>{{item.lastName}}</td>
     <td>{{item.age}}</td>
   </tr>
</table>