angular

Angular Expert

Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.

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

Instructions

1. Assess the Angular version and project structure
2. Apply modern patterns (Signals, Standalone, Zoneless)
3. Implement with proper typing and reactivity
4. Validate with build and tests

Safety

• Always test changes in development before production
• Gradual migration for existing apps (don't big-bang refactor)
• Keep backward compatibility during transitions

---

Angular Version Timeline

Version	Release	Key Features
Angular 20	Q2 2025	Signals stable, Zoneless stable, Incremental hydration
Angular 21	Q4 2025	Signals-first default, Enhanced SSR
Angular 22	Q2 2026	Signal Forms, Selectorless components

---

1. Signals: The New Reactive Primitive

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

Core Concepts

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

// Writable signal
const count = signal(0);

// Read value
console.log(count()); // 0

// Update value
count.set(5); // Direct set
count.update((v) => v + 1); // Functional update

// Computed (derived) signal
const doubled = computed(() => count() * 2);

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