LogicLabs

Signals in Angular 21

In Angular, Signals are a modern reactive state management system introduced to simplify change detection and improve performance.
Signals provide a more predictable and fine-grained reactivity model compared to traditional approaches like (), RxJS, or Zone.js-based change detection.

🔹 What is a Signal?
A Signal is a reactive value that:
✔ Stores a piece of state
✔ Notifies Angular when the value changes
✔ Automatically updates the UI
Think of it like:
"A variable that Angular watches automatically."

🔹 Basic Example
import { signal } from '/core';
count = signal(0);

// Read value
console.log(this.count());

// Update value
this.count.set(5);

// Update based on previous value
this.count.update(value => value + 1);

👉 Notice:
▪️count() → read value
▪️count.set() → assign value
▪️count.update() → modify value

🔹 Types of Signals
✅ 1. Writable Signal
Normal state that can change.
name = signal('Mohan');

✅ 2. Computed Signal
Derived value (auto recalculates).
count = signal(10);

doubleCount = computed(() => this.count() * 2);
✔ Updates automatically when count changes
✔ No manual subscription needed

✅ 3. Effect
Runs side effects when signal changes.
effect(() => {
console.log('Count changed:', this.count());
});
✔ Like automatic listener
✔ Useful for API calls, logs, etc.

🔹 Why Signals are Important
1. Better Performance
Signals enable fine-grained reactivity.
Instead of rechecking the whole component tree, Angular updates only what changed.

2. No Manual Subscriptions
With RxJS:
❌ Subscribe / Unsubscribe headache
With Signals:
✔ Automatic tracking

3. Cleaner Code
No need for:
▪️async pipe everywhere
▪️Complex Observables for simple state

4. Zone-less Friendly
Signals reduce dependency on Zone.js, helping Angular move toward faster rendering.

Advanced Web Development Roadmap 2026

Netflix System Design

⚡ npm vs pnpm- The difference most devs ignore
Most developers install packages without thinking twice.
But your package manager quietly affects:
• install speed
• disk usage
• CI performance
• team productivity
So let’s talk about npm vs pnpm 👇
━━━━━━━━━━━━━━━━━━━━
📦 npm (default choice)
✅ Comes preinstalled with Node
✅ Simple & familiar
❌ Slower installs on large projects
❌ Duplicates packages → more disk usage
Good for small projects.
Starts hurting as your app scales.
━━━━━━━━━━━━━━━━━━━━
🚀 pnpm (modern choice)
✅ Much faster installs
✅ Uses a global store (no duplication)
✅ Smaller node_modules
✅ Better monorepo support
Once you switch, it’s hard to go back.
━━━━━━━━━━━━━━━━━━━━
🧠 Why this matters
• Faster local setup for new devs
• Faster CI/CD pipelines
• Less disk space wasted
• Better performance at scale
Small tools. Big impact.

CSS centering techniques ♥️