typescript 48 lines · 8 steps

Deferred loading with @defer in Angular

A standalone Angular component lazy-loads its recommendations panel on viewport with placeholder, loading, and error states.

Explained by highlit

Angular Intermediate lazy-loading signals standalone-components deferrable-views ux-states

1import { Component, signal } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { ProductRecommendationsComponent } from './product-recommendations.component';
4 
5@Component({
selector: 'app-product-detail',
standalone: true,
imports: [CommonModule, ProductRecommendationsComponent],
template: `
  <section class="product-detail">
    <h1>{{ product().name }}</h1>
    <p class="price">{{ product().price | currency }}</p>
13 
    @defer (on viewport; prefetch on idle) {
      <app-product-recommendations [productId]="product().id" />
    } @placeholder (minimum 500ms) {
      <div class="recommendations-skeleton" aria-hidden="true">
        @for (row of skeletonRows; track $index) {
          <div class="skeleton-card"></div>
        }
      </div>
    } @loading (after 100ms; minimum 300ms) {
      <div class="recommendations-loading">
        <span class="spinner"></span>
        <span>Finding products you'll love…</span>
      </div>
    } @error {
      <div class="recommendations-error" role="alert">
        <p>We couldn't load recommendations right now.</p>
        <button type="button" (click)="reload()">Try again</button>
      </div>
    }
  </section>
`,
35})
36export class ProductDetailComponent {
protected readonly skeletonRows = Array.from({ length: 4 });
38 
protected readonly product = signal({
  id: 'sku-4820',
  name: 'Merino Wool Runner',
  price: 118,
});
44 
protected reload(): void {
  window.location.reload();
}
48}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1@defer with an `on viewport` trigger delays loading a component's code until it's actually needed on screen.
2The @placeholder, @loading, and @error blocks let you script every phase of a deferred view's lifecycle.
3Timing modifiers like `minimum` and `after` prevent flicker by controlling how long each state stays visible.

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';