title: Angular 6 pagination with ng-bootstrap of fetched data from Api
body: <p>Can someone help me fix my code for pagination?</p>
  
  <p>There is a service:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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}&amp;page=${page}`);
    }
    getMovieDetails(id: number): any {
      return this.myHttp.get(`${this.movieDetails}?movie_id=${id}&amp;with_images=true&amp;with_cast=true`);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Second file is component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; this.movies = response.data.movies);
    }
    ngOnInit() {
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And last one is html of the component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" &gt;
    &lt;div class="col-sm-3 flex-md-wrap" *ngFor="let movie of movies"&gt;
      &lt;div class="card mb-3"&gt;
        &lt;a &gt;
          &lt;figure class="figure"&gt;
            &lt;img src="{{movie.medium_cover_image}}" alt="{{movie.title}}" class="figure-img img-fluid rounded mx-auto d-block" width="253"&gt;
            &lt;figcaption class="figure-caption"&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/a&gt;
        &lt;a routerLink="movie/{{movie.id}}"&gt;&lt;div&gt;{{ movie.title | json}}
        &lt;/div&gt;&lt;/a&gt;
        &lt;div class="mb-4"&gt;{{ movie.year | json}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;ngb-pagination
      class="d-flex justify-content-center"
      (pageChange)="getPageFromService()"
      [collectionSize]="collectionSize"
      [(page)]="page"
      [boundaryLinks]="true"&gt;
    &lt;/ngb-pagination&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/29Jkj.png" /></p>
  
  <p>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).</p>
  
  <p>Example of <em>json</em> from <em>api</em>:</p>
  
  <p><img src="https://i.stack.imgur.com/rrhIR.png" /></p>