DataScroller - Infinite DataScroller supports lazy loading 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.

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

Scroll Down to to Load More