Service scope (root, module, component) in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

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

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

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

Acomponent

Bmodule

Croot

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'module' or 'component' instead of 'root' when you want a singleton service.

Using providedIn: 'root' makes the service available application-wide as a singleton.

2fill in blank

medium

Complete the code to provide a service only in a specific Angular module.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserService } from './user.service';

@NgModule({
  imports: [CommonModule],
  providers: [[1]]
})
export class UserModule {}

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

AAppService

BDataService

CHttpClient

DUserService

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the service to the providers array.

Adding the service to root instead of the module.

Adding UserService to the providers array in the module limits its scope to that module.

3fill in blank

hard

Fix the error in the component to provide a service only for that component.

Angular

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

@Component({
  selector: 'app-logger',
  templateUrl: './logger.component.html',
  providers: [[1]]
})
export class LoggerComponent {
  constructor(private logger: LoggerService) {}
}

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

ALoggerService

BDataService

CHttpClient

DUserService

Attempts:

3 left

💡 Hint

Common Mistakes

Not adding the service to the component's providers array.

Adding the wrong service to providers.

Providing LoggerService in the component's providers array scopes it only to that component and its children.

4fill in blank

hard

Fill the blank to create a service provided in a feature module only.

Angular

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

@Injectable()
export class FeatureService {}

@NgModule({
  providers: [[1]]
})
export class FeatureModule {}

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

AFeatureService

Bany

Croot

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'module' in providedIn which is invalid.

Not adding the service to the module providers.

Using providedIn: 'module' is not valid, so the service must be provided in the module's providers array. Here, FeatureService is added to the module providers to limit its scope.

5fill in blank

hard

Fill all three blanks to create a component-scoped service with a method call.

Angular

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

@Injectable()
export class CounterService {
  count = 0;
  increment() {
    this.count += 1;
  }
}

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

@Component({
  selector: 'app-counter',
  template: `<button (click)="[1]()">Increment</button> <p>Count: [2]</p>`,
  providers: [[3]]
})
export class CounterComponent {
  constructor(public counter: CounterService) {}
}

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

Acounter.increment

Bcounter.count

CCounterService

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using method name without the service reference.

Not providing the service in the component.

Referencing count incorrectly in the template.

The button calls counter.increment() to increase the count. The template shows counter.count. The service is provided in the component's providers array as CounterService.