Curly pagination angular

Question

I am trying to get pagination on my page.

Website URL: https://pettemm.imtqy.com/angular/home

Link to code: https://github.com/pettemm/angular

This is the Service that captures my objects:

import { Injectable } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'; import { Observable } from 'rxjs/Observable'; import { Item } from '../models/item'; @Injectable() export class ItemService { itemsCollection: AngularFirestoreCollection<Item>; items: Observable<Item[]>; itemDoc: AngularFirestoreDocument<Item>; constructor(public afs: AngularFirestore) { this.itemsCollection = this.afs.collection('items', ref => ref.orderBy('title','desc')); this.items = this.itemsCollection.snapshotChanges().map(changes => { return changes.map(a =>{ const data = a.payload.doc.data() as Item; data.id = a.payload.doc.id; return data; }); }); } getItems(){ return this.items; } 

This is my component:

  import { Component, OnInit } from '@angular/core'; import { ItemService } from '../../services/item.service'; import { Item } from '../../models/item'; @Component({ selector: 'app-items', templateUrl: './items.component.html', styleUrls: ['./items.component.css'] }) export class ItemsComponent implements OnInit { items: Item[]; editState: boolean = false; itemToEdit: Item; constructor(private itemService: ItemService) { } ngOnInit() { this.itemService.getItems().subscribe(items => { this.items = items; }); } 

On the first page of Home, I use firebase, and I want to paginate, so I only have 2 objects, and then you can click next to show the other two. I know about startAt and endAt, but cannot figure out how to use this.

On the other hand, mats and workouts I use firestore. When I switch between the house and the rug and return home again, the elements will not be updated, why?