typescript 58 lines · 10 steps

Building a signup stepper in Angular

A standalone Angular component pairs signals with a nested reactive form to drive a multi-step signup wizard.

Explained by highlit

Angular Intermediate signals reactive-forms form-validation state-management wizard

1import { Component, computed, inject, signal } from '@angular/core';
2import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
3import { CommonModule } from '@angular/common';
4 
5@Component({
selector: 'app-signup-stepper',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './signup-stepper.component.html',
10})
11export class SignupStepperComponent {
private fb = inject(FormBuilder);
13 
readonly steps = ['account', 'profile', 'billing'] as const;
readonly currentStep = signal(0);
16 
readonly form = this.fb.group({
  account: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  }),
  profile: this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
  }),
  billing: this.fb.group({
    cardNumber: ['', [Validators.required, Validators.pattern(/^\d{16}$/)]],
    cvc: ['', [Validators.required, Validators.pattern(/^\d{3}$/)]],
  }),
});
31 
readonly isLastStep = computed(() => this.currentStep() === this.steps.length - 1);
33 
private activeGroup() {
  return this.form.get(this.steps[this.currentStep()])!;
}
37 
next(): void {
  const group = this.activeGroup();
  if (group.invalid) {
    group.markAllAsTouched();
    return;
  }
  if (!this.isLastStep()) {
    this.currentStep.update((i) => i + 1);
  }
}
48 
back(): void {
  this.currentStep.update((i) => Math.max(0, i - 1));
}
52 
submit(): void {
  if (this.form.valid) {
    this.form.disable();
  }
}
58}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Nesting form groups by step lets you validate one section at a time while keeping a single source of truth.
2Angular signals model wizard state declaratively, so derived facts like the last step recompute automatically.
3Gating step advancement on per-group validity gives users focused feedback instead of a wall of errors.

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