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 হয়ে গেছে।
পার্থক্যটা কোথায়?
| ধরন | Reactive? | আপডেট হয়? | আউটপুট |
|---|---|---|---|
| সাধারণ ভ্যারিয়েবল | না | না | 30 |
| Signal + Computed | হ্যাঁ | হয় | 30 → 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
JOYDIP PAUL | Sciencx (2025-10-26T15:20:59+00:00) Understanding Angular Signals with Real Examples (বাংলায় সহজভাবে). Retrieved from https://www.scien.cx/2025/10/26/understanding-angular-signals-with-real-examples-%e0%a6%ac%e0%a6%be%e0%a6%82%e0%a6%b2%e0%a6%be%e0%a6%af%e0%a6%bc-%e0%a6%b8%e0%a6%b9%e0%a6%9c%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.