Blog

---------For pagination----------
npm install ngx-pagination --save
---------------------------------

<div class="row">
   <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
i.  import {NgxPaginationModule} from 'ngx-pagination';
ii. imports: [NgxPaginationModule,]
| paginate: { itemsPerPage: 20, currentPage: p }

<br><br>
=========For Sorting===============
npm install  ng2-order-pipe --save

import { Ng2OrderModule } from 'ng2-order-pipe'; //importing the module
------------------------------
//sorting
 key : string = 'id';//set default
 reverse : boolean = false;
 sort(key){
   this.key = key;
   this.reverse = !this.reverse;
 }
 p: number = 1;
<thead>
       <tr>
         <th (click)="sort('userId')">User iD
             <span class="glyphicon sort-icon" *ngIf="key =='userId'"
              [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
         </th>
         <th (click)="sort('id')">ID
         <span class="glyphicon sort-icon" *ngIf="key =='ID'"
         [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
         </th>
         <th (click)="sort('title')">Title
             <span class="glyphicon sort-icon" *ngIf="key =='title'"
             [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
             </th>      
             <th (click)="sort('body')">Body
                 <span class="glyphicon sort-icon" *ngIf="key =='title'"
                 [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                 </th>  
               </tr>
     </thead>
	 
| orderBy: key : reverse

<br><br>
==========For Searching / Filter=====================

npm i ng2-search-filter --save

import { Ng2SearchPipeModule } from 'ng2-search-filter';//for search filter

Note : with ng for add below 

=>  | filter:term 
-----------------------------------------------------
<div class="container">
   <div class="row">
       <nav class="navbar">
           <h3>Search Bar Down Here</h3>
           <input class="form-control" type="text" name="search" [(ngModel)]="term">
       </nav>
   </div>
</div>