Recently, I encountered a challenge while using the @for loop to iterate through my dataset and repeat the same structure of elements. Due to the increasing size of the dataset, I decided to integrate the VirtualScroller component provided by PrimeNG.
To my surprise, the VirtualScroller component failed to render properly and displayed a blank screen. After carefully inspecting my code line by line, I discovered that the issue arose when using the @if syntax within the template section. Interestingly, there were no error messages to indicate what went wrong.
In an attempt to seek assistance from the community, I have replicated the problem on stackblitz. It appears that the problem lies within the virtualscroller component of PrimeNG. I am reaching out to inquire whether it's acceptable to utilize such syntax within a template or if I am implementing it incorrectly.
I would greatly appreciate any insights or suggestions!
Below is a snippet of the code:
<div class="card flex justify-center">
<p-virtualscroller
[items]="items"
[itemSize]="50"
scrollHeight="200px"
styleClass="border border-surface"
[style]="{ width: '200px', height: '200px' }"
>
<ng-template pTemplate="item" let-item let-options="options">
<div
class="flex items-center p-2"
[ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
style="height: 50px"
>
@if(truthy) { {{ item }} }
</div>
</ng-template>
</p-virtualscroller>
</div>
@Component({
selector: 'panel-basic-demo',
templateUrl: './panel-basic-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class PanelBasicDemo {
selectedPreset: string = 'aura';
items!: string[];
truthy: boolean = true
constructor(private config: PrimeNGConfig) {
this.config.theme.set({ preset: Aura });
this.items = Array.from({ length: 1000 }).map((_, i) => `Item #${i}`);
}
}