angular-frontend-patterns

Use signal() for writable component state, computed() for derived read-only values, and input()/output() for component communication. Update signals with set() to replace values or update() to transform based on the current value.

Use signals for synchronous UI state, component inputs, and form values. Keep observables for continuous event streams like WebSockets, and convert HTTP responses to signals with toSignal() for template consumption.

Use toSignal() from @angular/core/rxjs-interop with an initialValue option. Combine with RxJS operators like debounceTime, switchMap, and catchError before conversion to handle loading and error states.

Effects cannot write to signals by default and doing so is an anti-pattern. Use computed() for derived state instead; reserve effect() for logging, localStorage sync, DOM manipulation, and third-party library integration.

Smart container components inject services, manage state, and handle routing, while dumb presentational components use OnPush change detection, receive data via input() signals, and emit user actions via output(). Dumb components never inject services or the router.

Convert the search term signal to an observable with toObservable(), apply debounceTime and distinctUntilChanged, switchMap to the search service call, then convert back with toSignal(). This avoids writing signals inside effects.