angular-components

---
name: angular-components
description: 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.
metadata:
  triggers:
    files:
    - '**/*.component.ts'
    - '**/*.component.html'
    keywords:
    - angular component
    - standalone
    - input signal
    - output
    - "@if"
    - "@for"
    - ChangeDetectionStrategy
    - OnPush
    - Input
    - Output
---
# Angular Components

## **Priority: P0 (CRITICAL)**

## Standalone & Structure

- **Standalone**: `standalone: true`. Import all deps in `imports` array. No NgModule. (Angular 20+: standalone default.)
- **Smart/Dumb Split**: **Smart (Container)** → inject services, manage state. **Presentational (Dumb)** → accept inputs and emit events via outputs only; no service dependencies.
- **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**: `input.required<T>()` or `input<T>()` not `@Input()`. Access as functions: `{{ userId() }}`. Use `booleanAttribute`/`numberAttribute` transforms.
- **Signal Outputs**: `output<T>()` (v17.3+) not `@Output() EventEmitter`. Two-way binding: `model()`.
- **State**: `signal()` local, `computed()` derived, `effect()` side effects only.
- **Cleanup**: `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` (new control flow syntax, Angular 17+).

## Anti-Patterns

- **No default CD**: OnPush only — default re-checks every component every event.
- **No functions in templates**: `{{ calculate() }}` re-evaluates every cycle → `computed()` instead.
- **No manual subscribe**: `async` pipe or `toSignal`. Never `subscribe()` without cleanup.
- **No ElementRef mutation**: Directives or Renderer2.
- **No class inheritance**: Compose with Directives and Services.

## References

- [Standalone Pattern](references/standalone-pattern.md)
- [Control Flow](references/control-flow.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- @empty { }
- Never use @HostBinding
- Signal inputs
- inputs and emit events via outputs

- Additional task-grounded exact anchors: @if (condition); @for (item of items; track item.id); booleanAttribute; model(); Smart (Container); toSignal()

• SKILL.md 3 KB
• evals/evals.json 5 KB
• references/control-flow.md 1 KB
• references/standalone-pattern.md 1 KB