Angular

Angular — Standalone, Signals, Zoneless (Angular 20/21+)

Build Angular the way it ships in 2026: standalone components, signals as the reactivity model, zoneless change detection, built-in control flow, and inject() DI. Treat NgModules, *ngFor, and @Input() decorators as legacy you only touch to migrate.

Not this skill

AngularJS (1.x) is out of scope entirely — this skill is Angular 2+ only and the APIs do not map. Route elsewhere for React → ../react/SKILL.md; Next.js App Router → ../nextjs/SKILL.md; Vue/Nuxt, Svelte, SolidJS, Astro → ../vue-nuxt/SKILL.md, ../svelte/SKILL.md, ../solid-js/SKILL.md, ../astro/SKILL.md; a pure TypeScript language question (generics, narrowing, tsconfig) with no Angular dimension → ../typescript/SKILL.md; a standalone NestJS API → ../nestjs/SKILL.md; a generic Node service → ../nodejs/SKILL.md; cross-framework Playwright e2e strategy → ../testing-web/SKILL.md / ../e2e-testing/SKILL.md. Angular Universal SSR and Angular's own ng test (Vitest) setup stay here.

Decide first

The modern baseline

No NgModules. Bootstrap a standalone root component and configure providers in app.config.ts.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig);

// app/app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(), // no Zone.js; CD driven by signals + events
    provideRouter(routes),
    provideHttpClient(withFetch()),
  ],
};

• Rule: one bootstrapApplication call, providers in app.config.ts. Why: NgModule bootstrap (platformBrowserDynamic().bootstrapModule(AppModule)) is the legacy path — more files, slower to reason about.
• Rule: components are standalone by default (the standalone flag is implied in v20+; do not write standalone: true in new code, and never write standalone: false). Why: standalone is the framework default now; the flag is noise.

Bad → Good

// Bad — NgModule wiring for a single component
@NgModule({ declarations: [UserCard], imports: [CommonModule], exports: [UserCard] })
export class UserCardModule {}

// Good — standalone component imports only what it uses
@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: `<p>{{ joined() | date }}</p>`,
})
export class UserCard {
  joined = input.required<Date>();
}

Signals as the reactivity model

signal() holds state, computed() derives it, effect() runs side effects, linkedSignal() resets writable state when a source changes.

import { signal, computed, effect, linkedSignal } from '@angular/core';

const qty = signal(1);
const price = signal(9.99);
const total = computed(() => qty() * price());        // derived — recomputes lazily
const draftQty = linkedSignal(() => qty());            // writable, resets when qty changes

effect(() => console.log('total changed:', total())); // side effect ONLY (logging, DOM, sync)

• Rule: derive with computed(), never with effect(). Why: an effect() that writes a signal to "compute" a value creates a hidden dependency graph that loops or fires extra times — computed() is pull-based and memoized.
• Rule: effect() is for side effects (logging, localStorage, imperative DOM, 3rd-party libs), not for keeping two signals in sync. Why: synced state belongs in computed() or linkedSignal().

Component I/O is signal-based: input(), input.required(), output(), model() for two-way.

Bad → Good

// Bad — decorator I/O, mutable, no type-safety on required
@Input() userId!: string;
@Output() saved = new EventEmitter<User>();

// Good — signal inputs/outputs
userId = input.required<string>();          // read as userId()
saved = output<User>();                     // emit with saved.emit(user)
name = model('');                           // two-way: [(name)]="..."

Templates: built-in control flow

Use @if / @for / @switch / @defer. The legacy *ngIf / *ngFor / *ngSwitch structural directives are deprecated.

@if (user(); as u) {
  <h1>{{ u.name }}</h1>
} @else {
  <app-spinner />
}

@for (item of items(); track item.id) {
  <li>{{ item.label }}</li>
} @empty {
  <li>No items</li>
}

@defer (on viewport) {
  <app-heavy-chart [data]="rows()" />
} @placeholder {
  <div class="skeleton"></div>
}

• Rule: every @for must declare track. Why: it is required syntax (the template won't compile without it) and it controls DOM reuse — track item.id over track $index when items have stable identity, or the DOM thrashes on reorder.
• Rule: reach for @defer to lazy-load heavy sub-trees and enable incremental hydration. Why: it ships less JS up front without manual loadComponent plumbing.

Bad → Good

<!-- Bad — legacy structural directive, no tracking -->
<li *ngFor="let item of items">{{ item.label }}</li>

<!-- Good — built-in control flow with track -->
@for (item of items(); track item.id) { <li>{{ item.label }}</li> }

Data fetching

Default to signal-based resources; reach for HttpClient + RxJS only when you need streams, cancellation, or operator composition.

import { httpResource } from '@angular/common/http';
import { resource } from '@angular/core';

// httpResource — declarative GET wired to HttpClient; reactive to its URL signal
users = httpResource<User[]>(() => `/api/users?team=${this.team()}`);
// template: @if (users.isLoading()) {…} @else { @for (u of users.value(); track u.id) {…} }
// users.error()  -> error signal;  users.reload() -> refetch

// resource — any async loader (not just HTTP)
profile = resource({
  params: () => ({ id: this.userId() }),
  loader: ({ params }) => fetchProfile(params.id),
});

• Rule: httpResource()/resource() give you value(), isLoading(), error(), reload() for free — prefer them over a manual subscribe that you have to clean up. Why: less boilerplate, no leak, refetches automatically when its source signals change.
• Rule: when you genuinely need a stream (websocket, debounced search, retry/switchMap), keep HttpClient + RxJS and bridge to a signal with toSignal(). Why: signals are not streams; do not fake backpressure with effects. references/signals-rxjs.md has the signals-vs-RxJS decision matrix, toSignal/toObservable interop recipes, effect pitfalls (infinite loops, untracked reads), and takeUntilDestroyed.