Understanding Angular Signals with Real Examples (বাংলায় সহজভাবে)

This content originally appeared on DEV Community and was authored by JOYDIP PAUL

Angular 16+ এ এসেছে Signals — একদম নতুন reactive concept। এই ব্লগে সহজ বাংলায় দেখানো হয়েছে Signals কীভাবে কাজ করে, কেন দরকার, আর কিভাবে তুমি তোমার কোডে reactive behavior আনতে পারো।

Angular Signals vs Normal Variables — পার্থক্যটা আসলে কোথায়?

Angular 16 থেকে শুরু করে একটা নতুন reactive concept এসেছে — Signal।
অনেকে ভাবে, “আরে ভাই, এটা তো আরেকটা state variable, নতুন কিছুর দরকার কী?”
কিন্তু একবার কোডে ঢুকলেই বোঝা যায় — Signal আসলে একেবারে অন্য লেভেলের জিনিস।

একটা সিম্পল উদাহরণ

constructor() {
  this.withOutSignal();
  this.withSignal();
}

withOutSignal() {
  let x = 10;
  let y = 20;
  let z = x + y;
  console.log('[Normal] Initial Sum:', z);

  x = 15;
  console.log('[Normal] After Change:', z);
}

withSignal() {
  const x = signal(10);
  const y = signal(20);
  const z = computed(() => x() + y());

  console.log('⚡ [Signal] Initial Sum:', z());

  x.set(150);
  console.log('⚡ [Signal] After Change:', z());
}

Output:

[Normal] Initial Sum: 30
[Normal] After Change: 30
[Signal] Initial Sum: 30
[Signal] After Change: 170

এখানে প্রথমটা (withOutSignal) তে x এর মান পাল্টালেও z আপডেট হচ্ছে না।
কিন্তু দ্বিতীয়টা (withSignal) তে Signal ব্যবহার করায় x এর মান বদলাতেই z রিয়েল টাইমে 170 হয়ে গেছে।

পার্থক্যটা কোথায়?

Signal হলো “reactive variable” — মানে, একে Angular ট্র্যাক করে রাখে।
যখনই signal-এর মান বদলাবে, সেটার ওপর নির্ভর করা সব জায়গায় মান আপডেট হবে।
আর computed() মানে হচ্ছে “যে ভ্যারিয়েবলটা অন্য signal গুলোর উপর নির্ভর করে”।

Real-Life Example: Add to Cart

ধরো তুমি একটা eCommerce অ্যাপ বানাচ্ছো।
Signal ছাড়া আমরা সাধারণত এমন করি

let cartItems = 0;

function addToCart() {
  cartItems++;
  console.log('Items in cart:', cartItems);
}

addToCart(); // 1
addToCart(); // 2

এখানে cartItems সাধারণ ভ্যারিয়েবল — ঠিকই কাজ করছে,
কিন্তু Angular এটাকে reactive ভাবে ট্র্যাক করছে না।

এখন যদি Signal ব্যবহার করি

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

const cart = signal(0);
const pricePerItem = 500;
const totalPrice = computed(() => cart() * pricePerItem);

// Automatically log when cart updates
effect(() => {
  console.log(`Items: ${cart()}, Total: ${totalPrice()}৳`);
});

function addToCart() {
  cart.update(c => c + 1);
}

addToCart(); // Items: 1, Total: 500৳
addToCart(); // Items: 2, Total: 1000৳
addToCart(); // Items: 3, Total: 1500৳

এখানে effect() ব্যবহার করার ফলে কনসোলে নিজে থেকেই cart count আর total price আপডেট হয়ে প্রিন্ট হচ্ছে — কোনো manual console.log() লাগছে না!

Signal মানে হলো জীবন্ত ভ্যারিয়েবল — মান বদলালে, তার ওপর নির্ভর করা সব জায়গা নিজে থেকেই বদলে যায়।

Written by: Joydip Paul
Web Developer

This content originally appeared on DEV Community and was authored by JOYDIP PAUL