angular

Iron Law

READ angular-spa skill for TailwindCSS 4.x, daisyUI 5.5.5, and workspace conventions BEFORE implementing. This skill is API reference only — no design token or styling patterns here.

When to Use This Skill

• Building new Angular applications (v20+)
• Implementing Signals-based reactive patterns
• Creating Standalone Components and migrating from NgModules
• Configuring Zoneless Angular applications
• Implementing SSR, prerendering, and hydration
• Optimizing Angular performance
• Adopting modern Angular patterns and best practices

Do Not Use This Skill When

• Migrating from AngularJS (1.x) — use angular-migration skill
• Working with legacy Angular apps that cannot upgrade
• General TypeScript issues — use typescript-expert skill

---

Version context: Angular 20 (Signals/Zoneless stable), Angular 21 (Signals-first default, Signal Forms available — current), Angular 22 (Signal Forms further enhancements).

---

Angular 21 Zoneless Note

Angular 21 is zoneless by default. Do NOT add provideZonelessChangeDetection() — it is implicit and adding it causes warnings.

• Angular 20: provideZonelessChangeDetection() required explicitly
• Angular 21+: Zoneless is the default. No provider needed. No zone.js import.

This workspace uses Angular 21+. The patterns below show v20-style explicit providers for reference — in Angular 21 omit those providers.

---

1. Signals: The New Reactive Primitive

Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.

Core signal / computed / effect

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

const count = signal(0);
count.set(5);
count.update((v) => v + 1);

const doubled = computed(() => count() * 2);

effect(() => {
  console.log(`Count changed to: ${count()}`);
});

Signal inputs, outputs, and model

import { Component, input, output, model } from "@angular/core";

@Component({
  selector: "app-user-card",
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ name() }}</h3>
      <span>{{ role() }}</span>
      <button (click)="select.emit(id())">Select</button>
    </div>
  `,
})
export class UserCardComponent {
  id = input.required<string>();
  name = input.required<string>();
  role = input<string>("User");
  select = output<string>();
  isSelected = model(false);
}
// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />