Настроить пагинацию на Angular2 и Bootstrap

import { Component, OnInit} from '@angular/core'; 
import { $inject } from 'app/shared'; 
 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { map, distinctUntilChanged, pluck, combineLatest, startWith, filter} from 'rxjs/operators'; 
 
import { length, prop, compose, splitEvery, take, last, not, isNil } from 'ramda'; 
 
import { rxAdapter } from 'app/utils'; 
 
@Component({ 
    selector: 'app-ticket-list', 
    template, 
}) 
export class TicketListComponent implements OnInit { 
 
  private showTicketQuestion: Function; 
 
  private ticketStore: any; 
 
  private tickets$: Observable<any>; 
  private ticketsPart$: Observable<any>; 
  private itemsPerPage$: Observable<any>; 
  private showPagination$: Observable<any>; 
  private count$: Observable<any>; 
 
// создаем поток currentPage$ 
  private currentPage$: Subject<any> = new Subject(); 
 
  constructor(private $inject: $inject) { 
  // тут ижектим стор из первого ангуляра 
    this.ticketStore = this.$inject.get('TicketStore'); 
 
// эта штука превращает стор в поток из rxjs5 
    this.ticketStore$ = rxAdapter(this.ticketStore); 
 
// получаем из стора количество элементов на странице 
    this.itemsPerPage$ = this.ticketStore$.pipe( 
      pluck('itemsPerPage'), 
      distinctUntilChanged() 
    ); 
 
// тут получаем из стора массив тикетов и пилим его на массив массивов, в каждом вложенном 
// массиве ровно столько элементов, сколько должно быть на странице 
    this.tickets$ = rxAdapter(this.ticketStore.tickets$).pipe( 
      combineLatest( 
        this.itemsPerPage$, 
        (tickets, pages) => splitEvery(pages, tickets) 
      )); 
 
// тут мы апдейтим созданный ранее поток currentPage$, и если в потоке showPaginations$ 
// содержится true, то стразу показываем первую страницу 
// механизм такой - получаем поток currentPage$, объединяем его с потоком в котором массив 
// масивов, берем первые несколько элементов из него (если currentPage$ = 1, то один, если  
// currentPage$ = 4, то 4 эелемента) и из них выбираем последний и все это прокидывается 
// в вьюху 
    this.ticketsPart$ = this.currentPage$.pipe( 
      startWith(1), 
      combineLatest(this.tickets$, compose(last, take)), 
      filter(compose(not, isNil)) 
    ); 
 
// отвечает за показ пагинации, возврщает true/false 
    this.showPagination$ = this.ticketStore$.pipe( 
      pluck('showPagination'), 
      distinctUntilChanged() 
    ); 
     
// отвечает за количество кнопок в пагинации 
    this.count$ = rxAdapter(this.ticketStore.tickets$).pipe(map(length)); 
  } 
 
// тут мы просто ожидаем подгрузки тикетов до отрисовки 
  ngOnInit(): void { 
    this.ticketStore.load(); 
  } 
 
// собственно вот тут мы перезаписываем страницу в currentPage$, после чего снова запускается 
// ticketsPart$ с уже новыми параметрами 
  changePage(val): void { 
    this.currentPage$.next(val); 
  } 
}

<table *ngFor="let ticket of ticketsPart$ | async"> 
  <tr [ngClass]="[ticket.css_status_class]"> 
    <td [innerHTML]="[ticket.id]"></td> 
    <td> 
      <a [routerLink]="['${I18n.locale}/tickets', ticket.id]"> 
            {{ ticket.title }} 
           </a> 
    </td> 
    <td [innerHTML]="ticket.updated_at"></td> 
  </tr> 
</table> 
 
<nav *ngIf="showPagination$ | async"> 
  <ngb-pagination  
  [(page)]="currentPage",  
  [collectionSize]="count$ | async",  
  [pageSize]="itemsPerPage$ | async",  
  [directionLinks]="true",  
  (pageChange)="changePage($event)"> 
  </ngb-pagination> 
</nav>