export class DataScrollerLoaderDemo implements OnInit {

    cars: Car[];
    
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = cars);
    }

}

<p-dataScroller [value]="cars" [rows]="5" [loader]="loadButton">
    <p-header>
        Click Load Button at Footer to Load More
    </p-header>
    <ng-template let-car pTemplate="item">
        <div class="ui-g car-item">
            <div class="ui-g-12 ui-md-3">
                <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
            </div>
            <div class="ui-g-12 ui-md-9">
                <div class="ui-g">
                    <div class="ui-g-2 ui-sm-6">Vin: </div>
                    <div class="ui-g-10 ui-sm-6">{{car.vin}}</div>

                    <div class="ui-g-2 ui-sm-6">Year: </div>
                    <div class="ui-g-10 ui-sm-6">{{car.year}}</div>

                    <div class="ui-g-2 ui-sm-6">Brand: </div>
                    <div class="ui-g-10 ui-sm-6">{{car.brand}}</div>

                    <div class="ui-g-2 ui-sm-6">Color: </div>
                    <div class="ui-g-10 ui-sm-6">{{car.color}}</div>
                </div>
            </div>
        </div>
    </ng-template>
    <p-footer>
        <button #loadButton type="text" icon="fa-refresh" pButton label="Load"></button>
    </p-footer>
</p-dataScroller>