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) {
        if(! {
            this.carService.getCarsSmall().then(cars => = cars);
        //in real application, newArray should be loaded from a remote datasource
        else {
            let newArray =;
            for(let i = 0; i < newArray.length; 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">
        Scroll Down to to Load More
    <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 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">{{}}</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>

Scroll Down to to Load More