Why signals are introduced in Angular - The Real Reasons

The Big Idea

Discover how signals make your app smarter and your code simpler!

The Scenario

Imagine building a web app where you manually track every change in data and update the UI yourself.

For example, when a user clicks a button, you have to write code to find the right parts of the page and change them.

The Problem

This manual tracking is slow and easy to mess up.

You might forget to update some parts, causing the UI to show old or wrong information.

It also makes your code complicated and hard to maintain as the app grows.

The Solution

Signals let Angular automatically watch for changes in data and update the UI efficiently.

They act like smart flags that tell Angular exactly what changed, so only those parts update.

Before vs After

✗ Before

let count = 0;
function increment() {
  count++;
  document.getElementById('count').textContent = count;
}

✓ After

import { signal } from '@angular/core';
const count = signal(0);
function increment() {
  count.set(count() + 1);
}
// Angular updates UI automatically

What It Enables

Signals enable smooth, automatic UI updates with less code and fewer bugs.

Real Life Example

Think of a live chat app where new messages appear instantly without you writing complex update code.

Key Takeaways

Manual UI updates are slow and error-prone.

Signals track changes automatically and efficiently.

This makes apps faster, simpler, and easier to maintain.