Angular has long been renowned for its powerful change detection mechanics, but recent developments have added a fresh new concept: Signals. If you’re familiar with state management in modern front-end frameworks, you might recognize the potential here for better reactivity and finer-grained performance tuning. In this article, we’ll explore what Angular Signals are, their role in Angular’s reactive change detection, and practical ways to incorporate them into your projects.

---

What are Angular Signals?

Signals are a new reactive primitive introduced in Angular to track and respond to mutations in local state. Where Observables are broad, push-based event streams, Signals offer a more direct, synchronous way to express and observe state changes. Think of a Signal as a value that, when read in a template or computation, automatically establishes a dependency. When the Signal changes, Angular knows exactly which consumer needs to update.

Why Use Signals?

• Performance: Signals enable more granular change detection, only updating what is necessary.
• Simplicity: Their synchronous nature makes them easier to reason about in many cases compared to Observables.
• Integration: Signals work seamlessly with Angular’s zone-less and fine-grained reactivity strategies.

Defining and Using Signals

Here’s a straightforward example:

import { signal, effect } from '@angular/core';

const counter = signal(0);

// React to signal changes
const dispose = effect(() => {
  console.log(`Counter updated: ${counter()}`);
});

counter.set(1); // Logs: Counter updated: 1
counter.update(n => n + 1); // Logs: Counter updated: 2

In Angular components, you might see Signals used like this:

@Component({
  selector: 'app-counter',
  template: `Current count: {{ count() }}\n<button (click)="increment()">Increment</button>`
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

Notice how the count() Signal is referenced directly in the template, creating a reactive connection.

Converting Between Signals and Observables

There are cases when you’ll need to bridge Signals and Observables. Angular provides helper functions, including toSignal() and toObservable().

import { toSignal, toObservable } from '@angular/core';

const my$ = toObservable(mySignal);
const mySignal = toSignal(myObservable);

This makes it easy to integrate Signals with existing libraries or Angular services that rely on RxJS.

Best Practices and Caveats

• Encapsulate your Signals in services to provide shared state across components.
• Use effect to create side effects that should run in response to Signal updates.
• Remember that Signals are synchronous; don’t use them for asynchronous event streams (stick with Observables for that!).

---

Conclusion

Angular Signals provide a modern, highly-performant alternative for local state reactivity in Angular applications. Whether you’re optimizing for performance or seeking simpler state management, Signals empower developers with finer control and better mental models. If you’re working on a new project or refactoring an existing one, give Signals a try—you might be surprised how much they streamline your code!

---

Happy coding! If you have thoughts or questions about Signals, feel free to discuss below or reach out to me directly.

— Angus