Angular Signals — Simple Guide with Examples

Angular introduced Signals as a new way to manage state and reactivity. Instead of manually handling change detection or using RxJS everywhere, signals make things simpler, faster, and more predictable.

🔹 What is a Signal?

A signal is a reactive variable that holds a value and notifies Angular when it changes.Example:

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

    const count = signal(0);
    // Read value
    console.log(count()); // 0
    // Update value
    count.set(1);
    // Update based on previous value
    count.update(value => value + 1);
    

👉 Think of it like a smart variable that automatically tracks changes.

🔹 What is computed?

A computed signal derives its value from other signals.

• It is read-only
• Automatically updates when dependencies change

Example:

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

price.set(200);
console.log(total()); // 400 (auto updated)

👉 You don’t manually update total — Angular does it for you.

Get Meherdip’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🔹 What is effect?

An effect runs a function whenever a signal it depends on changes.

• Used for side effects
• Not for storing values

Example:

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

const count = signal(0);

effect(() => {
  console.log('Count changed:', count());
});

count.set(1);
// Output: Count changed: 1

👉 It reacts to changes and performs actions like logging, API calls, etc.

🔁 Real-World Example (All Together)

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

const price = signal(500);
const discount = signal(10);
// computed value
const finalPrice = computed(() => {
  return price() - (price() * discount() / 100);
});
// effect
effect(() => {
  console.log('Final price is:', finalPrice());
});
// update values
price.set(1000);
discount.set(20);

👉 Output updates automatically whenever price or discount changes.

🧠 When to Use What?

• Use signal → when you need to store data
• Use computed → when you need calculated values
• Use effect → when you need to react (like side effects)

Thanks for reading! 🙌

Happy to share and learn together as we explore modern Angular concepts like Signals.

About the author:
Meherdip Dhokane
LinkedIn: https://www.linkedin.com/in/meherdip