angular-components

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
• Control Flow

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