AngularJS 2.x/4.x component for firebase pagination

pagination.component.ts

import { Component, Input, Output, EventEmitter, AfterViewInit } from "@angular/core";
import { Pagination } from "./pagination";

@Component({
    selector: "fb-pagination",
    template:`
        <button [disabled]="!hasRecords" (click)="fetchMore()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            More
        </button>
    `
})
export class FbPaginationComponent implements AfterViewInit {
    @Input("dataRef") dataRef: string;
    @Input("perPage") perPage: number = 10;
    @Input("order") order: string = 'asc';

    @Output() currentSet = new EventEmitter();

    private _cursor: string = "";
    private _pageRecordCount: number = 0;
    private _pagination: Pagination;
    public hasRecords: boolean = true;

    constructor(){}

    public fetchMore(){
        this._fetchRecords();
    }

    private _fetchRecords(){
        this._pagination.fetchRecords();
    }

    ngAfterViewInit(){
        this._pagination = new Pagination(this.dataRef, this.perPage, this.order);
        this._pagination.records$.subscribe((data) => {
            if(data){
                this.currentSet.emit(data);
            }
        });
        this.hasRecords = this._pagination.hasRecords;
        this._fetchRecords();
    }
}

pagination.ts

import * as firebase from "firebase";
import { Subject } from "rxjs";

export class Pagination {
    public dataRef: string;
    public perPage: number;
    public order: string;
    public hasRecords: boolean = true;
    public records$: Subject<any> = new Subject();

    private _pageRecordCount: number = 0;
    private _cursor: string = "";

    constructor(dataRef: string, perPage?: number, order?: string){
        this.dataRef = dataRef;
        this.perPage = perPage || 10;
        this.order = order || 'dsc';
    }

    private _handleData(data: any){
        let currentRecords = [];
        this.hasRecords = false;
        this._pageRecordCount = 0;
        this._cursor = "";
        if(data){
            let entities = data;
            let entityKeys = Object.keys(entities);

            if(entityKeys.length > this.perPage){
                (this.order == 'asc') ? (this._cursor = entityKeys.pop()) : (this._cursor = entityKeys.shift());
                this.hasRecords = true;
            }
            
            for(let entity of entityKeys){
                this._pageRecordCount++;
                if(this._pageRecordCount <= this.perPage){
                    let tempData = entities[entity];
                    tempData["id"] = entity;
                    (this.order == 'asc') ? (currentRecords.push(tempData)) : (currentRecords.unshift(tempData));
                }
            }
            this.records$.next(currentRecords);
        }
    }

    public fetchRecords(){
        let databaseRef = firebase.database().ref(this.dataRef);
        let orderByRef = databaseRef.orderByKey();
        let filterRef;
        let cursorRef;

        if(this._cursor){
            cursorRef = (this.order == 'asc') ? orderByRef.startAt(this._cursor) : orderByRef.endAt(this._cursor);
        }else{
            cursorRef = orderByRef;
        }

        if(this.order == 'asc'){
            filterRef = cursorRef.limitToFirst(this.perPage + 1);
        }else {
            filterRef = cursorRef.limitToLast(this.perPage + 1);
        }

        filterRef.once("value", (data) => {
            this._handleData(data.val());
        });
        
    }
}