vishalbiradar/angular-sorting

Sorting list of objects using ng2-order-pipe

Angular Sorting

Steps to achieve sorting in angular project are as below:

1. Install the required packages

   npm install ng2-order-pipe --save

2. Import Ng2OrderModule

   app.module.ts

   import { Ng2OrderModule } from 'ng2-order-pipe';
   @NgModule({
     ...
     ...
     imports: [
       Ng2OrderModule
     ]
   })
   export class AppModule { }

3. Create a mock list which one we want to sort

   app.component.ts

   heroes = [
       { id: 11, name: 'Mr. Nice', country: 'India' },
       ...
       ...
     ];

4. Show/iterate this list in our html page

   <div class="container">
     <div class="row">
       <table class="table table-striped">
         <thead>
         <tr>
           <th>Id</th>
           <th>Hero Name</th>
           <th>Country</th>
         </tr>
         </thead>
         <tbody>
         <tr *ngFor="let hero of heroes>
           <td>{{hero.id}}</td>
           <td>{{hero.name}}</td>
           <td>{{hero.country}}</td>
         </tr>
         </tbody>
       </table>
     </div>
   </div>
   

5. Create key and reverse varibales key = default field based on which we want to sort our list reverse = sorting in ascending or descending order

   app.component.ts

   key = 'name';  // means i want to apply sorting on name as default
   reverse = false;

6. Write the sorting logic in a function will send the key from UI to this function, based on which we want to sort our list

   sortList(key) {
       this.key = key;
       this.reverse = !this.reverse;
     }

7. Lets create onclick functions which will send the key to our sorting function

   <span (click)="sortList('name')" class="by-name">Name</span>
   <span (click)="sortList('country')" class="by-country">Country</span>

8. Actual plugin sorting logic to be applied on the list iteration

   *ngFor="let hero of heroes | orderBy: key : reverse"

Demo

https://stackblitz.com/edit/angular-sorting