[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AEBDT1VN2DN5J655DQ475W":3,"skill-same:01M6AEBDT1VN2DN5J655DQ475W":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":47,"ownerDescription":48,"updatedAt":49,"install":50,"resources":63},"01M6AEBDT1VN2DN5J655DQ475W","angular",null,"Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR\u002FHydration, and reactive patterns.","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fangular\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32],"safe","components","ssr","applications","knowledge","expert","patterns","self","signals","deep","with","standalone","reactive","2026","2026-11-10 10:12:30",false,"---\nname: angular\ndescription: Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR\u002FHydration, and reactive patterns.\nmetadata:\n  risk: safe\n  source: self\n  date_added: '2026-02-27'\n---\n\n# Angular Expert\n\nMaster modern Angular development with Signals, Standalone Components, Zoneless applications, SSR\u002FHydration, 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\u002Fcore\";\n\n\u002F\u002F Writable signal\nconst count = signal(0);\n\n\u002F\u002F Read value\nconsole.log(count()); \u002F\u002F 0\n\n\u002F\u002F Update value\ncount.set(5); \u002F\u002F Direct set\ncount.update((v) => v + 1); \u002F\u002F Functional update\n\n\u002F\u002F Computed (derived) signal\nconst doubled = computed(() => count() * 2);\n\n\u002F\u002F 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\u002Fcore\";\n\n@Component({\n  selector: \"app-user-card\",\n  standalone: true,\n  template: `\n    \u003Cdiv class=\"card\">\n      \u003Ch3>{{ name() }}\u003C\u002Fh3>\n      \u003Cspan>{{ role() }}\u003C\u002Fspan>\n      \u003Cbutton (click)=\"select.emit(id())\">Select\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `,\n})\nexport class UserCardComponent {\n  \u002F\u002F Signal inputs (read-only)\n  id = input.required\u003Cstring>();\n  name = input.required\u003Cstring>();\n  role = input\u003Cstring>(\"User\"); \u002F\u002F With default\n\n  \u002F\u002F Output\n  select = output\u003Cstring>();\n\n  \u002F\u002F Two-way binding (model)\n  isSelected = model(false);\n}\n\n\u002F\u002F Usage:\n\u002F\u002F \u003Capp-user-card [id]=\"'123'\" [name]=\"'John'\" [(isSelected)]=\"selected\" \u002F>\n```\n\n### Signal Queries (ViewChild\u002FContentChild)\n\n```typescript\nimport {\n  Component,\n  viewChild,\n  viewChildren,\n  contentChild,\n} from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-container\",\n  standalone: true,\n  template: `\n    \u003Cinput #searchInput \u002F>\n    \u003Capp-item *ngFor=\"let item of items()\" \u002F>\n  `,\n})\nexport class ContainerComponent {\n  \u002F\u002F Signal-based queries\n  searchInput = viewChild\u003CElementRef>(\"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\u002Fcomputed 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\u002Fcore\";\nimport { CommonModule } from \"@angular\u002Fcommon\";\nimport { RouterLink } from \"@angular\u002Frouter\";\n\n@Component({\n  selector: \"app-header\",\n  standalone: true,\n  imports: [CommonModule, RouterLink], \u002F\u002F Direct imports\n  template: `\n    \u003Cheader>\n      \u003Ca routerLink=\"\u002F\">Home\u003C\u002Fa>\n      \u003Ca routerLink=\"\u002Fabout\">About\u003C\u002Fa>\n    \u003C\u002Fheader>\n  `,\n})\nexport class HeaderComponent {}\n```\n\n### Bootstrapping Without NgModule\n\n```typescript\n\u002F\u002F main.ts\nimport { bootstrapApplication } from \"@angular\u002Fplatform-browser\";\nimport { provideRouter } from \"@angular\u002Frouter\";\nimport { provideHttpClient } from \"@angular\u002Fcommon\u002Fhttp\";\nimport { AppComponent } from \".\u002Fapp\u002Fapp.component\";\nimport { routes } from \".\u002Fapp\u002Fapp.routes\";\n\nbootstrapApplication(AppComponent, {\n  providers: [provideRouter(routes), provideHttpClient()],\n});\n```\n\n### Lazy Loading Standalone Components\n\n```typescript\n\u002F\u002F app.routes.ts\nimport { Routes } from \"@angular\u002Frouter\";\n\nexport const routes: Routes = [\n  {\n    path: \"dashboard\",\n    loadComponent: () =>\n      import(\".\u002Fdashboard\u002Fdashboard.component\").then(\n        (m) => m.DashboardComponent,\n      ),\n  },\n  {\n    path: \"admin\",\n    loadChildren: () =>\n      import(\".\u002Fadmin\u002Fadmin.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\u002F\u002F main.ts\nimport { bootstrapApplication } from \"@angular\u002Fplatform-browser\";\nimport { provideZonelessChangeDetection } from \"@angular\u002Fcore\";\nimport { AppComponent } from \".\u002Fapp\u002Fapp.component\";\n\nbootstrapApplication(AppComponent, {\n  providers: [provideZonelessChangeDetection()],\n});\n```\n\n### Zoneless Component Patterns\n\n```typescript\nimport { Component, signal, ChangeDetectionStrategy } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-counter\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003Cdiv>Count: {{ count() }}\u003C\u002Fdiv>\n    \u003Cbutton (click)=\"increment()\">+\u003C\u002Fbutton>\n  `,\n})\nexport class CounterComponent {\n  count = signal(0);\n\n  increment() {\n    this.count.update((v) => v + 1);\n    \u002F\u002F 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\u002Fssr\n```\n\n### Hydration Configuration\n\n```typescript\n\u002F\u002F app.config.ts\nimport { ApplicationConfig } from \"@angular\u002Fcore\";\nimport {\n  provideClientHydration,\n  withEventReplay,\n} from \"@angular\u002Fplatform-browser\";\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideClientHydration(withEventReplay())],\n};\n```\n\n### Incremental Hydration (v20+)\n\n```typescript\nimport { Component } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-page\",\n  standalone: true,\n  template: `\n    \u003Capp-hero \u002F>\n\n    @defer (hydrate on viewport) {\n      \u003Capp-comments \u002F>\n    }\n\n    @defer (hydrate on interaction) {\n      \u003Capp-chat-widget \u002F>\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\u002F\u002F auth.guard.ts\nimport { inject } from \"@angular\u002Fcore\";\nimport { Router, CanActivateFn } from \"@angular\u002Frouter\";\nimport { AuthService } from \".\u002Fauth.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([\"\u002Flogin\"], {\n    queryParams: { returnUrl: state.url },\n  });\n};\n\n\u002F\u002F Usage in routes\nexport const routes: Routes = [\n  {\n    path: \"dashboard\",\n    loadComponent: () => import(\".\u002Fdashboard.component\"),\n    canActivate: [authGuard],\n  },\n];\n```\n\n### Route-Level Data Resolvers\n\n```typescript\nimport { inject } from '@angular\u002Fcore';\nimport { ResolveFn } from '@angular\u002Frouter';\nimport { UserService } from '.\u002Fuser.service';\nimport { User } from '.\u002Fuser.model';\n\nexport const userResolver: ResolveFn\u003CUser> = (route) => {\n  const userService = inject(UserService);\n  return userService.getUser(route.paramMap.get('id')!);\n};\n\n\u002F\u002F In routes\n{\n  path: 'user\u002F:id',\n  loadComponent: () => import('.\u002Fuser.component'),\n  resolve: { user: userResolver }\n}\n\n\u002F\u002F 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\u002Fcore';\nimport { HttpClient } from '@angular\u002Fcommon\u002Fhttp';\nimport { UserService } from '.\u002Fuser.service';\n\n@Component({...})\nexport class UserComponent {\n  \u002F\u002F Modern inject() - no constructor needed\n  private http = inject(HttpClient);\n  private userService = inject(UserService);\n\n  \u002F\u002F 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\u002Fcore\";\n\n\u002F\u002F Define token\nexport const API_BASE_URL = new InjectionToken\u003Cstring>(\"API_BASE_URL\");\n\n\u002F\u002F Provide in config\nbootstrapApplication(AppComponent, {\n  providers: [{ provide: API_BASE_URL, useValue: \"https:\u002F\u002Fapi.example.com\" }],\n});\n\n\u002F\u002F 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}\u002F${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    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"header\">\n        \u003C!-- Select by attribute -->\n        \u003Cng-content select=\"[card-header]\">\u003C\u002Fng-content>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"body\">\n        \u003C!-- Default slot -->\n        \u003Cng-content>\u003C\u002Fng-content>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `\n})\nexport class CardComponent {}\n\n\u002F\u002F Usage\n\u003Capp-card>\n  \u003Ch3 card-header>Title\u003C\u002Fh3>\n  \u003Cp>Body content\u003C\u002Fp>\n\u003C\u002Fapp-card>\n```\n\n### Host Directives (Composition)\n\n```typescript\n\u002F\u002F Reusable behaviors without inheritance\n@Directive({\n  standalone: true,\n  selector: '[appTooltip]',\n  inputs: ['tooltip'] \u002F\u002F Signal input alias\n})\nexport class TooltipDirective { ... }\n\n@Component({\n  selector: 'app-button',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: TooltipDirective,\n      inputs: ['tooltip: title'] \u002F\u002F Map input\n    }\n  ],\n  template: `\u003Cng-content \u002F>`\n})\nexport class ButtonComponent {}\n```\n\n---\n\n## 8. State Management Patterns\n\n### Signal-Based State Service\n\n```typescript\nimport { Injectable, signal, computed } from \"@angular\u002Fcore\";\n\ninterface AppState {\n  user: User | null;\n  theme: \"light\" | \"dark\";\n  notifications: Notification[];\n}\n\n@Injectable({ providedIn: \"root\" })\nexport class StateService {\n  \u002F\u002F Private writable signals\n  private _user = signal\u003CUser | null>(null);\n  private _theme = signal\u003C\"light\" | \"dark\">(\"light\");\n  private _notifications = signal\u003CNotification[]>([]);\n\n  \u002F\u002F Public read-only computed\n  readonly user = computed(() => this._user());\n  readonly theme = computed(() => this._theme());\n  readonly notifications = computed(() => this._notifications());\n  readonly unreadCount = computed(\n    () => this._notifications().filter((n) => !n.read).length,\n  );\n\n  \u002F\u002F Actions\n  setUser(user: User | null) {\n    this._user.set(user);\n  }\n\n  toggleTheme() {\n    this._theme.update((t) => (t === \"light\" ? \"dark\" : \"light\"));\n  }\n\n  addNotification(notification: Notification) {\n    this._notifications.update((n) => [...n, notification]);\n  }\n}\n```\n\n### Component Store Pattern with Signals\n\n```typescript\nimport { Injectable, signal, computed, inject } from \"@angular\u002Fcore\";\nimport { HttpClient } from \"@angular\u002Fcommon\u002Fhttp\";\nimport { toSignal } from \"@angular\u002Fcore\u002Frxjs-interop\";\n\n@Injectable()\nexport class ProductStore {\n  private http = inject(HttpClient);\n\n  \u002F\u002F State\n  private _products = signal\u003CProduct[]>([]);\n  private _loading = signal(false);\n  private _filter = signal(\"\");\n\n  \u002F\u002F Selectors\n  readonly products = computed(() => this._products());\n  readonly loading = computed(() => this._loading());\n  readonly filteredProducts = computed(() => {\n    const filter = this._filter().toLowerCase();\n    return this._products().filter((p) =>\n      p.name.toLowerCase().includes(filter),\n    );\n  });\n\n  \u002F\u002F Actions\n  loadProducts() {\n    this._loading.set(true);\n    this.http.get\u003CProduct[]>(\"\u002Fapi\u002Fproducts\").subscribe({\n      next: (products) => {\n        this._products.set(products);\n        this._loading.set(false);\n      },\n      error: () => this._loading.set(false),\n    });\n  }\n\n  setFilter(filter: string) {\n    this._filter.set(filter);\n  }\n}\n```\n\n---\n\n## 9. Forms with Signals (Coming in v22+)\n\n### Current Reactive Forms\n\n```typescript\nimport { Component, inject } from \"@angular\u002Fcore\";\nimport { FormBuilder, Validators, ReactiveFormsModule } from \"@angular\u002Fforms\";\n\n@Component({\n  selector: \"app-user-form\",\n  standalone: true,\n  imports: [ReactiveFormsModule],\n  template: `\n    \u003Cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n      \u003Cinput formControlName=\"name\" placeholder=\"Name\" \u002F>\n      \u003Cinput formControlName=\"email\" type=\"email\" placeholder=\"Email\" \u002F>\n      \u003Cbutton [disabled]=\"form.invalid\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class UserFormComponent {\n  private fb = inject(FormBuilder);\n\n  form = this.fb.group({\n    name: [\"\", Validators.required],\n    email: [\"\", [Validators.required, Validators.email]],\n  });\n\n  onSubmit() {\n    if (this.form.valid) {\n      console.log(this.form.value);\n    }\n  }\n}\n```\n\n### Signal-Aware Form Patterns (Preview)\n\n```typescript\n\u002F\u002F Future Signal Forms API (experimental)\nimport { Component, signal } from '@angular\u002Fcore';\n\n@Component({...})\nexport class SignalFormComponent {\n  name = signal('');\n  email = signal('');\n\n  \u002F\u002F Computed validation\n  isValid = computed(() =>\n    this.name().length > 0 &&\n    this.email().includes('@')\n  );\n\n  submit() {\n    if (this.isValid()) {\n      console.log({ name: this.name(), email: this.email() });\n    }\n  }\n}\n```\n\n---\n\n## 10. Performance Optimization\n\n### Change Detection Strategies\n\n```typescript\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  \u002F\u002F Only checks when:\n  \u002F\u002F 1. Input signal\u002Freference changes\n  \u002F\u002F 2. Event handler runs\n  \u002F\u002F 3. Async pipe emits\n  \u002F\u002F 4. Signal value changes\n})\n```\n\n### Defer Blocks for Lazy Loading\n\n```typescript\n@Component({\n  template: `\n    \u003C!-- Immediate loading -->\n    \u003Capp-header \u002F>\n\n    \u003C!-- Lazy load when visible -->\n    @defer (on viewport) {\n      \u003Capp-heavy-chart \u002F>\n    } @placeholder {\n      \u003Cdiv class=\"skeleton\" \u002F>\n    } @loading (minimum 200ms) {\n      \u003Capp-spinner \u002F>\n    } @error {\n      \u003Cp>Failed to load chart\u003C\u002Fp>\n    }\n  `\n})\n```\n\n### NgOptimizedImage\n\n```typescript\nimport { NgOptimizedImage } from '@angular\u002Fcommon';\n\n@Component({\n  imports: [NgOptimizedImage],\n  template: `\n    \u003Cimg\n      ngSrc=\"hero.jpg\"\n      width=\"800\"\n      height=\"600\"\n      priority\n    \u002F>\n\n    \u003Cimg\n      ngSrc=\"thumbnail.jpg\"\n      width=\"200\"\n      height=\"150\"\n      loading=\"lazy\"\n      placeholder=\"blur\"\n    \u002F>\n  `\n})\n```\n\n---\n\n## 11. Testing Modern Angular\n\n### Testing Signal Components\n\n```typescript\nimport { ComponentFixture, TestBed } from \"@angular\u002Fcore\u002Ftesting\";\nimport { CounterComponent } from \".\u002Fcounter.component\";\n\ndescribe(\"CounterComponent\", () => {\n  let component: CounterComponent;\n  let fixture: ComponentFixture\u003CCounterComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [CounterComponent], \u002F\u002F Standalone import\n    }).compileComponents();\n\n    fixture = TestBed.createComponent(CounterComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it(\"should increment count\", () => {\n    expect(component.count()).toBe(0);\n\n    component.increment();\n\n    expect(component.count()).toBe(1);\n  });\n\n  it(\"should update DOM on signal change\", () => {\n    component.count.set(5);\n    fixture.detectChanges();\n\n    const el = fixture.nativeElement.querySelector(\".count\");\n    expect(el.textContent).toContain(\"5\");\n  });\n});\n```\n\n### Testing with Signal Inputs\n\n```typescript\nimport { ComponentFixture, TestBed } from \"@angular\u002Fcore\u002Ftesting\";\nimport { ComponentRef } from \"@angular\u002Fcore\";\nimport { UserCardComponent } from \".\u002Fuser-card.component\";\n\ndescribe(\"UserCardComponent\", () => {\n  let fixture: ComponentFixture\u003CUserCardComponent>;\n  let componentRef: ComponentRef\u003CUserCardComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [UserCardComponent],\n    }).compileComponents();\n\n    fixture = TestBed.createComponent(UserCardComponent);\n    componentRef = fixture.componentRef;\n\n    \u002F\u002F Set signal inputs via setInput\n    componentRef.setInput(\"id\", \"123\");\n    componentRef.setInput(\"name\", \"John Doe\");\n\n    fixture.detectChanges();\n  });\n\n  it(\"should display user name\", () => {\n    const el = fixture.nativeElement.querySelector(\"h3\");\n    expect(el.textContent).toContain(\"John Doe\");\n  });\n});\n```\n\n---\n\n## Best Practices Summary\n\n| Pattern              | ✅ Do                          | ❌ Don't                        |\n| -------------------- | ------------------------------ | ------------------------------- |\n| **State**            | Use Signals for local state    | Overuse RxJS for simple state   |\n| **Components**       | Standalone with direct imports | Bloated SharedModules           |\n| **Change Detection** | OnPush + Signals               | Default CD everywhere           |\n| **Lazy Loading**     | `@defer` and `loadComponent`   | Eager load everything           |\n| **DI**               | `inject()` function            | Constructor injection (verbose) |\n| **Inputs**           | `input()` signal function      | `@Input()` decorator (legacy)   |\n| **Zoneless**         | Enable for new projects        | Force on legacy without testing |\n\n---\n\n## Resources\n\n- [Angular.dev Documentation](https:\u002F\u002Fangular.dev)\n- [Angular Signals Guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Fsignals)\n- [Angular SSR Guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Fssr)\n- [Angular Update Guide](https:\u002F\u002Fangular.dev\u002Fupdate-guide)\n- [Angular Blog](https:\u002F\u002Fblog.angular.dev)\n\n---\n\n## Common Troubleshooting\n\n| Issue                          | Solution                                            |\n| ------------------------------ | --------------------------------------------------- |\n| Signal not updating UI         | Ensure `OnPush` + call signal as function `count()` |\n| Hydration mismatch             | Check server\u002Fclient content consistency             |\n| Circular dependency            | Use `inject()` with `forwardRef`                    |\n| Zoneless not detecting changes | Trigger via signal updates, not mutations           |\n| SSR fetch fails                | Use `TransferState` or `withFetch()`                |\n","# Angular Expert\n\nMaster modern Angular development with Signals, Standalone Components, Zoneless applications, SSR\u002FHydration, 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\u002Fcore\";\n\n\u002F\u002F Writable signal\nconst count = signal(0);\n\n\u002F\u002F Read value\nconsole.log(count()); \u002F\u002F 0\n\n\u002F\u002F Update value\ncount.set(5); \u002F\u002F Direct set\ncount.update((v) => v + 1); \u002F\u002F Functional update\n\n\u002F\u002F Computed (derived) signal\nconst doubled = computed(() => count() * 2);\n\n\u002F\u002F 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\u002Fcore\";\n\n@Component({\n  selector: \"app-user-card\",\n  standalone: true,\n  template: `\n    \u003Cdiv class=\"card\">\n      \u003Ch3>{{ name() }}\u003C\u002Fh3>\n      \u003Cspan>{{ role() }}\u003C\u002Fspan>\n      \u003Cbutton (click)=\"select.emit(id())\">Select\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `,\n})\nexport class UserCardComponent {\n  \u002F\u002F Signal inputs (read-only)\n  id = input.required\u003Cstring>();\n  name = input.required\u003Cstring>();\n  role = input\u003Cstring>(\"User\"); \u002F\u002F With default\n\n  \u002F\u002F Output\n  select = output\u003Cstring>();\n\n  \u002F\u002F Two-way binding (model)\n  isSelected = model(false);\n}\n\n\u002F\u002F Usage:\n\u002F\u002F \u003Capp-user-card [id]=\"'123'\" [name]=\"'John'\" [(isSelected)]=\"selected\" \u002F>\n```\n\n### Signal Queries (ViewChild\u002FContentChild)\n\n```typescript\nimport {\n  Component,\n  viewChild,\n  viewChildren,\n  contentChild,\n} from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-container\",\n  standalone: true,\n  template: `\n    \u003Cinput #searchInput \u002F>\n    \u003Capp-item *ngFor=\"let item of items()\" \u002F>\n  `,\n})\nexport class ContainerComponent {\n  \u002F\u002F Signal-based queries\n  searchInput = viewChild\u003CElementRef>(\"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\u002Fcomputed 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\u002Fcore\";\nimport { CommonModule } from \"@angular\u002Fcommon\";\nimport { RouterLink } from \"@angular\u002Frouter\";\n\n@Component({\n  selector: \"app-header\",\n  standalone: true,\n  imports: [CommonModule, RouterLink], \u002F\u002F Direct imports\n  template: `\n    \u003Cheader>\n      \u003Ca routerLink=\"\u002F\">Home\u003C\u002Fa>\n      \u003Ca routerLink=\"\u002Fabout\">About\u003C\u002Fa>\n    \u003C\u002Fheader>\n  `,\n})\nexport class HeaderComponent {}\n```\n\n### Bootstrapping Without NgModule\n\n```typescript\n\u002F\u002F main.ts\nimport { bootstrapApplication } from \"@angular\u002Fplatform-browser\";\nimport { provideRouter } from \"@angular\u002Frouter\";\nimport { provideHttpClient } from \"@angular\u002Fcommon\u002Fhttp\";\nimport { AppComponent } from \".\u002Fapp\u002Fapp.component\";\nimport { routes } from \".\u002Fapp\u002Fapp.routes\";\n\nbootstrapApplication(AppComponent, {\n  providers: [provideRouter(routes), provideHttpClient()],\n});\n```\n\n### Lazy Loading Standalone Components\n\n```typescript\n\u002F\u002F app.routes.ts\nimport { Routes } from \"@angular\u002Frouter\";\n\nexport const routes: Routes = [\n  {\n    path: \"dashboard\",\n    loadComponent: () =>\n      import(\".\u002Fdashboard\u002Fdashboard.component\").then(\n        (m) => m.DashboardComponent,\n      ),\n  },\n  {\n    path: \"admin\",\n    loadChildren: () =>\n      import(\".\u002Fadmin\u002Fadmin.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\u002F\u002F main.ts\nimport { bootstrapApplication } from \"@angular\u002Fplatform-browser\";\nimport { provideZonelessChangeDetection } from \"@angular\u002Fcore\";\nimport { AppComponent } from \".\u002Fapp\u002Fapp.component\";\n\nbootstrapApplication(AppComponent, {\n  providers: [provideZonelessChangeDetection()],\n});\n```\n\n### Zoneless Component Patterns\n\n```typescript\nimport { Component, signal, ChangeDetectionStrategy } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-counter\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003Cdiv>Count: {{ count() }}\u003C\u002Fdiv>\n    \u003Cbutton (click)=\"increment()\">+\u003C\u002Fbutton>\n  `,\n})\nexport class CounterComponent {\n  count = signal(0);\n\n  increment() {\n    this.count.update((v) => v + 1);\n    \u002F\u002F 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\u002Fssr\n```\n\n### Hydration Configuration\n\n```typescript\n\u002F\u002F app.config.ts\nimport { ApplicationConfig } from \"@angular\u002Fcore\";\nimport {\n  provideClientHydration,\n  withEventReplay,\n} from \"@angular\u002Fplatform-browser\";\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideClientHydration(withEventReplay())],\n};\n```\n\n### Incremental Hydration (v20+)\n\n```typescript\nimport { Component } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"app-page\",\n  standalone: true,\n  template: `\n    \u003Capp-hero \u002F>\n\n    @defer (hydrate on viewport) {\n      \u003Capp-comments \u002F>\n    }\n\n    @defer (hydrate on interaction) {\n      \u003Capp-chat-widget \u002F>\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\u002F\u002F auth.guard.ts\nimport { inject } from \"@angular\u002Fcore\";\nimport { Router, CanActivateFn } from \"@angular\u002Frouter\";\nimport { AuthService } from \".\u002Fauth.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([\"\u002Flogin\"], {\n    queryParams: { returnUrl: state.url },\n  });\n};\n\n\u002F\u002F Usage in routes\nexport const routes: Routes = [\n  {\n    path: \"dashboard\",\n    loadComponent: () => import(\".\u002Fdashboard.component\"),\n    canActivate: [authGuard],\n  },\n];\n```\n\n### Route-Level Data Resolvers\n\n```typescript\nimport { inject } from '@angular\u002Fcore';\nimport { ResolveFn } from '@angular\u002Frouter';\nimport { UserService } from '.\u002Fuser.service';\nimport { User } from '.\u002Fuser.model';\n\nexport const userResolver: ResolveFn\u003CUser> = (route) => {\n  const userService = inject(UserService);\n  return userService.getUser(route.paramMap.get('id')!);\n};\n\n\u002F\u002F In routes\n{\n  path: 'user\u002F:id',\n  loadComponent: () => import('.\u002Fuser.component'),\n  resolve: { user: userResolver }\n}\n\n\u002F\u002F 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\u002Fcore';\nimport { HttpClient } from '@angular\u002Fcommon\u002Fhttp';\nimport { UserService } from '.\u002Fuser.service';\n\n@Component({...})\nexport class UserComponent {\n  \u002F\u002F Modern inject() - no constructor needed\n  private http = inject(HttpClient);\n  private userService = inject(UserService);\n\n  \u002F\u002F 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\u002Fcore\";\n\n\u002F\u002F Define token\nexport const API_BASE_URL = new InjectionToken\u003Cstring>(\"API_BASE_URL\");\n\n\u002F\u002F Provide in config\nbootstrapApplication(AppComponent, {\n  providers: [{ provide: API_BASE_URL, useValue: \"https:\u002F\u002Fapi.example.com\" }],\n});\n\n\u002F\u002F 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}\u002F${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    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"header\">\n        \u003C!-- Select by attribute -->\n        \u003Cng-content select=\"[card-header]\">\u003C\u002Fng-content>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"body\">\n        \u003C!-- Default slot -->\n        \u003Cng-content>\u003C\u002Fng-content>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `\n})\nexport class CardComponent {}\n\n\u002F\u002F Usage\n\u003Capp-card>\n  \u003Ch3 card-header>Title\u003C\u002Fh3>\n  \u003Cp>Body content\u003C\u002Fp>\n\u003C\u002Fapp-card>\n```\n\n### Host Directives (Composition)\n\n```typescript\n\u002F\u002F Reusable behaviors without inheritance\n@Directive({\n  standalone: true,\n  selector: '[appTooltip]',\n  inputs: ['tooltip'] \u002F\u002F Signal input alias\n})\nexport class TooltipDirective { ... }\n\n@Component({\n  selector: 'app-button',\n  standalone: true,\n  hostDirectives: [\n    {\n      directive: TooltipDirective,\n      inputs: ['tooltip: title'] \u002F\u002F Map input\n    }\n  ],\n  template: `\u003Cng-content \u002F>`\n})\nexport class ButtonComponent {}\n```\n\n---\n\n## 8. State Management Patterns\n\n### Signal-Based State Service\n\n```typescript\nimport { Injectable, signal, computed } from \"@angular\u002Fcore\";\n\ninterface AppState {\n  user: User | null;\n  theme: \"light\" | \"dark\";\n  notifications: Notification[];\n}\n\n@Injectable({ providedIn: \"root\" })\nexport class StateService {\n  \u002F\u002F Private writable signals\n  private _user = signal\u003CUser | null>(null);\n  private _theme = signal\u003C\"light\" | \"dark\">(\"light\");\n  private _notifications = signal\u003CNotification[]>([]);\n\n  \u002F\u002F Public read-only computed\n  readonly user = computed(() => this._user());\n  readonly theme = computed(() => this._theme());\n  readonly notifications = computed(() => this._notifications());\n  readonly unreadCount = computed(\n    () => this._notifications().filter((n) => !n.read).length,\n  );\n\n  \u002F\u002F Actions\n  setUser(user: User | null) {\n    this._user.set(user);\n  }\n\n  toggleTheme() {\n    this._theme.update((t) => (t === \"light\" ? \"dark\" : \"light\"));\n  }\n\n  addNotification(notification: Notification) {\n    this._notifications.update((n) => [...n, notification]);\n  }\n}\n```\n\n### Component Store Pattern with Signals\n\n```typescript\nimport { Injectable, signal, computed, inject } from \"@angular\u002Fcore\";\nimport { HttpClient } from \"@angular\u002Fcommon\u002Fhttp\";\nimport { toSignal } from \"@angular\u002Fcore\u002Frxjs-interop\";\n\n@Injectable()\nexport class ProductStore {\n  private http = inject(HttpClient);\n\n  \u002F\u002F State\n  private _products = signal\u003CProduct[]>([]);\n  private _loading = signal(false);\n  private _filter = signal(\"\");\n\n  \u002F\u002F Selectors\n  readonly products = computed(() => this._products());\n  readonly loading = computed(() => this._loading());\n  readonly filteredProducts = computed(() => {\n    const filter = this._filter().toLowerCase();\n    return this._products().filter((p) =>\n      p.name.toLowerCase().includes(filter),\n    );\n  });\n\n  \u002F\u002F Actions\n  loadProducts() {\n    this._loading.set(true);\n    this.http.get\u003CProduct[]>(\"\u002Fapi\u002Fproducts\").subscribe({\n      next: (products) => {\n        this._products.set(products);\n        this._loading.set(false);\n      },\n      error: () => this._loading.set(false),\n    });\n  }\n\n  setFilter(filter: string) {\n    this._filter.set(filter);\n  }\n}\n```\n\n---\n\n## 9. Forms with Signals (Coming in v22+)\n\n### Current Reactive Forms\n\n```typescript\nimport { Component, inject } from \"@angular\u002Fcore\";\nimport { FormBuilder, Validators, ReactiveFormsModule } from \"@angular\u002Fforms\";\n\n@Component({\n  selector: \"app-user-form\",\n  standalone: true,\n  imports: [ReactiveFormsModule],\n  template: `\n    \u003Cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n      \u003Cinput formControlName=\"name\" placeholder=\"Name\" \u002F>\n      \u003Cinput formControlName=\"email\" type=\"email\" placeholder=\"Email\" \u002F>\n      \u003Cbutton [disabled]=\"form.invalid\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `,\n})\nexport class UserFormComponent {\n  private fb = inject(FormBuilder);\n\n  form = this.fb.group({\n    name: [\"\", Validators.required],\n    email: [\"\", [Validators.required, Validators.email]],\n  });\n\n  onSubmit() {\n    if (this.form.valid) {\n      console.log(this.form.value);\n    }\n  }\n}\n```\n\n### Signal-Aware Form Patterns (Preview)\n\n```typescript\n\u002F\u002F Future Signal Forms API (experimental)\nimport { Component, signal } from '@angular\u002Fcore';\n\n@Component({...})\nexport class SignalFormComponent {\n  name = signal('');\n  email = signal('');\n\n  \u002F\u002F Computed validation\n  isValid = computed(() =>\n    this.name().length > 0 &&\n    this.email().includes('@')\n  );\n\n  submit() {\n    if (this.isValid()) {\n      console.log({ name: this.name(), email: this.email() });\n    }\n  }\n}\n```\n\n---\n\n## 10. Performance Optimization\n\n### Change Detection Strategies\n\n```typescript\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  \u002F\u002F Only checks when:\n  \u002F\u002F 1. Input signal\u002Freference changes\n  \u002F\u002F 2. Event handler runs\n  \u002F\u002F 3. Async pipe emits\n  \u002F\u002F 4. Signal value changes\n})\n```\n\n### Defer Blocks for Lazy Loading\n\n```typescript\n@Component({\n  template: `\n    \u003C!-- Immediate loading -->\n    \u003Capp-header \u002F>\n\n    \u003C!-- Lazy load when visible -->\n    @defer (on viewport) {\n      \u003Capp-heavy-chart \u002F>\n    } @placeholder {\n      \u003Cdiv class=\"skeleton\" \u002F>\n    } @loading (minimum 200ms) {\n      \u003Capp-spinner \u002F>\n    } @error {\n      \u003Cp>Failed to load chart\u003C\u002Fp>\n    }\n  `\n})\n```\n\n### NgOptimizedImage\n\n```typescript\nimport { NgOptimizedImage } from '@angular\u002Fcommon';\n\n@Component({\n  imports: [NgOptimizedImage],\n  template: `\n    \u003Cimg\n      ngSrc=\"hero.jpg\"\n      width=\"800\"\n      height=\"600\"\n      priority\n    \u002F>\n\n    \u003Cimg\n      ngSrc=\"thumbnail.jpg\"\n      width=\"200\"\n      height=\"150\"\n      loading=\"lazy\"\n      placeholder=\"blur\"\n    \u002F>\n  `\n})\n```\n\n---\n\n## 11. Testing Modern Angular\n\n### Testing Signal Components\n\n```typescript\nimport { ComponentFixture, TestBed } from \"@angular\u002Fcore\u002Ftesting\";\nimport { CounterComponent } from \".\u002Fcounter.component\";\n\ndescribe(\"CounterComponent\", () => {\n  let component: CounterComponent;\n  let fixture: ComponentFixture\u003CCounterComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [CounterComponent], \u002F\u002F Standalone import\n    }).compileComponents();\n\n    fixture = TestBed.createComponent(CounterComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it(\"should increment count\", () => {\n    expect(component.count()).toBe(0);\n\n    component.increment();\n\n    expect(component.count()).toBe(1);\n  });\n\n  it(\"should update DOM on signal change\", () => {\n    component.count.set(5);\n    fixture.detectChanges();\n\n    const el = fixture.nativeElement.querySelector(\".count\");\n    expect(el.textContent).toContain(\"5\");\n  });\n});\n```\n\n### Testing with Signal Inputs\n\n```typescript\nimport { ComponentFixture, TestBed } from \"@angular\u002Fcore\u002Ftesting\";\nimport { ComponentRef } from \"@angular\u002Fcore\";\nimport { UserCardComponent } from \".\u002Fuser-card.component\";\n\ndescribe(\"UserCardComponent\", () => {\n  let fixture: ComponentFixture\u003CUserCardComponent>;\n  let componentRef: ComponentRef\u003CUserCardComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [UserCardComponent],\n    }).compileComponents();\n\n    fixture = TestBed.createComponent(UserCardComponent);\n    componentRef = fixture.componentRef;\n\n    \u002F\u002F Set signal inputs via setInput\n    componentRef.setInput(\"id\", \"123\");\n    componentRef.setInput(\"name\", \"John Doe\");\n\n    fixture.detectChanges();\n  });\n\n  it(\"should display user name\", () => {\n    const el = fixture.nativeElement.querySelector(\"h3\");\n    expect(el.textContent).toContain(\"John Doe\");\n  });\n});\n```\n\n---\n\n## Best Practices Summary\n\n| Pattern              | ✅ Do                          | ❌ Don't                        |\n| -------------------- | ------------------------------ | ------------------------------- |\n| **State**            | Use Signals for local state    | Overuse RxJS for simple state   |\n| **Components**       | Standalone with direct imports | Bloated SharedModules           |\n| **Change Detection** | OnPush + Signals               | Default CD everywhere           |\n| **Lazy Loading**     | `@defer` and `loadComponent`   | Eager load everything           |\n| **DI**               | `inject()` function            | Constructor injection (verbose) |\n| **Inputs**           | `input()` signal function      | `@Input()` decorator (legacy)   |\n| **Zoneless**         | Enable for new projects        | Force on legacy without testing |\n\n---\n\n## Resources\n\n- [Angular.dev Documentation](https:\u002F\u002Fangular.dev)\n- [Angular Signals Guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Fsignals)\n- [Angular SSR Guide](https:\u002F\u002Fangular.dev\u002Fguide\u002Fssr)\n- [Angular Update Guide](https:\u002F\u002Fangular.dev\u002Fupdate-guide)\n- [Angular Blog](https:\u002F\u002Fblog.angular.dev)\n\n---\n\n## Common Troubleshooting\n\n| Issue                          | Solution                                            |\n| ------------------------------ | --------------------------------------------------- |\n| Signal not updating UI         | Ensure `OnPush` + call signal as function `count()` |\n| Hydration mismatch             | Check server\u002Fclient content consistency             |\n| Circular dependency            | Use `inject()` with `forwardRef`                    |\n| Zoneless not detecting changes | Trigger via signal updates, not mutations           |\n| SSR fetch fails                | Use `TransferState` or `withFetch()`                |\n",{"name":5,"metadata":38,"description":7},{"risk":19,"source":26,"date_added":39},"2026-02-27","main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fangular",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add davila7\u002Fclaude-code-templates --skill angular",{"tool":56,"command":57},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill angular",{"tool":59,"command":60},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill angular","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fangular\u002FSKILL.md",true,[64,70],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"metadata.json","REFERENCE","参考文档",741,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fangular\u002Fmetadata.json",{"path":71,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":72,"sourceHtmlUrl":73},"README.md",1400,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fangular\u002FREADME.md",[75,106,132,165,199,222],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":86,"publishedAt":33},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[81],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[87,88,89,90,91,92,93,94,95,96,97,29,98,99,100,101,102,103,104,105],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","use","when","reduce","record","track","verdict","evm","solana","how","public","look",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":113,"publishedAt":33},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[112],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[114,115,116,117,118,119,120,121,122,123,124,96,125,126,127,128,129,27,130,131],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","audit","dependency",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":147,"publishedAt":33},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[138,141,142],{"categoryNo":139,"categoryName":140,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},{"categoryNo":143,"categoryName":144,"taxonomyType":145,"taxonomyTypeDesc":146},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[148,149,150,151,152,153,154,92,155,156,157,158,159,160,161,95,162,163,96,164],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":170,"sourceHtmlUrl":171,"categories":172,"keywords":176,"publishedAt":33},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[173],{"categoryNo":174,"categoryName":175,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000009","前端开发",[177,178,179,180,181,182,183,184,185,186,187,188,189,190,20,191,192,193,194,195,196,197,92,198],"artifacts builder","web","web artifacts builder","artifacts","builder","state","routing","state management","component","css","frontend","ui","Tools","file","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":203,"sourceHtmlUrl":204,"categories":205,"keywords":210,"publishedAt":33},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[206,209],{"categoryNo":207,"categoryName":208,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":174,"categoryName":175,"taxonomyType":84,"taxonomyTypeDesc":85},[211,212,213,214,215,178,22,187,188,216,217,218,219,92,220,29,221],"webapp testing","testing","webapp","browser","playwright","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":226,"sourceHtmlUrl":227,"categories":228,"keywords":236,"publishedAt":33},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[229,232,233],{"categoryNo":230,"categoryName":231,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},{"categoryNo":234,"categoryName":235,"taxonomyType":145,"taxonomyTypeDesc":146},"01JBSEEDCAT000000000000036","内容创作者",[237,238,239,240,241,242,243,244,180,245,190,125,246,247,248,249,250,160,251,96,252,253,254,255,256,103,257],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]