An Angular effect is a reactive callback for work outside ordinary state-to-template rendering. It tracks the signals read in its callback and reruns when those dependencies change, making it suitable for synchronizing reactive state with external systems rather than deriving another value. section 6.5.1 section 6.5.3
Effects run asynchronously. Multiple writes to a watched signal during one execution are coalesced so the callback observes and handles only the final value. Unlike computed signals, effects are eager and participate in Angular UI refresh and change detection. section 6.5.1 section 7.7
Use an effect when a signal change must drive an external action:
- Persist state to localStorage, session storage, cookies, or IndexedDB. section 6.5.3
- Call imperative APIs, such as disabling a reactive FormControl from signal state. section 6.5.3
- Perform DOM-adjacent work unavailable through template syntax, such as setting the browser title through Title. section 6.5.3
- Replace an RxJS tap side effect when migrating synchronous state held in BehaviorSubjects or subject-based services. section 7.4.1
Register effects where Angular has an injection context, such as a component constructor, so Angular can destroy them with the component. To create one elsewhere, pass an Injector. Store the returned reference when work must stop earlier, then call destroy(). section 6.5.2 section 6.5.2
Do not normally write to signals inside an effect: Angular prohibits it by default. Although allowSignalWrites can permit it, a signal that merely depends on another should generally be modeled with computed instead. section 6.5.2
Persisting a selected request type
Read selectedType inside an effect and write it to localStorage whenever it changes. Initialize the signal from stored data so a returning user resumes the previous selection. section 6.5.1
Listing 6.7 Saving state to localStorage with an effect
constructor() {
effect(() => {
localStorage.setItem('selectedType', this.selectedType());
});
}
This listing shows a minimal effect that persists the latest selected request type to localStorage. section 6.5.1
