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:

penleychan · Accepted Answer · 2018-10-01 19:03:45Z

6

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;
    });
}

edited Oct 1, 2018 at 19:03

answered Sep 29, 2018 at 17:15

penleychan

5,4971 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

penleychan Over a year ago

Similar how you store your movie. Create another variable to store the count from the response.

Anthony Fink Over a year ago

i need to do new function in service e.t.c. ?

Anthony Fink Over a year ago

now i have problem. so when i fetch data first time i directly fetch from page 1 and when i'm try to click to next page it's bring me to page one and only after this to page to for example

penleychan Over a year ago

Having a hard time understanding what issue you are having, could you make a stackblitz demonstrating the issue?

penleychan Over a year ago

@JacklinTrio, I've updated my answer for your issue you were having.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related