Angular Signals

Mastering Angular Signals: Utilization and Advanced Operations

Learning Outcome

4

Handle complex dependencies

3

Combine multiple signals

2

Understand effects

1

Understand computed signals

Analogy

Think of an e-commerce cart system

Here:

  • Product prices → signals

  • Total price → computed value

  • Discount alert / notification → effect

  • When product price changes → total updates automatically

  • When total exceeds limit → alert triggers

Analogy

  • Signals → base data

  • Computed → calculated result

  • Effect → action based on change

This creates a fully automated and reactive system.

Why Advanced Signal Operations

Basic signals handle simple values, but real apps need:

Challenges Without Advanced Signals:

Why Advanced Signal Operations

Solution:

  • Computed Signals → automatically calculate derived values

  • Effects → run logic when data changes

  • Combining Signals → manage complex state easily

This makes applications:

Computed Signals (Derived Values)

Usage

console.log(total()); // 200

Computed signals calculate values automatically

const price = signal(100);
const quantity = signal(2);
const total = computed(() => price() * quantity());

Auto updates when dependencies change

Effects (Side Effects)

Effects run when signals change

effect(() => {
  console.log('Count changed:', count());
});

Syntax:

Effects (Side Effects)

effect(() => {
  if (count() > 5) {
    console.log('High value reached');
  }
});

Effect Example (Real Use Case)

Handling Complex Dependencies

const price = signal(100);
const discount = signal(10);
const finalPrice = computed(() => {
  return price() - discount();
});
const message = computed(() => {
  return finalPrice() > 50 ? 'Expensive' : 'Cheap';
});

Add condition

Handles multiple dependencies smoothly

Summary

4

Signals simplify Angular state management

3

Multiple signals can be combined easily

2

Effects handle side effects automatically

1

Computed creates dynamic derived values

Quiz

Which updates based on previous value?

A. set()

B. update()

C. assign()

D. push()

Quiz-answer

Which updates based on previous value?

A. set()

B. update()

C. assign()

D. push()