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

[Sascha]

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:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Web Developer

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.