DataScroller - Infinite DataScroller supports lazy loading via virtual scrolling so that each scroll event fetches new chunk of data from a remote datasource. This example generates the new records on-the-fly and scrolling is infinite.
Scroll to the bottom of this page to see the demo.
View on GitHub

export class DataScrollerInfiniteDemo {

    cars: Car[];

    constructor(private carService: CarService, private messageService: MessageService) { }

    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.messageService.add({severity:'info', summary:'Data Loaded', detail:'Between ' + event.first + ' and ' + (event.first + event.rows)});
        }
    }
}

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>

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

Scroll Down to to Load More
Vin:
{{car.vin}}
Year:
{{car.year}}
Brand:
{{car.brand}}
Color:
{{car.color}}