angular-components
Build standalone Angular components with Signals inputs, OnPush change detection, Control Flow, and Smart/Dumb patterns. Use when building standalone Angular components, implementing @if/@for control flow, applying OnPush change detection, or implementing Signals in Angular components. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for, ChangeDetectionStrategy, OnPush, Input, Output)
Best use case
angular-components is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Build standalone Angular components with Signals inputs, OnPush change detection, Control Flow, and Smart/Dumb patterns. Use when building standalone Angular components, implementing @if/@for control flow, applying OnPush change detection, or implementing Signals in Angular components. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for, ChangeDetectionStrategy, OnPush, Input, Output)
Teams using angular-components should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-components/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-components Compares
| Feature / Agent | angular-components | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Build standalone Angular components with Signals inputs, OnPush change detection, Control Flow, and Smart/Dumb patterns. Use when building standalone Angular components, implementing @if/@for control flow, applying OnPush change detection, or implementing Signals in Angular components. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for, ChangeDetectionStrategy, OnPush, Input, Output)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Angular Components
## **Priority: P0 (CRITICAL)**
## Standalone & Structure
- **Standalone**: `standalone: true`. Import all dependencies in `imports` array. Do not declare in NgModule. (Angular 20+: standalone is the default.)
- **Smart/Dumb Split**: **Smart (Container)** → inject services, manage state. **Presentational (Dumb)** → inputs/outputs only, no service dependencies, emit events via outputs.
- **Host Bindings**: Define in `host: { }` on `@Component` (e.g., `'[class.active]': 'isActive()'`) — never use @HostBinding/@HostListener.
- **View Encapsulation**: Default `Emulated`. Use `None` carefully.
## Signals & Change Detection
- **OnPush**: ALWAYS use `ChangeDetectionStrategy.OnPush`. No exceptions.
- **Signal Inputs**: Use `input.required<T>()` or `input<T>()` instead of `@Input()`. Access as functions: `{{ userId() }}`. Use `booleanAttribute`/`numberAttribute` transforms.
- **Signal Outputs**: Use `output<T>()` (v17.3+) instead of `@Output() EventEmitter`. For two-way binding use `model()`.
- **State**: `signal()` for local state, `computed()` for derived state, `effect()` only for side effects.
- **Cleanup**: Use `toSignal()` (auto-unsubscribes), `takeUntilDestroyed()`, or `DestroyRef`. Never `subscribe()` without cleanup.
## Control Flow
- Use `@if (condition)`, `@for (item of items; track item.id)`, `@switch`, `@empty { }` instead of `*ngIf`/`*ngFor`.
## Anti-Patterns
- **No default change detection**: OnPush only — default re-checks every component on every event.
- **No functions in templates**: `{{ calculate() }}` re-evaluates every cycle → use `computed()`.
- **No manual subscribe**: Use `async` pipe or `toSignal`. Never `subscribe()` in ngOnInit without cleanup.
- **No ElementRef mutation**: Use Directives or Renderer2.
- **No class inheritance**: Compose with Directives and Services.
## References
- [Standalone Pattern](references/standalone-pattern.md)
- [Control Flow](references/control-flow.md)Related Skills
react-native-components
Build modern React Native components using function components and composition. Use when building or refactoring React Native function components and composable UI. (triggers: **/*.tsx, **/*.jsx, component, props, children, composition, presentational, container)
nextjs-server-components
Build async React Server Components and place 'use client' boundaries at leaf nodes for interactivity in Next.js App Router. Use when deciding RSC vs Client Component, composing server data into client wrappers, or fixing hydration errors. (triggers: app/**/*.tsx, src/app/**/*.tsx, app/**/*.jsx, src/app/**/*.jsx, use client, Server Component, Client Component, hydration)
angular-tooling
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
angular-style-guide
Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, angular-style-guide)
angular-state-management
Implement application state with Angular Signals, computed derivations, and NgRx Signal Store. Use when implementing reactive state with signal(), computed(), effect(), or @ngrx/signals in Angular. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)
angular-ssr
Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching. (triggers: **/*.server.ts, server.ts, hydration, transferState, afterNextRender, isPlatformServer, RenderMode)
angular-security
Harden Angular apps against XSS, CSP violations, and unauthorized access. Use when implementing XSS protection, Content Security Policy, or auth guards in Angular. (triggers: DomSanitizer, innerHTML, bypassSecurityTrust, CSP, angular security, route guard)
angular-rxjs-interop
Bridge Observables and Signals using toSignal and toObservable in Angular. Use when converting between RxJS Observables and Angular Signals. (triggers: toSignal, toObservable, takeUntilDestroyed, rxjs angular)
angular-routing
Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers. (triggers: *.routes.ts, angular router, loadComponent, canActivate, resolver)
angular-performance
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)
angular-http-client
Integrate HttpClient, Interceptors, and API interactions in Angular. Use when integrating HttpClient, writing interceptors, or handling API calls in Angular. (triggers: **/*.service.ts, **/*.interceptor.ts, HttpClient, HttpInterceptorFn, withInterceptors, httpResource, resource)