Angular Signals and Effects

Angular changed how it handles reactivity. You no longer need Zone.js to detect every small change. Signals allow Angular to update only the specific parts of the UI that change. This makes your apps faster and enables zoneless mode.

What are Signals?

A signal is a container for a reactive value. When the value changes, Angular knows exactly which parts of the template to update.

  • signal(): Creates a new signal. Use .set() to replace a value or .update() to change a value based on the current one.
  • computed(): Creates a read-only signal. It derives its value from other signals. Angular calculates this only when you read it and caches the result.
  • effect(): Runs code when a signal changes. Use this for side effects like logging or manual DOM changes.

When to use Signals vs RxJS

You do not need to choose one. You should use both for different tasks.

Use Signals for:

  • Holding UI state.
  • Driving template rendering.
  • Replacing @Input() and @Output().
  • Working in zoneless apps.

Use RxJS for:

  • Handling async streams like HTTP or WebSockets.
  • Complex logic like debouncing or switching streams.
  • Combining multiple event sequences.

You can bridge them using rxjs-interop:

  • toSignal(): Converts an Observable into a Signal.
  • toObservable(): Converts a Signal into an Observable.

New Decorator-Free APIs

Angular 17+ introduced new ways to handle data flow without using decorators.

  • input(): A read-only signal for data coming from a parent.
  • model(): A writable signal for two-way binding. It replaces the old @Input() and @Output() pattern.
  • output(): A way to emit events from a child to a parent. It is not a signal, but it simplifies your code.

Why this is better than React

If you know React, the concepts are similar but the execution is different.

  • Automatic Tracking: In React, you must list dependencies in an array. In Angular, the system tracks which signals you use automatically. You cannot forget a dependency.
  • Precision Updates: React often re-renders whole components. Angular signals update only the specific DOM nodes that depend on the value.
  • No Stale Closures: Signals always provide the current value when you call them.

Source: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn