typescript 45 lines · 6 steps

Virtual scrolling a contact list in Angular

An OnPush standalone component renders thousands of contacts efficiently by combining the CDK virtual scroll viewport with a signal.

Explained by highlit

Angular Intermediate virtual-scrolling signals change-detection standalone-components trackby

1import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { ScrollingModule } from '@angular/cdk/scrolling';
4import { toObservable } from '@angular/core/rxjs-interop';
5import { ContactService, Contact } from './contact.service';
6 
7@Component({
selector: 'app-contact-list',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, ScrollingModule],
styles: [`
  .viewport { height: 480px; width: 320px; }
  .row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid var(--divider);
  }
  .avatar { width: 32px; height: 32px; border-radius: 50%; }
  .name { font-weight: 500; }
  .email { color: var(--muted); font-size: 0.85rem; }
`],
template: `
  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="280" maxBufferPx="560" class="viewport">
    <div *cdkVirtualFor="let contact of contacts(); trackBy: trackById" class="row">
      <img class="avatar" [src]="contact.avatarUrl" [alt]="contact.name" loading="lazy" />
      <div>
        <div class="name">{{ contact.name }}</div>
        <div class="email">{{ contact.email }}</div>
      </div>
    </div>
  </cdk-virtual-scroll-viewport>
`,
37})
38export class ContactListComponent {
private readonly contactService = inject(ContactService);
readonly contacts = signal<Contact[]>(this.contactService.getAll());
41 
trackById(_index: number, contact: Contact): string {
  return contact.id;
}
45}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1CDK virtual scrolling renders only the visible window, so list size stops dictating DOM cost.
2A signal reads cleanly under OnPush change detection, making template updates explicit and cheap.
3A trackBy keyed on stable identity is what lets recycled rows update without full re-creation.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';