Angular computed and effect

What is computed and effect in Angular?

computed derives a cached read-only signal from other signals. effect runs arbitrary code whenever the signals it reads change, which makes it the bridge between signal state and the outside world.

computed and effect example

city = signal('All');
jobs = signal<Job[]>([]);

// derived — recomputed only when city or jobs change
visible = computed(() =>
  this.city() === 'All' ? this.jobs() : this.jobs().filter(j => j.city === this.city())
);

// side effect — persist the choice
constructor() {
  effect(() => localStorage.setItem('city', this.city()));
}

Key points to remember

• Dependencies are tracked automatically — there is no dependency array to maintain.
• A computed signal is read-only; you cannot set it.
• effect must be created in an injection context, or be given an Injector.
• Effects are cleaned up automatically when their component is destroyed.

Common mistakes with computed and effect

• Setting a signal inside an effect, which can create a loop — Angular warns about this.
• Using effect for derived values that computed handles more cheaply.