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" [rows]="10" (onLazyLoad)="loadData($event)" [lazy]="true">
    <p-header>
        Scroll Down to 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-dataScroller>