components

---

name: Components description: Standards for Standalone Components, Signals inputs, and Control Flow. metadata: labels: [angular, components, standalone, signals, control-flow] triggers: files: ['/*.component.ts', '/*.html'] keywords: [angular component, standalone, input signal, output, @if, @for]

Angular Components

Priority: P0 (CRITICAL)

Principles

• Standalone: standalone: true. Import dependencies directly in imports array.
• Signal Inputs: Use input() and input.required() instead of @Input().
• Signal Outputs: Use output() (from v17.3+) instead of @Output() EventEmitter.
• Control Flow: Use @if, @for, @switch block syntax instead of *ngIf, *ngFor.
• View Encapsulation: Default Emulated. Use None carefully.

Signals Integration

• Use computed() for derived state.
• Use effect() strictly for side effects (logging, manual DOM manipulation), NEVER for state propagation.

Anti-Patterns

• Complex Logic in Template: Call a method or use a computed signal.
• Direct DOM Access: Avoid ElementRef.nativeElement modification. Use Directives or Renderer2.
• Component Inheritance: Prefer Composition (Directives, Services) over Class Inheritance.

References

• Standalone Pattern
• Control Flow