Signals in Angular: A New Reactive Approach

Angular has introduced Signals to enhance its reactivity model, making state management more predictable and efficient. Unlike traditional methods like RxJS Observables and Change Detection, signals offer a declarative way to track state changes and optimize component rendering.

---

What are Signals?

Signals are a new way to manage state in Angular. They provide a reactive primitive that allows Angular to track state changes efficiently, reducing unnecessary re-renders and improving performance.

Benefits of Signals:

• Fine-Grained Reactivity: Components update only when the signal they depend on changes.
• Predictability: No need for manual subscriptions like in RxJS.
• Performance Optimization: Reduces the workload on Angular's change detection mechanism.
• Better Debugging: Signals make it clear which part of the state is changing and why.

---

How to Use Signals in Angular

To use signals in Angular, you need to import and work with them inside your components or services.

1. Creating a Signal

A signal holds a reactive value and can be used directly in templates.

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

export class CounterComponent {
  count = signal(0); // Creating a signal with an initial value

  increment() {
    this.count.set(this.count() + 1); // Updating the signal value
  }
}

2. Using Signals in Templates

You can bind a signal directly in the template without requiring additional change detection mechanisms.

<p>Count: {{ count() }}</p>
<button (click)="increment()">Increment</button>

Here, count() retrieves the current value of the signal.

---

Working with Effects

Signals allow tracking dependencies automatically. We can use effects to trigger actions when signals change.

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

export class LoggerComponent {
  message = signal('Hello');

  constructor() {
    effect(() => {
      console.log('Message changed:', this.message());
    });
  }

  updateMessage() {
    this.message.set('Hello Angular Signals!');
  }
}

Here, effect automatically reacts whenever message updates.

---

Derived Signals

Derived signals allow computing values based on other signals.

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

export class PriceComponent {
  price = signal(100);
  tax = signal(0.2);

  totalPrice = computed(() => this.price() * (1 + this.tax()));
}

The computed function ensures that totalPrice updates automatically whenever price or tax changes.

---

Mutating Objects Inside Signals

For objects, Angular provides update() and mutate() methods to modify signal values efficiently.

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

export class UserComponent {
  user = signal({ name: 'John', age: 25 });

  updateAge() {
    this.user.update(user => ({ ...user, age: user.age + 1 }));
  }
}

Or using mutate() for direct changes:

this.user.mutate(user => { user.age += 1; });

---

Comparing Signals and RxJS Observables

Feature	Signals	RxJS Observables
Syntax	Simple function calls	Requires subscribe() and unsubscribe()
Performance	Optimized for fine-grained reactivity	Uses push-based reactivity
Change Detection	Updates only affected components	Requires manual optimizations
Learning Curve	Easy for beginners	Requires understanding of RxJS concepts

---

Conclusion

Signals introduce a lightweight and efficient alternative to RxJS for managing state in Angular applications. They simplify reactivity, reduce performance overhead, and make debugging easier. While RxJS remains powerful for complex asynchronous operations, signals provide an intuitive approach for local state management.

Angular Signals are still evolving, but they are a game-changer for state management and performance in Angular applications. 🚀

---

Do you have any questions ? Let me know in the comments! 😊