Singleton service behavior in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for a service to be a singleton in Angular?

A singleton service means Angular creates only one instance of that service for the entire app. This single instance is shared wherever the service is injected.

beginner

How do you make a service singleton in Angular?

You provide the service in the root injector by adding providedIn: 'root' in the @Injectable decorator. This makes Angular create one shared instance app-wide.

intermediate

What happens if you provide a service in a component's providers array instead of root?

Angular creates a new instance of the service for that component and its children. This breaks the singleton pattern because multiple instances exist.

beginner

Why is singleton service behavior useful in Angular apps?

Singleton services let you share data and logic across many parts of the app easily. For example, a user login status or settings can be stored once and accessed everywhere.

intermediate

How can you verify a service is singleton during runtime?

You can add a console log or unique ID in the service constructor. If the log appears once no matter how many components use it, the service is singleton.

How do you declare a singleton service in Angular?

A Use <code>@Injectable({ providedIn: 'root' })</code>

B Add the service to a component's providers array

C Create a new instance manually in each component

D Use <code>new Service()</code> in templates

Providing the service in root makes Angular create one shared instance for the whole app.

What is the effect of providing a service in a component's providers array?

A Creates a new instance for that component and its children

B Creates a singleton service for the whole app

C Prevents the service from being injected

D Makes the service global and accessible everywhere

Providing in a component creates a new instance scoped to that component subtree.

Why might you want a singleton service in Angular?

A To avoid using dependency injection

B To share data and logic across multiple components

C To create multiple independent instances

D To make services harder to test

Singleton services help keep shared state or logic consistent across the app.

How can you check if a service is singleton during app runtime?

A Look for multiple service files

B Check if the service is listed in app.module.ts

C Use <code>new</code> keyword in components

D Add a console log in the service constructor

Logging in the constructor shows how many times Angular creates the service instance.

What does providedIn: 'root' do in Angular services?

A Makes the service available only in root component

B Prevents the service from being injected

C Creates a singleton service instance for the whole app

D Requires manual service creation

It tells Angular to provide the service in the root injector, making it singleton app-wide.

Explain what singleton service behavior means in Angular and why it is important.

Think about how one service instance can be used everywhere in the app.

Describe how providing a service in a component's providers array affects singleton behavior.

Consider what happens when Angular creates service instances for components.

Practice

1. What does it mean when an Angular service is a singleton?

easy

A. There is only one shared instance of the service across the entire app.

B. A new instance of the service is created for every component.

C. The service can only be used in one component at a time.

D. The service is automatically destroyed after use.

Solution

1. Step 1: Understand singleton concept in Angular

   A singleton service means Angular creates one instance of the service and shares it everywhere.

2. Step 2: Compare options with singleton definition

   Only There is only one shared instance of the service across the entire app. correctly describes a single shared instance across the app.

3. Final Answer:

   There is only one shared instance of the service across the entire app. -> Option A

4. Quick Check:

   Singleton = one shared instance [OK]

Hint: Singleton means one instance shared app-wide [OK]

Common Mistakes:

• Thinking each component gets its own service instance
• Confusing singleton with service destruction
• Believing singleton limits service usage to one component

2. Which is the correct way to make an Angular service a singleton using the @Injectable decorator?

easy

A. @Injectable({ scope: 'singleton' })

B. @Injectable({ providedIn: 'root' })

C. @Injectable({ singleton: true })

D. @Injectable({ providedIn: 'component' })

Solution

1. Step 1: Recall Angular service singleton syntax

   Angular uses providedIn: 'root' to provide a singleton service at the app root level.

2. Step 2: Check each option's validity

   Only @Injectable({ providedIn: 'root' }) uses the correct syntax. Others are invalid or do not exist in Angular.

3. Final Answer:

   @Injectable({ providedIn: 'root' }) -> Option B

4. Quick Check:

   Singleton service = providedIn: 'root' [OK]

Hint: Use providedIn: 'root' for singleton services [OK]

Common Mistakes:

• Using non-existent properties like singleton or scope
• Confusing component-level providers with root-level
• Omitting the @Injectable decorator

3. Given this Angular service and two components using it:

export class CounterService {
  count = 0;
  increment() { this.count++; }
  getCount() { return this.count; }
}

Both components call increment() once. What will getCount() return when called from either component?

medium

A. 0

B. 1

C. 2

D. Undefined

Solution

1. Step 1: Understand singleton service shared state

   Since the service is singleton, both components share the same count variable.

2. Step 2: Calculate increments from both components

   Each component calls increment() once, so total increments = 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   Shared state increments twice = 2 [OK]

Hint: Singleton shares state; increments add up [OK]

Common Mistakes:

• Assuming each component has separate service instance
• Thinking count resets per component
• Ignoring shared service state

4. You created a service with @Injectable() but forgot to add providedIn: 'root'. What problem will occur when multiple components inject this service?

medium

A. Angular will throw a compile-time error.

B. The service will not be injectable anywhere.

C. The service will be singleton by default anyway.

D. Angular will create separate instances for each component, breaking singleton behavior.

Solution

1. Step 1: Understand default service provider behavior

   Without providedIn: 'root', Angular does not provide the service globally.

2. Step 2: Effect on multiple injections

   Each component that provides the service separately will get its own instance, so no singleton.

3. Final Answer:

   Angular will create separate instances for each component, breaking singleton behavior. -> Option D

4. Quick Check:

   Missing providedIn: 'root' = multiple instances [OK]

Hint: No providedIn: 'root' means no singleton [OK]

Common Mistakes:

• Assuming singleton is default without providedIn
• Expecting compile errors for missing providedIn
• Thinking service becomes unusable

5. You want to share user login status across multiple components using a singleton service. Which approach correctly ensures the service is singleton and updates are reflected everywhere?

hard

A. Create service with @Injectable({ providedIn: 'root' }) and use a BehaviorSubject to hold login status.

B. Create service without providedIn and add it to each component's providers array.

C. Create service with @Injectable({ providedIn: 'root' }) but store login status in a local variable inside each component.

D. Create service with @Injectable() and manually instantiate it in each component constructor.

Solution

1. Step 1: Ensure singleton service provision

   Using providedIn: 'root' makes the service singleton app-wide.

2. Step 2: Use BehaviorSubject for reactive shared state

   BehaviorSubject allows components to subscribe and get updates when login status changes.

3. Step 3: Evaluate other options

   Options B, C, and D break singleton or do not share state properly.

4. Final Answer:

   Create service with @Injectable({ providedIn: 'root' }) and use a BehaviorSubject to hold login status. -> Option A

5. Quick Check:

   Singleton + reactive state = shared updates [OK]

Hint: Use providedIn: 'root' and BehaviorSubject for shared reactive state [OK]

Common Mistakes:

• Adding service to component providers breaking singleton
• Storing shared data only inside components
• Manually creating service instances instead of DI