export class DataScrollerInfiniteDemo {
cars: Car[];
msgs: Message[] = [];
constructor(private carService: CarService) { }
loadData(event) {
//initialize
if(!this.cars) {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
//in real application, newArray should be loaded from a remote datasource
else {
let newArray = this.cars.slice(0);
for(let i = 0; i < newArray.length; i++) {
this.cars.push(newArray[i]);
}
this.msgs = [];
this.msgs.push({severity:'info', summary:'Data Loaded', detail:'Between ' + event.first + ' and ' + (event.first + event.rows)});
}
}
}
<p-growl [value]="msgs"></p-growl>
<p-dataScroller [value]="cars" [paginator]="true" [rows]="10" (onLazyLoad)="loadData($event)" [lazy]="true">
<header>
Scroll Down to to Load More
</header>
<template #car>
<li style="border-bottom:1px solid #D5D5D5;">
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center"><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-2">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
</p-dataScroller>