DataScroller - Loader Instead of scrolling, click event of an element can be used to load data.
Click Load Button at Footer to Load More
Vin:
{{selectedCar.vin}}
Year:
{{selectedCar.year}}
Brand:
{{selectedCar.brand}}
Color:
{{selectedCar.color}}

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 let-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>