Effect for side effects in Angular - Step-by-Step Execution

Concept Flow - Effect for side effects

Component initializes

↓

Effect declared with side effect logic

↓

Effect runs after component setup

↓

Side effect executes (e.g., logging, fetching)

↓

Effect cleanup runs on component destroy or dependencies change

↓

Component updates or unmounts

This flow shows how Angular runs an effect to perform side effects after component setup, then cleans up when needed.

Execution Sample

Angular

import { Component, effect, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="count.set(count() + 1)">Increment</button>`
})
export class CounterComponent {
  count = signal(0);
  constructor() {
    effect(() => {
      console.log(`Count is: ${this.count()}`);
    });
  }
}

This Angular component uses an effect to log the count value whenever it changes.

Execution Table

Step	Trigger	State Before	Action	State After	Side Effect Output
1	Component initializes	count=0	Effect runs first time	count=0	Console logs: 'Count is: 0'
2	User clicks button	count=0	count updated to 1	count=1	Console logs: 'Count is: 1'
3	User clicks button	count=1	count updated to 2	count=2	Console logs: 'Count is: 2'
4	Component destroyed	count=2	Effect cleanup runs (if any)	count=2	No console output
5	No further updates	count=2	No effect triggered	count=2	No console output

💡 Effect stops running after component is destroyed or no state changes occur.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	2	2

Key Moments - 3 Insights

Why does the effect run immediately when the component initializes?

The effect runs once right after declaration to capture the initial state and perform the side effect, as shown in step 1 of the execution_table.

Does the effect run if the signal value does not change?

No, the effect only runs when the signal value changes. Step 5 shows no effect triggered because count stays the same.

What happens to the effect when the component is destroyed?

The effect cleanup runs to release resources or cancel subscriptions, preventing memory leaks, as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count after step 2?

A 2

B 1

C 0

D Undefined

💡 Hint

Check the 'State After' column in row for step 2.

At which step does the effect cleanup run?

A Step 5

B Step 3

C Step 4

D Step 1

💡 Hint

Look for 'Effect cleanup runs' in the 'Action' column.

If the user never clicks the button, how many times does the effect run?

A Once

B Twice

C Never

D Three times

💡 Hint

Refer to step 1 and step 5 in the execution_table.

Concept Snapshot

Effect for side effects in Angular:
- Use effect() to run code reacting to signal changes.
- Runs immediately once after declaration.
- Runs again only when dependencies change.
- Cleanup runs on component destroy or dependency change.
- Ideal for logging, fetching, or subscriptions.

Full Transcript

In Angular, an effect runs side effect code after component setup and whenever its dependencies change. Initially, the effect runs once to capture the starting state. When a signal changes, the effect runs again to perform the side effect, such as logging. When the component is destroyed, the effect cleanup runs to free resources. This ensures side effects stay in sync with state and avoid leaks.