Developer Snippet Diary

Pagination in Angular

Angular Updated: March 29, 2023 Author: Muhammad Farhan Public
  1. install pagination. npm install ngx-pagination
  2. import pagination and HttpClientModul in app.module.ts
  3. import HttpClient and Observable in your component.ts file
  4. Your method for HTTP call that is showing results should be observable. 
    getAllCoup( currentPage: number, filter: any ): Observable<any>{

    this.allCoupns = "https://adscombined.com/v1/public/api/FilterCoupons?Filter="+filter+"&SubType=&Page="+currentPage+"&PerPage=60";
    return this.allCoupons.post( this.allCoupns, {} );
    
  }
  5. add | paginate. ((( 
    <div class="col-12" *ngFor="let fCoup of filteredCategoryCoupons | paginate:{
                            currentPage: currentPage,
                            itemsPerPage: perPage,
                            totalItems: TotalCouponsCount
                        }; let i = index">
    )))
  6.  
Posted by: Muhammad Farhan
Email: helpinghour@gmail.com