Agent-skills-standard angular-components

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. (triggers: **/*.component.ts, **/*.component.html, angular component, standalone, input signal, output, @if, @for, ChangeDetectionStrategy, OnPush, Input, Output)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/angular/angular-components" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-angular-components && rm -rf "$T"

manifest: skills/angular/angular-components/SKILL.md

source content

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>()

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.