typescript 71 lines · 9 steps

Building a content-projected wizard in Angular

A wizard component discovers its steps through content projection and renders one step's template at a time.

Explained by highlit

Angular Advanced content-projection templateref querylist dynamic-templates component-composition

1import {
Component,
ContentChildren,
QueryList,
AfterContentInit,
Input,
TemplateRef,
Directive,
9} from '@angular/core';
10 
11@Directive({ selector: '[wizardStepContent]', standalone: true })
12export class WizardStepContentDirective {
constructor(public readonly template: TemplateRef<unknown>) {}
14}
15 
16@Component({
selector: 'wizard-step',
standalone: true,
template: '',
20})
21export class WizardStepComponent {
@Input({ required: true }) label!: string;
@Input() optional = false;
@ContentChildren(WizardStepContentDirective) content!: QueryList<WizardStepContentDirective>;
25}
26 
27@Component({
selector: 'wizard',
standalone: true,
imports: [WizardStepContentDirective],
template: `
  <nav class="wizard-nav">
    @for (step of steps; track step.label; let i = $index) {
      <button
        type="button"
        class="wizard-tab"
        [class.active]="i === activeIndex"
        [disabled]="i > activeIndex"
        (click)="activeIndex = i"
      >
        {{ i + 1 }}. {{ step.label }}
        @if (step.optional) { <em>(optional)</em> }
      </button>
    }
  </nav>
46 
  <section class="wizard-body">
    @if (active(); as current) {
      <ng-container *ngTemplateOutlet="current.content.first!.template"></ng-container>
    }
  </section>
`,
53})
54export class WizardComponent implements AfterContentInit {
@ContentChildren(WizardStepComponent) private stepList!: QueryList<WizardStepComponent>;
56 
steps: WizardStepComponent[] = [];
activeIndex = 0;
59 
ngAfterContentInit(): void {
  this.steps = this.stepList.toArray();
  this.stepList.changes.subscribe(() => {
    this.steps = this.stepList.toArray();
    this.activeIndex = Math.min(this.activeIndex, this.steps.length - 1);
  });
}
67 
active(): WizardStepComponent | undefined {
  return this.steps[this.activeIndex];
}
71}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1ContentChildren lets a parent component discover projected children declaratively without the caller wiring them up.
2Wrapping content in a structural directive captures a TemplateRef you can render lazily with ngTemplateOutlet.
3Subscribing to QueryList.changes keeps derived state correct when projected children are added or removed at runtime.

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