Singleton service behavior in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular ensure a service is a singleton?

Consider an Angular service provided in the root injector. What happens when multiple components inject this service?

A All components receive the same instance of the service.

B Each component gets a new instance of the service.

C Only the first component gets the service instance; others get null.

D Angular throws an error if multiple components inject the same service.

💡 Hint

Think about how Angular's root injector works for services provided in 'root'.

When a service is provided in the root injector, Angular creates one instance shared across the app. This makes the service a singleton, so all components get the same instance.

❓ state_output

intermediate

What is the value of the counter after multiple component injections?

Given a singleton service with a counter property initialized to 0, two components increment it by 1 each. What is the final counter value?

Angular

export class CounterService {
  counter = 0;
  increment() { this.counter++; }
}

// Component A and Component B both inject CounterService and call increment() once.

A Error: counter is undefined

B 1

C 0

D 2

💡 Hint

Remember the service is a singleton shared by both components.

Since both components share the same service instance, each increment adds 1 to the same counter. So after two increments, the counter is 2.

🔧 Debug

advanced

Why does providing a service in a component break singleton behavior?

What happens if you provide a service in the providers array of two different components instead of in root?

A Angular still shares one instance across components.

B Angular throws a runtime error about multiple providers.

C Each component gets its own separate instance of the service.

D The service instance is shared only if components are siblings.

💡 Hint

Think about how Angular creates injectors for components with providers.

Providing a service in a component's providers array creates a new instance scoped to that component. So each component gets its own instance, breaking the singleton pattern.

🧠 Conceptual

advanced

How does Angular's injector hierarchy affect singleton services?

Which statement best describes how Angular's hierarchical injectors influence singleton service instances?

A A service provided in root is shared app-wide unless overridden in a child injector.

B Services provided in root are recreated for each lazy-loaded module automatically.

C Singleton services cannot be overridden in child injectors.

D Angular merges all injectors into one global injector at runtime.

💡 Hint

Consider how Angular allows overriding services in feature modules or components.

Angular uses a hierarchy of injectors. A service provided in root is a singleton app-wide unless a child injector (like a lazy-loaded module or component) provides its own instance, which overrides the root one locally.

📝 Syntax

expert

Which code snippet correctly provides a singleton service in Angular 17+ standalone component?

Choose the correct way to provide a singleton service in a standalone Angular component using Angular 17+ syntax.

A

import { inject } from '@angular/core';

@Component({
  standalone: true,
  providers: [MyService]
})
export class MyComponent {
  service = inject(MyService);
}

B

@Component({
  standalone: true
})
export class MyComponent {
  constructor(private service: MyService) {}
}

@Injectable({providedIn: 'root'})
export class MyService {}

C

@Component({
  standalone: true,
  providers: [{provide: MyService, useClass: MyService}]
})
export class MyComponent {
  service = inject(MyService);
}

@Injectable()
export class MyService {}

D

@Component({
  standalone: true
})
export class MyComponent {
  service = new MyService();
}

@Injectable({providedIn: 'root'})
export class MyService {}

💡 Hint

Remember that providing a service in 'root' makes it singleton app-wide, and standalone components can inject it via constructor.

Option B correctly uses @Injectable({providedIn: 'root'}) to make the service singleton and injects it via constructor in a standalone component. Option B provides the service in the component providers, creating a new instance. Option B provides the service locally without 'providedIn: root', so not singleton. Option B manually creates a new instance, bypassing Angular DI.