So before diving into signals, let’s understand what state is.

In simple terms, state is just the current data or information your application is working with at any given time.

For example:

In a shopping cart, the items you add or remove are part of the state.
In a chat app, the messages you send and receive are part of the state.
In a dashboard, the data displayed in charts and tables is the state.

Whenever the state changes, the UI needs to update to reflect the new data. This is where reactivity comes in — it helps keep the UI in sync with the latest state automatically! 🚀

🚀 Why Do We Need Signals?

Traditional Angular state management relies on Change Detection, which can sometimes lead to unnecessary re-renders.

✅ Signals only update the UI when needed, avoiding performance bottlenecks.

✅ No need for RxJS for local state management, making code easier to read and maintain.

✅ Automatic dependency tracking, meaning Angular knows exactly what to update and when.

Let’s understand how signal works behind of scenes

In modern web applications, ensuring efficient UI updates is crucial for performance.

Traditionally, frameworks like Angular, React, and Vue rely on reactivity to automatically update the UI when data changes.

However, not all reactivity systems are equally efficient.

Angular 16 introduces Signals, a new way of managing states with fine-grained reactivity.

This approach optimizes performance by updating only the parts of the UI that need changes — rather than re-rendering entire components.

But before we dive into what Angular Signals are, let’s first understand:

✅ What is Reactivity?

✅ What is Fine-Grained Reactivity?

1. What is Reactivity?

Reactivity is the ability of a system to automatically update the UI when the underlying data changes.

🔴 Problem Without Reactivity (Manual Updates)

Imagine a counter that increases when a button is clicked. In a non-reactive approach, we must manually update the UI every time the data changes.

<p id="count">0</p>
<button onclick="increment()">Increment</button>

<script>
  let count = 0;

  function increment() {
    count++;
    document.getElementById("count").innerText = count;  // Manually updating UI
  }
</script>

🔹 Issues:

❌ Manual updates: We must explicitly modify the DOM.
❌ Hard to maintain: If multiple UI elements depend oncount, we must update all of them manually.
❌ Performance issues: Frequent DOM updates slow down the UI.

🟢 Reactive Solution (Automatic Updates)

A reactive system tracks dependencies and updates the UI automatically when the data changes.

Example using React’s useState (Reactive Approach):

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

✅ No manual UI updates!

✅ The UI reacts to changes in state automatically.

2. What is Fine-Grained Reactivity?

Now that we understand reactivity, let’s go deeper into fine-grained reactivity — which is what makes Angular Signals so powerful.

🔴 Problem: Coarse-Grained Reactivity

Most reactive frameworks re-render entire components when data changes, even if only a small part of the UI needs updating.

Example in React:

function Profile({ user }) {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

If user.name changes, the entire Profile component re-renders—even though user.age hasn’t changed!

🔹 This is inefficient. It would be better if only the changed part of the UI updates.

🟢 Solution: Fine-grained reactivity

Fine-grained reactivity tracks individual state changes and updates only the affected parts of the UI.

✅ Instead of re-rendering the entire component, fine-grained reactivity updates just the necessary DOM elements.

✅ This is exactly how Angular Signals work!

Example with Angular Signals (Fine-Grained Reactivity in Action):

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

export class AppComponent {
  name = signal('Alice');
  age = signal(25);
}

Now, if the name changes, only the UI elements depend on the name update—age remains untouched! 🚀

What are Angular Signals?

Angular Signals is a new reactive state management feature introduced in Angular 16.

They help manage UI state efficiently without needing RxJS or complex change detection strategies.

Angular Signals bring a fine-grained reactivity system, meaning they track exactly what needs to be updated instead of re-rendering entire components.

Example of a Signal:

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

export class AppComponent {
  count = signal(0);

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

✅ signal(0) creates a reactive variable.

✅ this.count() reads the current value.

✅ this.count.set(value) updates the value, triggering UI updates automatically.

How do Signals work Under the Hood?

Angular internally tracks dependencies and updates the UI only where needed. Let’s break it down step by step.

Step 1: Signals Store Values

Each Signal holds a private value internally, similar to how a normal variable stores data.

class Signal<T> {
  private value: T;

  constructor(initialValue: T) {
    this.value = initialValue;
  }
}

🔹This class stores data just like a normal variable but with reactivity built-in.

Step 2: Signals Track Dependencies

Whenever a Signal is accessed inside a function or UI component, Angular registers it as a dependency.

class Signal<T> {
  private value: T;
  private subscribers = new Set<() => void>(); // Stores UI elements that use this Signal

  constructor(initialValue: T) {
    this.value = initialValue;
  }

  get() {
    if (currentSubscriber) {
      this.subscribers.add(currentSubscriber);
    }
    return this.value;
  }
}

🔹 If a Signal is used inside a function or UI, Angular stores that function as a subscriber.

🔹 This ensures that only specific UI parts update when the Signal changes.

Step 3: Signals Notify Only Affected Elements

When a Signal’s value changes, it notifies only its subscribers instead of triggering a full re-render.

class Signal<T> {
  private value: T;
  private subscribers = new Set<() => void>();

  constructor(initialValue: T) {
    this.value = initialValue;
  }

  get() {
    if (currentSubscriber) {
      this.subscribers.add(currentSubscriber);
    }
    return this.value;
  }

  set(newValue: T) {
    if (this.value !== newValue) {
      this.value = newValue;
      this.subscribers.forEach(subscriber => subscriber());
    }
  }
}

🔹 Only UI elements that depend on the Signal will update.

🔹 No unnecessary re-renders like traditional Change Detection.

Why Are Signals Faster?

Angular Signals improve performance by reducing unnecessary updates.

Traditional Change Detection:

Runs for the entire component tree.
Can cause unnecessary re-renders.

Signals:

Track dependencies automatically.
Update only the affected parts of the UI.
No need to manually trigger Change Detection.

When to Use Signals?

✅ Local state management: Ideal for managing UI-specific state.

✅ Form Handling: Great for tracking form inputs and validation.

✅ Component Communication: A simpler alternative to @Input() and @Output().

✅ Reactive Calculations: Use computed() for real-time updates.

✅ Side Effects: effect() handles API calls and logging automatically.

🎯 Final Thoughts

✅ Angular Signals bring fine-grained reactivity to Angular.

✅ They replace Change Detection and eliminate unnecessary updates.

✅ They work seamlessly inside components without requiring complex RxJS logic.

If you’re using Angular 16+, Signals should be your go-to solution for managing UI state efficiently!

***Buy me a coffee — https://buymeacoffee.com/rajpuramohm***

Angular Signal — Behind the Scenes

Table of contents