How dependency injection works in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject a service into a component constructor.

Angular

constructor(private [1]: DataService) {}

Drag options to blanks, or click blank then click option'

AdataService

BDataService

Cservice

Dinjector

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of a variable name.

Forgetting to mark the constructor parameter as private.

The service instance is injected by naming a private variable in the constructor. The variable name is usually camelCase.

2fill in blank

medium

Complete the code to provide a service at the root level.

Angular

@Injectable({ providedIn: '[1]' })
export class DataService {}

Drag options to blanks, or click blank then click option'

Acomponent

Bplatform

Cmodule

Droot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' which limits the service to one component.

Using 'module' which is not a valid providedIn value.

Providing a service in 'root' makes it a singleton available throughout the app.

3fill in blank

hard

Fix the error in the constructor injection syntax.

Angular

constructor([1] dataService: DataService) {}

Drag options to blanks, or click blank then click option'

Aprotected

Bpublic

Cprivate

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the access modifier causes the service not to be injected properly.

Using readonly does not create a property automatically.

The constructor parameter must be marked private (or public/protected) to create and assign the property automatically.

4fill in blank

hard

Fill both blanks to inject a service and use it in ngOnInit.

Angular

constructor(private [1]: LoggerService) {}

ngOnInit() {
  this.[2].log('Component started');
}

Drag options to blanks, or click blank then click option'

Alogger

Blog

CLoggerService

Dservice

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name instead of the variable name to call methods.

Mismatching variable names between constructor and usage.

The injected service variable is named 'logger' and used with 'this.logger' to call its methods.

5fill in blank

hard

Fill all three blanks to create a service, provide it, and inject it in a component.

Angular

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

@Injectable({ providedIn: '[1]' })
export class AuthService {}

@Component({ selector: 'app-login', templateUrl: './login.component.html' })
export class LoginComponent {
  constructor(private [2]: AuthService) {}

  login() {
    this.[3].authenticate();
  }
}

Drag options to blanks, or click blank then click option'

Aroot

BauthService

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' instead of 'root' for providedIn.

Mismatching variable names in constructor and method.

Calling methods on the class name instead of the variable.

The service is provided in 'root', injected as 'authService', and used via 'this.authService'.

Practice

1. What is the main purpose of dependency injection in Angular?

easy

A. To write all code inside a single file

B. To manually create instances of services inside components

C. To provide components with the services they need automatically

D. To prevent components from using any services

Solution

1. Step 1: Understand dependency injection concept

   Dependency injection automatically provides required services to components without manual creation.

2. Step 2: Compare options with this concept

   Only To provide components with the services they need automatically describes automatic provision of services, which is the core of dependency injection.

3. Final Answer:

   To provide components with the services they need automatically -> Option C

4. Quick Check:

   Dependency injection = automatic service provision [OK]

Hint: Dependency injection means Angular gives services automatically [OK]

Common Mistakes:

• Thinking you must create service instances manually
• Believing dependency injection restricts service use
• Confusing dependency injection with code organization

2. Which decorator makes a class injectable in Angular?

easy

A. @Component

B. @Input

C. @NgModule

D. @Injectable

Solution

1. Step 1: Identify Angular decorators for injection

   The decorator @Injectable marks a class as available for dependency injection.

2. Step 2: Eliminate other decorators

   @Component is for components, @NgModule for modules, and @Input for input properties, none make a class injectable.

3. Final Answer:

   @Injectable -> Option D

4. Quick Check:

   @Injectable = makes class injectable [OK]

Hint: Use @Injectable to mark services for injection [OK]

Common Mistakes:

• Confusing @Component with @Injectable
• Using @NgModule to make services injectable
• Forgetting to add @Injectable to services

3. Given this Angular service and component code, what will be logged?

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

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) {
    console.log('Log:', message);
  }
}

import { Component } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({ selector: 'app-root', template: '' })
export class AppComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Hello');
  }
}

medium

A. Log: Hello

B. Error: LoggerService not found

C. No output

D. Log: undefined

Solution

1. Step 1: Understand service injection in constructor

   The LoggerService is injected into AppComponent via constructor and used to log a message.

2. Step 2: Analyze the log call

   The log method prints 'Log:' plus the message 'Hello', so console shows 'Log: Hello'.

3. Final Answer:

   Log: Hello -> Option A

4. Quick Check:

   Injected service logs message correctly [OK]

Hint: Injected services work via constructor parameters [OK]

Common Mistakes:

• Expecting error if service is providedIn root
• Thinking log method won't run without template
• Confusing console output with return value

4. What is wrong with this Angular service injection code?

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

@Injectable()
export class DataService {
  getData() { return [1, 2, 3]; }
}

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

@Component({ selector: 'app-data', template: '' })
export class DataComponent {
  constructor(private dataService: DataService) {}
}

medium

A. DataComponent constructor should not have parameters

B. DataService is not provided in any injector

C. DataService class is missing @Component decorator

D. getData method must be static

Solution

1. Step 1: Check service provider configuration

   The service has @Injectable() but no providedIn or provider registration, so Angular doesn't know where to provide it.

2. Step 2: Understand injection failure cause

   Without being provided, Angular throws an error when injecting DataService into DataComponent.

3. Final Answer:

   DataService is not provided in any injector -> Option B

4. Quick Check:

   Missing provider causes injection error [OK]

Hint: Always provide services via providedIn or providers array [OK]

Common Mistakes:

• Assuming @Injectable alone provides the service
• Adding @Component to services incorrectly
• Thinking constructor parameters are optional for injection

5. You want to inject two different services of the same class but with different configurations in Angular. Which approach correctly achieves this?

hard

A. Use Angular injection tokens to provide different configurations and inject by token

B. Create two different classes extending the service and inject each separately

C. Use @Injectable({ providedIn: 'root' }) on the class and inject twice in constructor

D. Inject the service once and manually change its configuration before each use

Solution

1. Step 1: Understand multiple instances need

   Injecting the same class twice with different configs requires distinguishing them in Angular's injector.

2. Step 2: Use injection tokens for different configs

   Angular injection tokens allow providing multiple versions of the same class with different configurations and injecting them separately.

3. Step 3: Evaluate other options

   Use @Injectable({ providedIn: 'root' }) on the class and inject twice in constructor injects the same instance twice, B duplicates classes unnecessarily, D is error-prone and not recommended.

4. Final Answer:

   Use Angular injection tokens to provide different configurations and inject by token -> Option A

5. Quick Check:

   Injection tokens enable multiple configured instances [OK]

Hint: Use injection tokens for multiple differently configured services [OK]

Common Mistakes:

• Injecting same service twice without tokens
• Creating duplicate service classes unnecessarily
• Changing service config manually at runtime