3 maneiras de renderizar grandes listas em Angular

• Rolagem virtual (usando Angular CDK).
• Renderização manual.
• Renderização progressiva.

Rolagem virtual

npm i @angular/cdk

import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
 ...
 imports: [ ScrollingModule, ...]
})
export class AppModule {}

<cdk-virtual-scroll-viewport itemSize="50">
 <div *cdkVirtualFor="let item of items">
   {{ item }}
 </div>
</cdk-virtual-scroll-viewport>

• , , . , . , Autocomplete ( ). , , , , . — .
• — , .
• Existem alguns problemas de acessibilidade e facilidade de uso do conteúdo de uma lista com rolagem virtual. Os elementos ocultos não são renderizados - isso significa que eles não estarão disponíveis para os leitores de tela e que não poderão ser encontrados na página usando mecanismos padrão do navegador.

• Nesse caso, se você deseja exibir listas cujo tamanho não é conhecido antecipadamente ou aquelas que podem ser enormes (de acordo com uma estimativa aproximada, listas que incluem mais de 5 mil elementos, mas isso depende muito da complexidade de cada elemento).
• Caso você precise organizar a rolagem sem fim.

Renderização manual

<tr 
*ngFor="let item of data; trackBy: trackById; let isEven = even; let isOdd = odd"
    class="h-12"
    [class.bg-gray-400]="isEven"
    [class.bg-gray-500]="isOdd"
>
  <td>
    <span class="py-2 px-4">{{ item.id }}</span>
  </td>

  <td>
    <span>{{ item.label }}</span>
  </td>

  <td>
    <a>
      <button class="py-2 px-4 rounded (click)="remove(item)">x</button>
    </a>
  </td>
</tr>

<tbody>
  <ng-container #itemsContainer></ng-container>
</tbody>
<ng-template #item let-item="item" let-isEven="isEven">
  <tr class="h-12 "
      [class.bg-gray-400]="isEven"
      [class.bg-gray-500]="!isEven"
  >
    <td>
      <span class="py-2 px-4">{{ item.id }}</span>
    </td>

    <td>
      <span>{{ item.label }}</span>
    </td>

    <td>
      <a>
        <button class="py-2 px-4 rounded" (click)="remove(item)">x</button>
      </a>
    </td>
  </tr>
</ng-template>

@ViewChild('itemsContainer', { read: ViewContainerRef }) container: ViewContainerRef;
@ViewChild('item', { read: TemplateRef }) template: TemplateRef<any>;

private buildData(length: number) {
  const start = this.data.length;
  const end = start + length;

  for (let n = start; n <= end; n++) {
    this.container.createEmbeddedView(this.template, {
      item: {
        id: n,
        label: Math.random()
      },
      isEven: n % 2 === 0
    });
  }
}

Renderização progressiva

• Primeiro, usando isso setInterval, estabelecemos uma chamada regular a cada 10 ms para a função que renderiza 500 elementos quando chamada.
• Depois de deduzidos todos os elementos, que determinamos com base na análise do índice do elemento atual, paramos a chamada de função regular e interrompemos o ciclo.

private buildData(length: number) {
  const ITEMS_RENDERED_AT_ONCE = 500;
  const INTERVAL_IN_MS = 10;

  let currentIndex = 0;

  const interval = setInterval(() => {
    const nextIndex = currentIndex + ITEMS_RENDERED_AT_ONCE;

    for (let n = currentIndex; n <= nextIndex ; n++) {
      if (n >= length) {
        clearInterval(interval);
        break;
      }
      const context = {
        item: {
          id: n,
          label: Math.random()
        },
        isEven: n % 2 === 0
      };
      this.container.createEmbeddedView(this.template, context);
    }

    currentIndex += ITEMS_RENDERED_AT_ONCE;
  }, INTERVAL_IN_MS);

Sumário