Singleton service behavior in Angular - Step-by-Step Execution

Concept Flow - Singleton service behavior

App starts

↓

Inject Service in Component A

↓

Service instance created

↓

Component A uses Service

↓

Inject Service in Component B

↓

Same Service instance used

↓

State shared between Components

↓

App ends

The Angular app creates one service instance shared by all components that inject it, keeping state consistent.

Execution Sample

Angular

import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class CounterService {
  count = 0;
  increment() { this.count++; }
}

Defines a singleton service with a count and increment method shared app-wide.

Execution Table

Step	Action	Service Instance Created?	Count Value	Component Using Service
1	App starts, no service yet	No	N/A	None
2	Component A injects service	Yes	0	Component A
3	Component A calls increment()	Yes	1	Component A
4	Component B injects service	No (reuse)	1	Component B
5	Component B calls increment()	No (reuse)	2	Component B
6	Component A reads count	No (reuse)	2	Component A
7	App ends	No change	2	Both Components

💡 App ends; single service instance shared, count reflects increments from both components.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
count	0	1	2	2
Service Instance Created	No	Yes	Yes	Yes

Key Moments - 2 Insights

Why does Component B see the updated count from Component A?

Because both components share the same singleton service instance, as shown in steps 4 and 6 of the execution_table.

Is a new service instance created when Component B injects the service?

No, the service instance is created only once at step 2 and reused afterwards, as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the count value after Component A calls increment()?

A 0

B 1

C 2

D Undefined

💡 Hint

Check Step 3 in the execution_table for count value after increment.

At which step does Component B inject the service and reuse the existing instance?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Service Instance Created?' column in execution_table.

If the service was not singleton, what would be the count value in Component B after its increment?

A 1

B 0

C 2

D Undefined

💡 Hint

Think about a new instance starting count at 0 and incrementing once.

Concept Snapshot

Angular singleton services:
- ProvidedIn 'root' creates one instance app-wide
- All components share this instance
- State changes in service reflect everywhere
- Injecting service multiple times reuses same instance
- Useful for shared data or logic

Full Transcript

This visual execution shows how Angular creates a singleton service instance when first injected by a component. The service holds a count variable starting at zero. Component A injects the service first, creating the instance, then increments the count to 1. When Component B injects the service later, it reuses the same instance, so it sees count as 1. Component B increments count to 2. Both components share this updated count because the service is singleton. The execution table tracks each step, showing service creation, count changes, and which component uses the service. Key moments clarify why the count is shared and no new instance is created on second injection. The quiz tests understanding of these steps. The snapshot summarizes singleton service behavior in Angular.