Angular 6: Data Pagination using NgxPaginationModule

Angular 6: Data Pagination using NgxPaginationModule 

Here I have prepare a sample to load data in page wise.

Model

export class country{

    ID : number;

    Name : string;

}

Service

export class CountryService {

  constructor(private http:HttpClient) { }

  getCountry(pageNumber : Number): Observable<country[]> {

    return this.http.get<country[]>('http://localhost/DemoApp.API/api/CountryListPage?pageNumber='+ pageNumber)

  }

}

Component 

export class DemoComponent implements OnInit {

  pagenumber : Number;

  records = { count: 227, data: [] };

  config = {

      itemsPerPage: 5,

      currentPage: 1,

      totalItems: this.records.count

    };

 

  constructor(private countryService : CountryService, private route: ActivatedRoute, private router: Router) { 

    this.router.routeReuseStrategy.shouldReuseRoute = function(){

      return false;

      } 

    route.queryParams.subscribe(

      params => this.config.currentPage= params['page']?params['page']:1 ); 

      this.pagenumber =  +this.route.snapshot.queryParamMap.get('page');

         this.countryService.getCountry(this.pagenumber).subscribe(data=>{      

      this.records.data = data; 

      this.records.count = 227;

   });

  }

  ngOnInit() {

  }

  

  pageChanged(newPage: number) {

    this.router.navigate(['demo'], { queryParams: { page: newPage } });

  }

}

HTML

<table class="table">

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">Item</th>

      </tr>

    </thead>

    <tbody>

        <tr *ngFor="let item of records.data | paginate: config">

            <th scope="row">{{item.ID}}</th>

            <td>{{item.Name}}</td>

          </tr>

    </tbody>

  </table>

 

  <div>

    <pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

</div>

Hope this will help you and save your time.

Enjoy !!!

:)