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'.