Instantly share code, notes, and snippets.

@uno-de-piera uno-de-piera/pagination.component.ts Secret
Last active May 26, 2018

Embed
What would you like to do?
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();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment