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

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