2

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:

miselking
  • 3,043
  • 4
  • 28
  • 39
Anthony Fink
  • 33
  • 1
  • 5

1 Answers1

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;
    });
}
penleychan
  • 5,370
  • 1
  • 17
  • 28