Overview of Angular Signals

🔔 Angular Core Signals Overview

Angular Signals is a new reactivity system in Angular designed to optimize how an application tracks and responds to state changes. Signals simplify how state updates propagate and allow Angular to minimize unnecessary re-renders by targeting only the components or views that actually depend on the changed data.

🛠️ What is a Signal?

A signal is a lightweight reactive wrapper around a value. It notifies any interested consumer (such as templates or computed functions) whenever its value changes. This allows Angular to automatically and efficiently track dependencies in your application.

📌 Types of Signals

• Writable Signals: Can be updated directly. You create them using the signal() function:

  const counter = signal(0); // Initial value 0
  counter.set(3);            // Set to 3
  counter.update(value => value + 1); // Increment

• Read-only Signals: Expose only a getter and cannot be modified directly from outside.

• Computed Signals: A special type of signal whose value is derived (computed) from other signals. Whenever the dependencies change, the computed signal is reactively updated.
  

  import { computed } from '@angular/core';
  const doubled = computed(() => count() * 2); // This recalculates whenever `count` changes
  

⚙️ How Signals Work

• Dependency Tracking: When a signal's getter is invoked in a reactive context (such as an Angular template), Angular registers this context as a dependent. Whenever the signal's value changes, Angular knows exactly which parts of the UI or application logic need to be updated.

• Equality Checking: You can provide an equality comparator when creating a signal. If the comparator determines that a new value is equal to the current value, Angular will not propagate the change, minimizing unnecessary work.

🔍 Usage Example

Here's a simple example of a counter component using signals:

@Component({
  selector: "app",
  template: `
    <h1>Current value of the counter {{ counter() }}</h1>
    <button (click)="increment()">Increment</button>
  `
})
export class AppComponent {
  counter = signal(0);

  increment() {
    this.counter.set(this.counter() + 1);
  }
}

In this example, the UI is automatically and efficiently updated only when the counter signal changes, without the need for manual input tracking or complex change detection logic.

🚀 Advantages of Signals in Angular

• Fine-grained Reactivity: Only parts of the UI directly dependent on changed signals are re-rendered.
• Declarative State Management: Code becomes clearer and more predictable.
• Performance: Reduces unnecessary DOM updates and change detection cycles.
• Explicit Dependency Declaration: Signals are automatically tracked in reactive contexts.

Summary Table

Primitive	Purpose	How it's used
signal	Holds a writable or read-only value	const s = signal(initialValue)
computed	Derives value from other signals	const c = computed(() => s() * 2)
effect	Responds to changes in one or more signals	effect(() => doSomething(s()))