Angular 6 pagination with ng-bootstrap of fetched data from Api

Question

Can someone help me fix my code for pagination?

There is a service:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable () export class MovieRequestService { private moviesList = `https://yts.am/api/v2/list_movies.json`; private movieDetails = `https://yts.am/api/v2/movie_details.json`; constructor(private myHttp: HttpClient ) { } getListOfMovies(page: number, collectionSize: number): any { return this.myHttp.get(`${this.moviesList}?limit=${collectionSize}&page=${page}`); } getMovieDetails(id: number): any { return this.myHttp.get(`${this.movieDetails}?movie_id=${id}&with_images=true&with_cast=true`); } } 

Second file is component:

 import { Component, OnInit } from '@angular/core'; import { MovieRequestService } from '../../shared/services/movie-request.service'; import { HttpClient} from '@angular/common/http'; import { ContentChild } from '@angular/core'; import { NgbPagination } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-movie-list', templateUrl: './movie-list.component.html', styleUrls: ['./movie-list.component.css'] }) export class MovieListComponent implements OnInit { @ContentChild(NgbPagination) pagination: NgbPagination; page = 1; collectionSize = 40; movies: any[] = new Array; constructor(private movieService: MovieRequestService, private http: HttpClient) { this.getPageFromService(); } getPageFromService() { this.movieService.getListOfMovies(this.page, this.collectionSize).subscribe(response => this.movies = response.data.movies); } ngOnInit() { } } 

And last one is html of the component:

 <div class="row" > <div class="col-sm-3 flex-md-wrap" *ngFor="let movie of movies"> <div class="card mb-3"> <a > <figure class="figure"> <img src="{{movie.medium_cover_image}}" alt="{{movie.title}}" class="figure-img img-fluid rounded mx-auto d-block" width="253"> <figcaption class="figure-caption"> </figcaption> </figure> </a> <a routerLink="movie/{{movie.id}}"><div>{{ movie.title | json}} </div></a> <div class="mb-4">{{ movie.year | json}}</div> </div> </div> <ngb-pagination class="d-flex justify-content-center" (pageChange)="getPageFromService()" [collectionSize]="collectionSize" [(page)]="page" [boundaryLinks]="true"> </ngb-pagination> </div> 

Result:

As you can see, there are only 4 pages of paginations but there should be more than 200 (db has 8973 movies with limit of 40 per page).

Example of json from api :

Answer 1

Your collectionSize is 40. By default page size is 10. Thus you see 4 pages.

You need to change your collectionSize = your movie count and pageSize of 40.

Edit:

this.movieService
  .getListOfMovies(this.page, this.pageSize)
  .subscribe(response => {
    this.movies = response.data.movies;
    this.collectionSize = response.data.movie_count;
  });

Edit 2: Seems like page doesn't get updated due to the change detection, you need to pass the emitted event from pageChange , you can see that if you log your this.page it is always returning the previous value.

On your HTML:

 <ngb-pagination
(pageChange)="getPageFromService($event)"
[pageSize]="pageSize"
[(page)]="page"
[maxSize]="5"
[rotate]="true"
[collectionSize]="collectionSize"
[boundaryLinks]="true"
></ngb-pagination>

On .ts

getPageFromService(page) {
    this.movieService.getListOfMovies(page, this.pageSize).subscribe(response => {
      this.movies = response.data.movies;
      this.collectionSize = response.data.movie_count;
    });
}