Why services are needed in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject a service into a component.

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 directly instead of a variable name.

Using unrelated variable names.

In Angular, the service is injected using a variable name with camelCase, like dataService.

2fill in blank

medium

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

Angular

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

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

Aservice

Bcomponent

Croot

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' or 'module' which limits service scope.

Using invalid strings.

Providing a service at the root level makes it a singleton shared across the app.

3fill in blank

hard

Fix the error in the service method call inside the component.

Angular

this.[1].getData().subscribe(data => { this.items = data; });

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

AdataService

Bservice

CDataService

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the injected variable.

Calling the method on a wrong variable.

The service instance variable is dataService, not the class name.

4fill in blank

hard

Fill both blanks to create a singleton service and inject it.

Angular

@Injectable({ providedIn: '[1]' })
export class LoggerService {
  log(message: string) { console.log(message); }
}

constructor(private [2]: LoggerService) {}

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

Aroot

BloggerService

Ccomponent

DlogService

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using wrong variable names for injection.

Providing in root makes the service singleton. The injected variable is loggerService.

5fill in blank

hard

Fill all three blanks to create and use a shared data service.

Angular

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

@Injectable({ providedIn: '[1]' })
export class SharedDataService {
  data = [];
  add(item: string) { this.data.push(item); }
}

@Component({ selector: 'app-list', template: `<ul><li *ngFor="let item of [2].data">{{item}}</li></ul>` })
export class ListComponent {
  constructor(private [3]: SharedDataService) {}
}

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

Aroot

BsharedDataService

CdataService

DsharedData

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in template and constructor.

Providing service in wrong scope.

The service is provided in root for sharing. The injected variable is sharedDataService, used in template and constructor.