Signals - Properties VS Signals

What are Signals?

Signals are wrappers around values.

  1. Signals are not very old in Angular.
  2. They were introduced around 1–1.5 years ago.


Normal Property vs Signal (Basic Idea)

Normal Property Example

data = 10;
  1. UI updates when value changes.
  2. But TypeScript file cannot detect when the value changes.


Signal Example

count = signal(0);
  1. Signal is created using the signal() function.
  2. signal() works like a function around a value.
  3. Signal sends a notification when its value changes.
  4. Changes can be detected inside the TypeScript file.


Displaying Normal Property in UI

<h2>{{data}}</h2>
  1. Normal interpolation is used.
  2. Value is displayed correctly.


Displaying Signal in UI

<h2>Signal : {{count()}}</h2>
  1. Signal is accessed using parentheses ().
  2. Double curly braces are still used.


Updating Normal Property

HTML

<button (click)="updateData()">Update Data</button>


TypeScript

updateData(){
this.data++
}
  1. Value increases.
  2. UI updates.
  3. No way to detect this change inside TypeScript automatically.


Updating Signal

HTML

<button (click)="updateCount()">Update Count</button>


TypeScript

updateCount(){
this.count.set(this.count()+1)
}
  1. Signal value is updated using .set()
  2. Value increases correctly.
  3. UI updates automatically.


Effect in Signals

What is Effect?

  1. effect is a feature from Angular core.
  2. It runs when a signal value changes.
  3. Used to detect signal changes inside TypeScript.
  4. Mostly used inside the constructor.

Effect Example from Code

constructor(){
effect(()=>{
console.log("this is count", this.count())
if(this.count() == 10){
this.count.set(0)
}
})
}

What Happens Here?

  1. Every time count changes, effect runs.
  2. Latest value of count is logged.
  3. When count reaches 10, it resets to 0.


Important Difference Observed

Normal Property inside Effect

// console.log("this is data", this.data);
  1. Normal property does NOT trigger effect on update.
  2. No notification is received when data changes.


Signal inside Effect

console.log("this is count", this.count())
  1. Signal triggers effect every time value changes.
  2. Change is detected inside TypeScript.


Why Signals are Reactive?

  1. Signals react when their value changes.
  2. Effect listens to signals.
  3. Any condition or action can be performed immediately.
  4. Example actions:
  5. API calls
  6. Reset value
  7. Redirect
  8. Login / Logout


Counter Example with Signal

  1. Initial value starts from 0
  2. Button increments value
  3. When value reaches 10, it resets to 0
  4. All logic handled reactively using effect


Types of Signals

There are three types of Signals:

  1. Writable Signals
  2. Value can be changed
  3. Example: signal(0)
  4. Computed Signals
  5. Read-only
  6. Derived from other signals
  7. Driven signals
  8. Effect Signals
  9. Run inside effect
  10. Execute only when signal changes


Change Detection Difference

  1. Signals update only the exact place where they are used.
  2. Normal properties can affect the whole component.
  3. Signals do not re-render the whole component.


Signals vs React State

  1. React state re-renders the whole component.
  2. Signals update only required parts.
  3. Signals are faster than React state.
  4. Signals never re-render the entire component.


Syntax Difference

Normal Property

this.data = 20;


Signal

this.count.set(20);
  1. Signals use set() or update()
  2. Normal properties do not use functions