angular-components

name	angular-components
description	Use when writing or editing an Angular component in this workspace — presentational (ui) or container components. Covers the clean component rules: dumb ui components, thin containers, and where logic must not go.

Angular components — dumb ui, thin containers, logic in stores

Components hold no logic. They bind signals and forward events. Every decision — data shaping, calculations, navigation, add versus update — lives in a store (see the state-management skill), never in a component class or template.

Presentational (*/ui) components

Dumb by construction:

• standalone, ChangeDetectionStrategy.OnPush.
• Inputs via input() / input.required(), outputs via output(). No @Input/@Output decorators.
• No injected store and no data services. A ui component depends only on its inputs and emits via its outputs. SingleDogComponent (dog in, dogDeleted out) and DogRateComponent (currentDog in, rated/skipped out) are the reference dumb components.
• No data fetching, and no derivations beyond trivial display formatting (use pipes like DecimalPipe / DatePipe in the template rather than computing in the class).
• Reactive forms live here (the form is UI), but the submit payload is emitted via an output() — the container store decides what to do with it. Reference: DogFormComponent.

Container (*/feature) components

Thin wiring only:

• standalone, OnPush, inject() (never constructor injection).
• Inject exactly one local store (provided via providers: [XStore] on the component), bind its signals into the template, and forward child outputs to store methods or events. Reference: MyDogsComponent, MainDogComponent, DogDetailComponent, AddDogComponent.
• No logic in the class or template beyond binding inputs and forwarding events.
• A container may pass a route input signal into an rxMethod (that is what rxMethod is for), but the store keeps the resolved plain value, never the signal. DogDetailComponent binds the route param with dogId = input('') and calls store.loadSingleDogIfNotLoaded(this.dogId); DogDetailsStore stores dogId: string | null.

Forms

A form is UI, so it lives entirely in the presentational component; what happens after submit is store work. The form and the store never reference each other.

• The */ui form component owns the whole form. The workspace uses signal forms (form() from @angular/forms/signals): the form model, its validators, the photo handling, and the submit guard all live in the ui component. On a valid submit it emits the payload via an output() and does nothing else. It imports domain models only — never a store or a service. Reference: DogFormComponent, which emits an AddedDogPayload through its dogAdded output.
• The container store handles the result: persistence (delegating to DogsStore), the success notification, and navigation. Reference: AddDogStore.addDogWithPicture, wired up by AddDogComponent.
• They communicate only through the form component's input() (value in) and output() (submit payload out). The store does not know the form exists; the form does not know a store exists.

Everywhere

• @if / @for (never *ngIf / *ngFor).
• No subscribe() in components.
• null, never undefined, for optional inputs (input<T | null>(null)).
• No comments that restate what the code does.

The dogs feature is the reference example. See also the state-management and angular-signals skills.