pagination.ts

import {Component, OnInit} from '@angular/core';
import {PaymentService} from '../payment.service';
import {Payment} from '../payment';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

import {Subject} from 'rxjs/Subject';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  public payments: Payment[] = [];
  private paginateSubject = new Subject<number>();
  public page = 1;

  constructor(private paymentService: PaymentService) {
  }

  ngOnInit() {
    this.paginateSubject
      .debounceTime(100)
      .distinctUntilChanged()
      .switchMap(page => this.paymentService.getPayments(page))
      .subscribe(payments => this.payments = payments);

    this.switchPage();
  }

  switchPage(): void {
    this.paginateSubject.next(this.page);
  }
}