import { Component } from '@angular/core' ; import 'chance' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { /** Store the current loading state */ isLoading : boolean = false ; /** Store the list of employees */ employees : ReadonlyArray < Employee > = [ ] ; /** Store the current page */ private _page : number = 0 ; constructor ( ) { this . load ( ) ; } load ( page = 0 ) { this . isLoading = true ; const employees = [ ] ; for ( let idx = 1 ; idx <= 5000 ; idx ++ ) { employees . push ( { id : idx + ( 5000 * page ) , name : chance . name ( ) , email : chance . email ( ) , department : chance . pickone ( [ 'Finance' , 'Operations' , 'Investor Relations' , 'Technical' , 'Auditing' , 'Labs' ] ) } ) ; } setTimeout ( ( ) => { this . employees = [ ... this . employees , ... employees ] ; this . isLoading = false ; } , 1000 ) ; } loadNextPage ( ) { this . load ( ++ this . _page ) ; } } export interface Employee { id : number ; name : string ; email : string ; department : string ; }