# Components

> - Standalone: standalone: true. Import dependencies directly in imports array.

- Skill: `majiayu000/components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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](references/standalone-pattern.md)
- [Control Flow](references/control-flow.md)