pagination.component.ts

import { Component, OnInit } from '@angular/core';
import {AfireService} from '../afire.service';
import {map} from 'rxjs/operators';
import * as _ from 'lodash';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {

  todos: Array<any> = [];
  batch: number = 4;
  last: any = Date.now();
  empty: boolean = false;
  loading: boolean = false;

  constructor(public aFireService: AfireService) {}

  ngOnInit() {
    this.fetchTodosPaginated();
  }

  onScroll () {
    this.loading = true;
    setTimeout(() => {
      this.fetchTodosPaginated();
      this.loading = false;
    }, 1500);
  }

  fetchTodosPaginated () {
    this.aFireService.paginate(this.batch, this.last).pipe(
      map(data => {
        if ( !data.length) {
          this.empty = true;
        }
        let last = _.last(data);
        if (last) {
          this.last = last.payload.doc.data().id;
          data.map(todoSnap => {
            this.todos.push(todoSnap.payload.doc.data());
          })
        }
      })
    ).subscribe();
  }
}