angular - Why does PrimeNG VirtualScroller loadingItem not working?

Question

I have PrimeNG 11.0.0-rc.2 working with Angular 11. Im using the VirtualScroller Component but I realize that the loadingItem ng-template which is supposed to show a loader statement is not working, not even in their example, they have this:

<p-virtualScroller [value]="virtualCars" scrollHeight="500px" [itemSize]="150" [rows]="100"
    [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
    <ng-template let-car pTemplate="item">
        Car content
    </ng-template>
    <ng-template let-car pTemplate="loadingItem">
        Loading...
    </ng-template>
</p-virtualScroller>

And in the Component Class they have this:

export class LazyVirtualScrollerDemo implements OnInit {

    virtualCars: Car[];
   
    ngOnInit() {
        this.cars = Array.from({length: 10000}).map(() => this.carService.generateCar());
        this.virtualCars =  Array.from({length: 10000});
    }

    loadCarsLazy(event: LazyLoadEvent) {       
        //simulate remote connection with a timeout 
        setTimeout(() => {
            //load data of required page
            let loadedCars = this.cars.slice(event.first, (event.first + event.rows));

            //populate page of virtual cars
            Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]);
            
            //trigger change detection
            this.virtualCars = [...this.virtualCars];
        }, 1000);
    }

}

But the Loading... statement inside the ng-template is not showing up. Just a blank portion as if there is nothing in there, then data arrives as normal, but the ghost effect while loading never shows.

question from:https://stackoverflow.com/questions/66054164/why-does-primeng-virtualscroller-loadingitem-not-working

Answer 1

Waitting for answers