export class DataScrollerLoaderDemo implements OnInit {
cars: Car[];
selectedCar: Car;
displayDialog: boolean;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars = cars);
}
selectCar(car: Car) {
this.selectedCar = car;
this.displayDialog = true;
}
onDialogHide() {
this.selectedCar = null;
}
}
<p-dataScroller [value]="cars" [paginator]="true" [rows]="5" [loader]="loadButton">
<header>
Click Load Button at Footer 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"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><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>
<footer>
<button #loadButton type="text" icon="fa-refresh" pButton label="Load"></button>
</footer>
</p-dataScroller>
<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" width="225" (onAfterHide)="onDialogHide()">
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="selectedCar" style="font-size:16px;text-align:center;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-12" style="text-align:center"><img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif"></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Vin: </div>
<div class="ui-grid-col-8">{{selectedCar.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Year: </div>
<div class="ui-grid-col-8">{{selectedCar.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Brand: </div>
<div class="ui-grid-col-8">{{selectedCar.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Color: </div>
<div class="ui-grid-col-8">{{selectedCar.color}}</div>
</div>
</div>
</p-dialog>