{"id":"ba612bb8-625b-4329-ae25-3f837137d179","shortId":"wn7HDq","kind":"skill","title":"angular","tagline":"Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.","description":"# Angular Expert\n\nMaster modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.\n\n## When to Use This Skill\n\n- Building new Angular applications (v20+)\n- Implementing Signals-based reactive patterns\n- Creating Standalone Components and migrating from NgModules\n- Configuring Zoneless Angular applications\n- Implementing SSR, prerendering, and hydration\n- Optimizing Angular performance\n- Adopting modern Angular patterns and best practices\n\n## Do Not Use This Skill When\n\n- Migrating from AngularJS (1.x) → use `angular-migration` skill\n- Working with legacy Angular apps that cannot upgrade\n- General TypeScript issues → use `typescript-expert` skill\n\n## Instructions\n\n1. Assess the Angular version and project structure\n2. Apply modern patterns (Signals, Standalone, Zoneless)\n3. Implement with proper typing and reactivity\n4. Validate with build and tests\n\n## Safety\n\n- Always test changes in development before production\n- Gradual migration for existing apps (don't big-bang refactor)\n- Keep backward compatibility during transitions\n\n---\n\n## Angular Version Timeline\n\n| Version | Release | Key Features |\n| -------------- | ------- | ------------------------------------------------------ |\n| **Angular 20** | Q2 2025 | Signals stable, Zoneless stable, Incremental hydration |\n| **Angular 21** | Q4 2025 | Signals-first default, Enhanced SSR |\n| **Angular 22** | Q2 2026 | Signal Forms, Selectorless components |\n\n---\n\n## 1. Signals: The New Reactive Primitive\n\nSignals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.\n\n### Core Concepts\n\n```typescript\nimport { signal, computed, effect } from \"@angular/core\";\n\n// Writable signal\nconst count = signal(0);\n\n// Read value\nconsole.log(count()); // 0\n\n// Update value\ncount.set(5); // Direct set\ncount.update((v) => v + 1); // Functional update\n\n// Computed (derived) signal\nconst doubled = computed(() => count() * 2);\n\n// Effect (side effects)\neffect(() => {\n console.log(`Count changed to: ${count()}`);\n});\n```\n\n### Signal-Based Inputs and Outputs\n\n```typescript\nimport { Component, input, output, model } from \"@angular/core\";\n\n@Component({\n selector: \"app-user-card\",\n standalone: true,\n template: `\n
\n
{{ name() }}
\n {{ role() }}\n \n
\n `,\n})\nexport class UserCardComponent {\n // Signal inputs (read-only)\n id = input.required();\n name = input.required();\n role = input(\"User\"); // With default\n\n // Output\n select = output();\n\n // Two-way binding (model)\n isSelected = model(false);\n}\n\n// Usage:\n// \n```\n\n### Signal Queries (ViewChild/ContentChild)\n\n```typescript\nimport {\n Component,\n viewChild,\n viewChildren,\n contentChild,\n} from \"@angular/core\";\n\n@Component({\n selector: \"app-container\",\n standalone: true,\n template: `\n \n \n `,\n})\nexport class ContainerComponent {\n // Signal-based queries\n searchInput = viewChild(\"searchInput\");\n items = viewChildren(ItemComponent);\n projectedContent = contentChild(HeaderDirective);\n\n focusSearch() {\n this.searchInput()?.nativeElement.focus();\n }\n}\n```\n\n### When to Use Signals vs RxJS\n\n| Use Case | Signals | RxJS |\n| ----------------------- | --------------- | -------------------------------- |\n| Local component state | ✅ Preferred | Overkill |\n| Derived/computed values | ✅ `computed()` | `combineLatest` works |\n| Side effects | ✅ `effect()` | `tap` operator |\n| HTTP requests | ❌ | ✅ HttpClient returns Observable |\n| Event streams | ❌ | ✅ `fromEvent`, operators |\n| Complex async flows | ❌ | ✅ `switchMap`, `mergeMap` |\n\n---\n\n## 2. Standalone Components\n\nStandalone components are self-contained and don't require NgModule declarations.\n\n### Creating Standalone Components\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { RouterLink } from \"@angular/router\";\n\n@Component({\n selector: \"app-header\",\n standalone: true,\n imports: [CommonModule, RouterLink], // Direct imports\n template: `\n \n Home\n About\n \n `,\n})\nexport class HeaderComponent {}\n```\n\n### Bootstrapping Without NgModule\n\n```typescript\n// main.ts\nimport { bootstrapApplication } from \"@angular/platform-browser\";\nimport { provideRouter } from \"@angular/router\";\nimport { provideHttpClient } from \"@angular/common/http\";\nimport { AppComponent } from \"./app/app.component\";\nimport { routes } from \"./app/app.routes\";\n\nbootstrapApplication(AppComponent, {\n providers: [provideRouter(routes), provideHttpClient()],\n});\n```\n\n### Lazy Loading Standalone Components\n\n```typescript\n// app.routes.ts\nimport { Routes } from \"@angular/router\";\n\nexport const routes: Routes = [\n {\n path: \"dashboard\",\n loadComponent: () =>\n import(\"./dashboard/dashboard.component\").then(\n (m) => m.DashboardComponent,\n ),\n },\n {\n path: \"admin\",\n loadChildren: () =>\n import(\"./admin/admin.routes\").then((m) => m.ADMIN_ROUTES),\n },\n];\n```\n\n---\n\n## 3. Zoneless Angular\n\nZoneless applications don't use zone.js, improving performance and debugging.\n\n### Enabling Zoneless Mode\n\n```typescript\n// main.ts\nimport { bootstrapApplication } from \"@angular/platform-browser\";\nimport { provideZonelessChangeDetection } from \"@angular/core\";\nimport { AppComponent } from \"./app/app.component\";\n\nbootstrapApplication(AppComponent, {\n providers: [provideZonelessChangeDetection()],\n});\n```\n\n### Zoneless Component Patterns\n\n```typescript\nimport { Component, signal, ChangeDetectionStrategy } from \"@angular/core\";\n\n@Component({\n selector: \"app-counter\",\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
Count: {{ count() }}
\n \n `,\n})\nexport class CounterComponent {\n count = signal(0);\n\n increment() {\n this.count.update((v) => v + 1);\n // No zone.js needed - Signal triggers change detection\n }\n}\n```\n\n### Key Zoneless Benefits\n\n- **Performance**: No zone.js patches on async APIs\n- **Debugging**: Clean stack traces without zone wrappers\n- **Bundle size**: Smaller without zone.js (~15KB savings)\n- **Interoperability**: Better with Web Components and micro-frontends\n\n---\n\n## 4. Server-Side Rendering & Hydration\n\n### SSR Setup with Angular CLI\n\n```bash\nng add @angular/ssr\n```\n\n### Hydration Configuration\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from \"@angular/core\";\nimport {\n provideClientHydration,\n withEventReplay,\n} from \"@angular/platform-browser\";\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideClientHydration(withEventReplay())],\n};\n```\n\n### Incremental Hydration (v20+)\n\n```typescript\nimport { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app-page\",\n standalone: true,\n template: `\n \n\n @defer (hydrate on viewport) {\n \n }\n\n @defer (hydrate on interaction) {\n \n }\n `,\n})\nexport class PageComponent {}\n```\n\n### Hydration Triggers\n\n| Trigger | When to Use |\n| ---------------- | --------------------------------------- |\n| `on idle` | Low-priority, hydrate when browser idle |\n| `on viewport` | Hydrate when element enters viewport |\n| `on interaction` | Hydrate on first user interaction |\n| `on hover` | Hydrate when user hovers |\n| `on timer(ms)` | Hydrate after specified delay |\n\n---\n\n## 5. Modern Routing Patterns\n\n### Functional Route Guards\n\n```typescript\n// auth.guard.ts\nimport { inject } from \"@angular/core\";\nimport { Router, CanActivateFn } from \"@angular/router\";\nimport { AuthService } from \"./auth.service\";\n\nexport const authGuard: CanActivateFn = (route, state) => {\n const auth = inject(AuthService);\n const router = inject(Router);\n\n if (auth.isAuthenticated()) {\n return true;\n }\n\n return router.createUrlTree([\"/login\"], {\n queryParams: { returnUrl: state.url },\n });\n};\n\n// Usage in routes\nexport const routes: Routes = [\n {\n path: \"dashboard\",\n loadComponent: () => import(\"./dashboard.component\"),\n canActivate: [authGuard],\n },\n];\n```\n\n### Route-Level Data Resolvers\n\n```typescript\nimport { inject } from '@angular/core';\nimport { ResolveFn } from '@angular/router';\nimport { UserService } from './user.service';\nimport { User } from './user.model';\n\nexport const userResolver: ResolveFn = (route) => {\n const userService = inject(UserService);\n return userService.getUser(route.paramMap.get('id')!);\n};\n\n// In routes\n{\n path: 'user/:id',\n loadComponent: () => import('./user.component'),\n resolve: { user: userResolver }\n}\n\n// In component\nexport class UserComponent {\n private route = inject(ActivatedRoute);\n user = toSignal(this.route.data.pipe(map(d => d['user'])));\n}\n```\n\n---\n\n## 6. Dependency Injection Patterns\n\n### Modern inject() Function\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { UserService } from './user.service';\n\n@Component({...})\nexport class UserComponent {\n // Modern inject() - no constructor needed\n private http = inject(HttpClient);\n private userService = inject(UserService);\n\n // Works in any injection context\n users = toSignal(this.userService.getUsers());\n}\n```\n\n### Injection Tokens for Configuration\n\n```typescript\nimport { InjectionToken, inject } from \"@angular/core\";\n\n// Define token\nexport const API_BASE_URL = new InjectionToken(\"API_BASE_URL\");\n\n// Provide in config\nbootstrapApplication(AppComponent, {\n providers: [{ provide: API_BASE_URL, useValue: \"https://api.example.com\" }],\n});\n\n// Inject in service\n@Injectable({ providedIn: \"root\" })\nexport class ApiService {\n private baseUrl = inject(API_BASE_URL);\n\n get(endpoint: string) {\n return this.http.get(`${this.baseUrl}/${endpoint}`);\n }\n}\n```\n\n---\n\n## 7. Component Composition & Reusability\n\n### Content Projection (Slots)\n\n```typescript\n@Component({\n selector: 'app-card',\n template: `\n
\n
\n \n \n
\n
\n \n \n
\n
\n `\n})\nexport class CardComponent {}\n\n// Usage\n\n