Lazy listbox with images?

[IanTheG]

I'm testing out a Pokemon web app to learn Angular 13 and PrimeNG. Each Pokemon item is loaded with a small sprite and its name, there are over 1000 in this list! The [filter]="true" option is great for this component.

Is it possible to lazy load listbox items? If not, is there another component that can accomplish the same task?

Code: Select all

<p-listbox
      [options]="list"
      [(ngModel)]="selectedPokemon"
      [multiple]="false"
      [filter]="true"
      optionLabel="name"
      [listStyle]="{ 'max-height': '200px' }"
    >
      <ng-template let-pokemon pTemplate="item">
        <div class="pokemon-item" (click)="getDetails(pokemon)">
          <img [src]="'assets/sprites/' + pokemon.sprite" />
          <p>{{ pokemon.name | titlecase }}</p>
        </div>
      </ng-template>
    </p-listbox>