Service-to-service injection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular service injection?

Given two Angular services where ServiceB injects ServiceA, what will be logged when ServiceB.logMessage() is called?

Angular

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

@Injectable({ providedIn: 'root' })
export class ServiceA {
  message = 'Hello from ServiceA';
}

@Injectable({ providedIn: 'root' })
export class ServiceB {
  constructor(private serviceA: ServiceA) {}

  logMessage() {
    console.log(this.serviceA.message);
  }
}

// Assume ServiceB.logMessage() is called in a component

A Logs: 'undefined'

B Logs: 'Hello from ServiceA'

C Throws a runtime error: Cannot read property 'message' of undefined

D Logs: 'Hello from ServiceB'

💡 Hint

Remember that Angular injects the instance of ServiceA into ServiceB automatically.

ServiceB receives an instance of ServiceA via dependency injection. Accessing this.serviceA.message returns the string defined in ServiceA.

❓ lifecycle

intermediate

When is the injected service instance created in Angular?

Consider two services where ServiceB injects ServiceA. When is the instance of ServiceA created by Angular?

A Only when <code>ServiceA</code> is explicitly instantiated with <code>new</code>

B At application startup before any component loads

C When <code>ServiceB</code> is instantiated for the first time

D When the component that uses <code>ServiceA</code> is destroyed

💡 Hint

Think about Angular's lazy instantiation of services provided in root.

Angular creates the instance of a service when it is first requested, such as when another service or component injects it.

🔧 Debug

advanced

Why does this Angular service injection cause a cyclic dependency error?

Examine the following code snippet. Why does Angular throw a cyclic dependency error?

Angular

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

@Injectable({ providedIn: 'root' })
export class ServiceA {
  constructor(private serviceB: ServiceB) {}
}

@Injectable({ providedIn: 'root' })
export class ServiceB {
  constructor(private serviceA: ServiceA) {}
}

A Because ServiceA and ServiceB inject each other directly, creating an infinite loop

B Because Angular services cannot inject other services

C Because the services are missing @Injectable decorators

D Because ServiceB is not provided in any module

💡 Hint

Think about what happens when two services depend on each other directly.

Angular cannot resolve dependencies when two services inject each other directly, causing a cyclic dependency error.

📝 Syntax

advanced

Which option correctly injects ServiceA into ServiceB in Angular?

Choose the correct syntax for injecting ServiceA into ServiceB using Angular's dependency injection.

A constructor(private serviceA: ServiceA) {}

B constructor(serviceA: ServiceA) { this.serviceA = serviceA; }

C constructor(private serviceA) {}

D constructor(@Inject(ServiceA) serviceA) { this.serviceA = serviceA; }

💡 Hint

Remember how Angular uses TypeScript's constructor shorthand for dependency injection.

Option A uses the correct TypeScript shorthand to declare and assign the injected service as a private property.

❓ state_output

expert

What is the value of ServiceB.counter after these calls?

Given these Angular services, what is the value of ServiceB.counter after calling ServiceB.increment() twice?

Angular

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

@Injectable({ providedIn: 'root' })
export class ServiceA {
  count = 0;
  increment() {
    this.count++;
  }
}

@Injectable({ providedIn: 'root' })
export class ServiceB {
  counter = 0;
  constructor(private serviceA: ServiceA) {}

  increment() {
    this.serviceA.increment();
    this.counter = this.serviceA.count;
  }
}

// Assume ServiceB.increment() is called twice

A 0

B 1

C Throws an error

D 2

💡 Hint

Track how ServiceA's count changes and how ServiceB updates its counter.

Each call to ServiceB.increment() calls ServiceA.increment(), increasing count by 1. After two calls, count is 2, so ServiceB.counter is set to 2.