Angular

1---
2name: angular
3description: >-
4  Modern Angular (v20+) expert with deep knowledge of Signals, Standalone
5  Components, Zoneless applications, SSR/Hydration, and reactive patterns.
6  Use PROACTIVELY for Angular development, component architecture, state
7  management, performance optimization, and migration to modern patterns.
8risk: safe
9source: self
10---
11 
12# Angular Expert
13 
14Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.
15 
16## When to Use This Skill
17 
18- Building new Angular applications (v20+)
19- Implementing Signals-based reactive patterns
20- Creating Standalone Components and migrating from NgModules
21- Configuring Zoneless Angular applications
22- Implementing SSR, prerendering, and hydration
23- Optimizing Angular performance
24- Adopting modern Angular patterns and best practices
25 
26## Do Not Use This Skill When
27 
28- Migrating from AngularJS (1.x) → use `angular-migration` skill
29- Working with legacy Angular apps that cannot upgrade
30- General TypeScript issues → use `typescript-expert` skill
31 
32## Instructions
33 
341. Assess the Angular version and project structure
352. Apply modern patterns (Signals, Standalone, Zoneless)
363. Implement with proper typing and reactivity
374. Validate with build and tests
38 
39## Safety
40 
41- Always test changes in development before production
42- Gradual migration for existing apps (don't big-bang refactor)
43- Keep backward compatibility during transitions
44 
45---
46 
47## Angular Version Timeline
48 
49| Version        | Release | Key Features                                           |
50| -------------- | ------- | ------------------------------------------------------ |
51| **Angular 20** | Q2 2025 | Signals stable, Zoneless stable, Incremental hydration |
52| **Angular 21** | Q4 2025 | Signals-first default, Enhanced SSR                    |
53| **Angular 22** | Q2 2026 | Signal Forms, Selectorless components                  |
54 
55---
56 
57## 1. Signals: The New Reactive Primitive
58 
59Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.
60 
61### Core Concepts
62 
63```typescript
64import { signal, computed, effect } from "@angular/core";
65 
66// Writable signal
67const count = signal(0);
68 
69// Read value
70console.log(count()); // 0
71 
72// Update value
73count.set(5); // Direct set
74count.update((v) => v + 1); // Functional update
75 
76// Computed (derived) signal
77const doubled = computed(() => count() * 2);
78 
79// Effect (side effects)
80effect(() => {
81  console.log(`Count changed to: ${count()}`);
82});
83```
84 
85### Signal-Based Inputs and Outputs
86 
87```typescript
88import { Component, input, output, model } from "@angular/core";
89 
90@Component({
91  selector: "app-user-card",
92  standalone: true,
93  template: `
94    <div class="card">
95      <h3>{{ name() }}</h3>
96      <span>{{ role() }}</span>
97      <button (click)="select.emit(id())">Select</button>
98    </div>
99  `,
100})
101export class UserCardComponent {
102  // Signal inputs (read-only)
103  id = input.required<string>();
104  name = input.required<string>();
105  role = input<string>("User"); // With default
106 
107  // Output
108  select = output<string>();
109 
110  // Two-way binding (model)
111  isSelected = model(false);
112}
113 
114// Usage:
115// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />
116```
117 
118### Signal Queries (ViewChild/ContentChild)
119 
120```typescript
121import {
122  Component,
123  viewChild,
124  viewChildren,
125  contentChild,
126} from "@angular/core";
127 
128@Component({
129  selector: "app-container",
130  standalone: true,
131  template: `
132    <input #searchInput />
133    <app-item *ngFor="let item of items()" />
134  `,
135})
136export class ContainerComponent {
137  // Signal-based queries
138  searchInput = viewChild<ElementRef>("searchInput");
139  items = viewChildren(ItemComponent);
140  projectedContent = contentChild(HeaderDirective);
141 
142  focusSearch() {
143    this.searchInput()?.nativeElement.focus();
144  }
145}
146```
147 
148### When to Use Signals vs RxJS
149 
150| Use Case                | Signals         | RxJS                             |
151| ----------------------- | --------------- | -------------------------------- |
152| Local component state   | ✅ Preferred    | Overkill                         |
153| Derived/computed values | ✅ `computed()` | `combineLatest` works            |
154| Side effects            | ✅ `effect()`   | `tap` operator                   |
155| HTTP requests           | ❌              | ✅ HttpClient returns Observable |
156| Event streams           | ❌              | ✅ `fromEvent`, operators        |
157| Complex async flows     | ❌              | ✅ `switchMap`, `mergeMap`       |
158 
159---
160 
161## 2. Standalone Components
162 
163Standalone components are self-contained and don't require NgModule declarations.
164 
165### Creating Standalone Components
166 
167```typescript
168import { Component } from "@angular/core";
169import { CommonModule } from "@angular/common";
170import { RouterLink } from "@angular/router";
171 
172@Component({
173  selector: "app-header",
174  standalone: true,
175  imports: [CommonModule, RouterLink], // Direct imports
176  template: `
177    <header>
178      <a routerLink="/">Home</a>
179      <a routerLink="/about">About</a>
180    </header>
181  `,
182})
183export class HeaderComponent {}
184```
185 
186### Bootstrapping Without NgModule
187 
188```typescript
189// main.ts
190import { bootstrapApplication } from "@angular/platform-browser";
191import { provideRouter } from "@angular/router";
192import { provideHttpClient } from "@angular/common/http";
193import { AppComponent } from "./app/app.component";
194import { routes } from "./app/app.routes";
195 
196bootstrapApplication(AppComponent, {
197  providers: [provideRouter(routes), provideHttpClient()],
198});
199```
200 
201### Lazy Loading Standalone Components
202 
203```typescript
204// app.routes.ts
205import { Routes } from "@angular/router";
206 
207export const routes: Routes = [
208  {
209    path: "dashboard",
210    loadComponent: () =>
211      import("./dashboard/dashboard.component").then(
212        (m) => m.DashboardComponent,
213      ),
214  },
215  {
216    path: "admin",
217    loadChildren: () =>
218      import("./admin/admin.routes").then((m) => m.ADMIN_ROUTES),
219  },
220];
221```
222 
223---
224 
225## 3. Zoneless Angular
226 
227Zoneless applications don't use zone.js, improving performance and debugging.
228 
229### Enabling Zoneless Mode
230 
231```typescript
232// main.ts
233import { bootstrapApplication } from "@angular/platform-browser";
234import { provideZonelessChangeDetection } from "@angular/core";
235import { AppComponent } from "./app/app.component";
236 
237bootstrapApplication(AppComponent, {
238  providers: [provideZonelessChangeDetection()],
239});
240```
241 
242### Zoneless Component Patterns
243 
244```typescript
245import { Component, signal, ChangeDetectionStrategy } from "@angular/core";
246 
247@Component({
248  selector: "app-counter",
249  standalone: true,
250  changeDetection: ChangeDetectionStrategy.OnPush,
251  template: `
252    <div>Count: {{ count() }}</div>
253    <button (click)="increment()">+</button>
254  `,
255})
256export class CounterComponent {
257  count = signal(0);
258 
259  increment() {
260    this.count.update((v) => v + 1);
261    // No zone.js needed - Signal triggers change detection
262  }
263}
264```
265 
266### Key Zoneless Benefits
267 
268- **Performance**: No zone.js patches on async APIs
269- **Debugging**: Clean stack traces without zone wrappers
270- **Bundle size**: Smaller without zone.js (~15KB savings)
271- **Interoperability**: Better with Web Components and micro-frontends
272 
273---
274 
275## 4. Server-Side Rendering & Hydration
276 
277### SSR Setup with Angular CLI
278 
279```bash
280ng add @angular/ssr
281```
282 
283### Hydration Configuration
284 
285```typescript
286// app.config.ts
287import { ApplicationConfig } from "@angular/core";
288import {
289  provideClientHydration,
290  withEventReplay,
291} from "@angular/platform-browser";
292 
293export const appConfig: ApplicationConfig = {
294  providers: [provideClientHydration(withEventReplay())],
295};
296```
297 
298### Incremental Hydration (v20+)
299 
300```typescript
301import { Component } from "@angular/core";
302 
303@Component({
304  selector: "app-page",
305  standalone: true,
306  template: `
307    <app-hero />
308 
309    @defer (hydrate on viewport) {
310      <app-comments />
311    }
312 
313    @defer (hydrate on interaction) {
314      <app-chat-widget />
315    }
316  `,
317})
318export class PageComponent {}
319```
320 
321### Hydration Triggers
322 
323| Trigger          | When to Use                             |
324| ---------------- | --------------------------------------- |
325| `on idle`        | Low-priority, hydrate when browser idle |
326| `on viewport`    | Hydrate when element enters viewport    |
327| `on interaction` | Hydrate on first user interaction       |
328| `on hover`       | Hydrate when user hovers                |
329| `on timer(ms)`   | Hydrate after specified delay           |
330 
331---
332 
333## 5. Modern Routing Patterns
334 
335### Functional Route Guards
336 
337```typescript
338// auth.guard.ts
339import { inject } from "@angular/core";
340import { Router, CanActivateFn } from "@angular/router";
341import { AuthService } from "./auth.service";
342 
343export const authGuard: CanActivateFn = (route, state) => {
344  const auth = inject(AuthService);
345  const router = inject(Router);
346 
347  if (auth.isAuthenticated()) {
348    return true;
349  }
350 
351  return router.createUrlTree(["/login"], {
352    queryParams: { returnUrl: state.url },
353  });
354};
355 
356// Usage in routes
357export const routes: Routes = [
358  {
359    path: "dashboard",
360    loadComponent: () => import("./dashboard.component"),
361    canActivate: [authGuard],
362  },
363];
364```
365 
366### Route-Level Data Resolvers
367 
368```typescript
369import { inject } from '@angular/core';
370import { ResolveFn } from '@angular/router';
371import { UserService } from './user.service';
372import { User } from './user.model';
373 
374export const userResolver: ResolveFn<User> = (route) => {
375  const userService = inject(UserService);
376  return userService.getUser(route.paramMap.get('id')!);
377};
378 
379// In routes
380{
381  path: 'user/:id',
382  loadComponent: () => import('./user.component'),
383  resolve: { user: userResolver }
384}
385 
386// In component
387export class UserComponent {
388  private route = inject(ActivatedRoute);
389  user = toSignal(this.route.data.pipe(map(d => d['user'])));
390}
391```
392 
393---
394 
395## 6. Dependency Injection Patterns
396 
397### Modern inject() Function
398 
399```typescript
400import { Component, inject } from '@angular/core';
401import { HttpClient } from '@angular/common/http';
402import { UserService } from './user.service';
403 
404@Component({...})
405export class UserComponent {
406  // Modern inject() - no constructor needed
407  private http = inject(HttpClient);
408  private userService = inject(UserService);
409 
410  // Works in any injection context
411  users = toSignal(this.userService.getUsers());
412}
413```
414 
415### Injection Tokens for Configuration
416 
417```typescript
418import { InjectionToken, inject } from "@angular/core";
419 
420// Define token
421export const API_BASE_URL = new InjectionToken<string>("API_BASE_URL");
422 
423// Provide in config
424bootstrapApplication(AppComponent, {
425  providers: [{ provide: API_BASE_URL, useValue: "https://api.example.com" }],
426});
427 
428// Inject in service
429@Injectable({ providedIn: "root" })
430export class ApiService {
431  private baseUrl = inject(API_BASE_URL);
432 
433  get(endpoint: string) {
434    return this.http.get(`${this.baseUrl}/${endpoint}`);
435  }
436}
437```
438 
439---
440 
441## 7. Component Composition & Reusability
442 
443### Content Projection (Slots)
444 
445```typescript
446@Component({
447  selector: 'app-card',
448  template: `
449    <div class="card">
450      <div class="header">
451        <!-- Select by attribute -->
452        <ng-content select="[card-header]"></ng-content>
453      </div>
454      <div class="body">
455        <!-- Default slot -->
456        <ng-content></ng-content>
457      </div>
458    </div>
459  `
460})
461export class CardComponent {}
462 
463// Usage
464<app-card>
465  <h3 card-header>Title</h3>
466  <p>Body content</p>
467</app-card>
468```
469 
470### Host Directives (Composition)
471 
472```typescript
473// Reusable behaviors without inheritance
474@Directive({
475  standalone: true,
476  selector: '[appTooltip]',
477  inputs: ['tooltip'] // Signal input alias
478})
479export class TooltipDirective { ... }
480 
481@Component({
482  selector: 'app-button',
483  standalone: true,
484  hostDirectives: [
485    {
486      directive: TooltipDirective,
487      inputs: ['tooltip: title'] // Map input
488    }
489  ],
490  template: `<ng-content />`
491})
492export class ButtonComponent {}
493```
494 
495---
496 
497## 8. State Management Patterns
498 
499### Signal-Based State Service
500 
501```typescript
502import { Injectable, signal, computed } from "@angular/core";
503 
504interface AppState {
505  user: User | null;
506  theme: "light" | "dark";
507  notifications: Notification[];
508}
509 
510@Injectable({ providedIn: "root" })
511export class StateService {
512  // Private writable signals
513  private _user = signal<User | null>(null);
514  private _theme = signal<"light" | "dark">("light");
515  private _notifications = signal<Notification[]>([]);
516 
517  // Public read-only computed
518  readonly user = computed(() => this._user());
519  readonly theme = computed(() => this._theme());
520  readonly notifications = computed(() => this._notifications());
521  readonly unreadCount = computed(
522    () => this._notifications().filter((n) => !n.read).length,
523  );
524 
525  // Actions
526  setUser(user: User | null) {
527    this._user.set(user);
528  }
529 
530  toggleTheme() {
531    this._theme.update((t) => (t === "light" ? "dark" : "light"));
532  }
533 
534  addNotification(notification: Notification) {
535    this._notifications.update((n) => [...n, notification]);
536  }
537}
538```
539 
540### Component Store Pattern with Signals
541 
542```typescript
543import { Injectable, signal, computed, inject } from "@angular/core";
544import { HttpClient } from "@angular/common/http";
545import { toSignal } from "@angular/core/rxjs-interop";
546 
547@Injectable()
548export class ProductStore {
549  private http = inject(HttpClient);
550 
551  // State
552  private _products = signal<Product[]>([]);
553  private _loading = signal(false);
554  private _filter = signal("");
555 
556  // Selectors
557  readonly products = computed(() => this._products());
558  readonly loading = computed(() => this._loading());
559  readonly filteredProducts = computed(() => {
560    const filter = this._filter().toLowerCase();
561    return this._products().filter((p) =>
562      p.name.toLowerCase().includes(filter),
563    );
564  });
565 
566  // Actions
567  loadProducts() {
568    this._loading.set(true);
569    this.http.get<Product[]>("/api/products").subscribe({
570      next: (products) => {
571        this._products.set(products);
572        this._loading.set(false);
573      },
574      error: () => this._loading.set(false),
575    });
576  }
577 
578  setFilter(filter: string) {
579    this._filter.set(filter);
580  }
581}
582```
583 
584---
585 
586## 9. Forms with Signals (Coming in v22+)
587 
588### Current Reactive Forms
589 
590```typescript
591import { Component, inject } from "@angular/core";
592import { FormBuilder, Validators, ReactiveFormsModule } from "@angular/forms";
593 
594@Component({
595  selector: "app-user-form",
596  standalone: true,
597  imports: [ReactiveFormsModule],
598  template: `
599    <form [formGroup]="form" (ngSubmit)="onSubmit()">
600      <input formControlName="name" placeholder="Name" />
601      <input formControlName="email" type="email" placeholder="Email" />
602      <button [disabled]="form.invalid">Submit</button>
603    </form>
604  `,
605})
606export class UserFormComponent {
607  private fb = inject(FormBuilder);
608 
609  form = this.fb.group({
610    name: ["", Validators.required],
611    email: ["", [Validators.required, Validators.email]],
612  });
613 
614  onSubmit() {
615    if (this.form.valid) {
616      console.log(this.form.value);
617    }
618  }
619}
620```
621 
622### Signal-Aware Form Patterns (Preview)
623 
624```typescript
625// Future Signal Forms API (experimental)
626import { Component, signal } from '@angular/core';
627 
628@Component({...})
629export class SignalFormComponent {
630  name = signal('');
631  email = signal('');
632 
633  // Computed validation
634  isValid = computed(() =>
635    this.name().length > 0 &&
636    this.email().includes('@')
637  );
638 
639  submit() {
640    if (this.isValid()) {
641      console.log({ name: this.name(), email: this.email() });
642    }
643  }
644}
645```
646 
647---
648 
649## 10. Performance Optimization
650 
651### Change Detection Strategies
652 
653```typescript
654@Component({
655  changeDetection: ChangeDetectionStrategy.OnPush,
656  // Only checks when:
657  // 1. Input signal/reference changes
658  // 2. Event handler runs
659  // 3. Async pipe emits
660  // 4. Signal value changes
661})
662```
663 
664### Defer Blocks for Lazy Loading
665 
666```typescript
667@Component({
668  template: `
669    <!-- Immediate loading -->
670    <app-header />
671 
672    <!-- Lazy load when visible -->
673    @defer (on viewport) {
674      <app-heavy-chart />
675    } @placeholder {
676      <div class="skeleton" />
677    } @loading (minimum 200ms) {
678      <app-spinner />
679    } @error {
680      <p>Failed to load chart</p>
681    }
682  `
683})
684```
685 
686### NgOptimizedImage
687 
688```typescript
689import { NgOptimizedImage } from '@angular/common';
690 
691@Component({
692  imports: [NgOptimizedImage],
693  template: `
694    <img
695      ngSrc="hero.jpg"
696      width="800"
697      height="600"
698      priority
699    />
700 
701    <img
702      ngSrc="thumbnail.jpg"
703      width="200"
704      height="150"
705      loading="lazy"
706      placeholder="blur"
707    />
708  `
709})
710```
711 
712---
713 
714## 11. Testing Modern Angular
715 
716### Testing Signal Components
717 
718```typescript
719import { ComponentFixture, TestBed } from "@angular/core/testing";
720import { CounterComponent } from "./counter.component";
721 
722describe("CounterComponent", () => {
723  let component: CounterComponent;
724  let fixture: ComponentFixture<CounterComponent>;
725 
726  beforeEach(async () => {
727    await TestBed.configureTestingModule({
728      imports: [CounterComponent], // Standalone import
729    }).compileComponents();
730 
731    fixture = TestBed.createComponent(CounterComponent);
732    component = fixture.componentInstance;
733    fixture.detectChanges();
734  });
735 
736  it("should increment count", () => {
737    expect(component.count()).toBe(0);
738 
739    component.increment();
740 
741    expect(component.count()).toBe(1);
742  });
743 
744  it("should update DOM on signal change", () => {
745    component.count.set(5);
746    fixture.detectChanges();
747 
748    const el = fixture.nativeElement.querySelector(".count");
749    expect(el.textContent).toContain("5");
750  });
751});
752```
753 
754### Testing with Signal Inputs
755 
756```typescript
757import { ComponentFixture, TestBed } from "@angular/core/testing";
758import { ComponentRef } from "@angular/core";
759import { UserCardComponent } from "./user-card.component";
760 
761describe("UserCardComponent", () => {
762  let fixture: ComponentFixture<UserCardComponent>;
763  let componentRef: ComponentRef<UserCardComponent>;
764 
765  beforeEach(async () => {
766    await TestBed.configureTestingModule({
767      imports: [UserCardComponent],
768    }).compileComponents();
769 
770    fixture = TestBed.createComponent(UserCardComponent);
771    componentRef = fixture.componentRef;
772 
773    // Set signal inputs via setInput
774    componentRef.setInput("id", "123");
775    componentRef.setInput("name", "John Doe");
776 
777    fixture.detectChanges();
778  });
779 
780  it("should display user name", () => {
781    const el = fixture.nativeElement.querySelector("h3");
782    expect(el.textContent).toContain("John Doe");
783  });
784});
785```
786 
787---
788 
789## Best Practices Summary
790 
791| Pattern              | ✅ Do                          | ❌ Don't                        |
792| -------------------- | ------------------------------ | ------------------------------- |
793| **State**            | Use Signals for local state    | Overuse RxJS for simple state   |
794| **Components**       | Standalone with direct imports | Bloated SharedModules           |
795| **Change Detection** | OnPush + Signals               | Default CD everywhere           |
796| **Lazy Loading**     | `@defer` and `loadComponent`   | Eager load everything           |
797| **DI**               | `inject()` function            | Constructor injection (verbose) |
798| **Inputs**           | `input()` signal function      | `@Input()` decorator (legacy)   |
799| **Zoneless**         | Enable for new projects        | Force on legacy without testing |
800 
801---
802 
803## Resources
804 
805- [Angular.dev Documentation](https://angular.dev)
806- [Angular Signals Guide](https://angular.dev/guide/signals)
807- [Angular SSR Guide](https://angular.dev/guide/ssr)
808- [Angular Update Guide](https://angular.dev/update-guide)
809- [Angular Blog](https://blog.angular.dev)
810 
811---
812 
813## Common Troubleshooting
814 
815| Issue                          | Solution                                            |
816| ------------------------------ | --------------------------------------------------- |
817| Signal not updating UI         | Ensure `OnPush` + call signal as function `count()` |
818| Hydration mismatch             | Check server/client content consistency             |
819| Circular dependency            | Use `inject()` with `forwardRef`                    |
820| Zoneless not detecting changes | Trigger via signal updates, not mutations           |
821| SSR fetch fails                | Use `TransferState` or `withFetch()`                |
822