Injecting services into components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

constructor(private [1]: DataService) {}

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

AdataService

BDataService

CserviceData

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of an instance name.

Using a generic name like 'data' that is not descriptive.

The service instance name in the constructor should start with a lowercase letter by convention. Here, dataService is the correct instance name.

2fill in blank

medium

Complete the code to add the service to the component's providers array.

Angular

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  providers: [[1]]
})

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

AExampleService

BdataService

CServiceData

DDataService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the instance name instead of the class name in providers.

Adding unrelated service names.

The providers array requires the service class name, not an instance name.

3fill in blank

hard

Fix the error in the constructor injection by completing the code.

Angular

constructor([1] dataService: DataService) {}

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

Aprotected

Bprivate

Cpublic

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'public' or 'protected' which changes access level.

Omitting the access modifier causing errors.

The service must be injected with the private keyword to be accessible inside the component.

4fill in blank

hard

Fill both blanks to correctly inject and use the service in the component.

Angular

constructor(private [1]: [2]) {}

ngOnInit() {
  this.[1].fetchData();
}

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

AdataService

BDataService

Cservice

DExampleService

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up instance name and type.

Using wrong service names.

The constructor parameter name should be dataService and the type should be DataService. Then you can call fetchData() on the instance.

5fill in blank

hard

Fill all three blanks to create a standalone component that injects a service using Angular 17+ patterns.

Angular

import { Component, inject } from '@angular/core';
import { [1] } from './data.service';

@Component({
  selector: 'app-standalone',
  standalone: true,
  template: `<p>{{ message }}</p>`
})
export class StandaloneComponent {
  private dataService = [2]([3]);
  message = this.dataService.getMessage();
}

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

ADataService

Binject

DInject

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Inject' instead of 'inject' function.

Not importing the service class correctly.

Passing wrong argument to inject.

Import the service class DataService, use the inject function to inject it, and pass DataService as the argument.