Injecting services into components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component with injected service?

Consider this Angular standalone component that injects a service to get a greeting message. What will be displayed when this component renders?

Angular

import { Component, inject } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-greet',
  standalone: true,
  template: `<p>{{ message }}</p>`
})
export class GreetComponent {
  private greetingService = inject(GreetingService);
  message = this.greetingService.getGreeting();
}

// GreetingService code:
// export class GreetingService {
//   getGreeting() { return 'Hello, Angular!'; }
// }

A Hello, World!

B Hello, Angular!

C Error: No provider for GreetingService

D undefined

💡 Hint

Think about what the service method returns and how the component uses it.

The component injects GreetingService and calls getGreeting(), which returns 'Hello, Angular!'. This string is assigned to message and displayed.

📝 Syntax

intermediate

Which option correctly injects a service in an Angular standalone component?

Choose the correct way to inject DataService into a standalone Angular component using the new inject() function.

A private dataService = inject(DataService);

B constructor(private dataService: DataService) {}

C inject(DataService) private dataService;

D const dataService = new DataService();

💡 Hint

Remember that inject() is used as a function call inside the class body, not in constructor parameters.

In Angular 17+, the recommended way in standalone components is to call inject(DataService) directly inside the class body to get the service instance.

🔧 Debug

advanced

Why does this Angular component fail with 'NullInjectorError'?

This component tries to inject UserService but throws NullInjectorError: No provider for UserService. What is the cause?

Angular

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>User: {{ userName }}</p>`
})
export class UserComponent {
  private userService = inject(UserService);
  userName = this.userService.getUserName();
}

// UserService is NOT provided in any module or component providers array.

A The template syntax {{ userName }} is invalid.

B The inject() function is used incorrectly; it must be called in constructor.

C The component is missing the @Injectable decorator on UserService.

D UserService is not registered as a provider anywhere in the app.

💡 Hint

Think about Angular's dependency injection system and where services must be registered.

Angular throws NullInjectorError when a requested service is not provided in any injector. Since UserService is not registered as a provider, Angular cannot inject it.

❓ state_output

advanced

What is the value of count after clicking the button twice?

This Angular component injects a CounterService that tracks a count. What will be the displayed count after clicking the button two times?

Angular

import { Component, inject } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button><p>Count: {{ count }}</p>`
})
export class CounterComponent {
  private counterService = inject(CounterService);
  count = this.counterService.getCount();

  increment() {
    this.counterService.increment();
    this.count = this.counterService.getCount();
  }
}

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

A 2

B 0

C 1

D Error: count is undefined

💡 Hint

Each click calls increment() which increases the count by 1.

The service starts count at 0. Each button click calls increment(), increasing count by 1. After two clicks, count is 2.

🧠 Conceptual

expert

Which statement about Angular service injection is TRUE?

Choose the correct statement about injecting services into Angular standalone components.

A Services must always be provided in NgModules to be injectable.

B The inject() function can only be used inside constructors.

C Standalone components can inject services provided in their own providers array or globally.

D Injecting services requires manually creating instances with <code>new</code> keyword.

💡 Hint

Think about Angular's new standalone component features and service providers.

Standalone components can inject services that are provided globally or in their own providers array. The inject() function can be used inside the class body, not only constructors.