Standards for Standalone Components, Signals inputs, and Control Flow. Use when building standalone Angular components or implementing @if/@for control flow. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for)
Installs into .claude/skills of the current project.
Are you the author of Angular Components?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/comeonoliver-angular-components)
---
name: angular-components
description: 'Standards for Standalone Components, Signals inputs, and Control Flow. Use when building standalone Angular components or implementing @if/@for control flow. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for)'
---
# Angular Components
## **Priority: P0 (CRITICAL)**
## Principles
- **Standalone**: `standalone: true`. **Import all dependencies directly** in `imports` array. **Do not declare in NgModule**. (Angular 20+: standalone is the default — `standalone: true` is not needed.) Use `ng generate c` to scaffold automatically.
- **Signal Inputs**: Use `input()` and **input.required<T>()** instead of `@Input()`. Use **booleanAttribute** or `numberAttribute` transforms where applicable (e.g., `input(false, { transform: booleanAttribute })`). Access value as a function: **this.disabled()**.
- **Signal Outputs**: Use **output<T>()** (from v17.3+) instead of `@Output() EventEmitter`. Emit with: **this.selected.emit(value)**. For two-way binding use **model()** which creates a writable signal.
- **Control Flow**: Use **@if (condition)**, **@for (item of items; track item.id)**, **@switch**, and **@empty { }** blocks inside @for for empty state instead of `*ngIf`, `*ngFor`.
- **Host Bindings**: Define in the **host: { }** object on `@Component` (e.g., `'[class.active]': 'isActive()'`, `'(click)': 'onClick()'`) — **Never use @HostBinding or @HostListener decorators**.
- **View Encapsulation**: Default `Emulated`. Use `None` carefully.
## Signals Integration
- Use **computed()** for derived state and display values.
- Use `effect()` strictly for side effects (logging, manual DOM manipulation), NEVER for state propagation.
- **Avoid logic in templates** — move to `computed()` or component methods. Set **ChangeDetectionStrategy.OnPush**.
## Anti-Patterns
- **No logic in template**: Replace with `computed()` signals or component method calls.
- **No ElementRef mutation**: Encapsulate DOM changes in a Directive or use Renderer2.
- **No class inheritance**: Compose behavior using Directives and Services instead.
## References
- [Standalone Pattern](references/standalone-pattern.md)
- [Control Flow](references/control-flow.md)
