Singleton service behavior in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to provide a service as a singleton in Angular.

Angular

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

@Injectable({
  providedIn: '[1]'
})
export class DataService {
  data = 0;
}

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

Aplatform

Bany

Croot

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' or 'module' which create multiple instances.

Forgetting to add @Injectable decorator.

Using providedIn: 'root' makes the service a singleton across the entire app.

2fill in blank

medium

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

Angular

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<p>{{dataService.data}}</p>`
})
export class AppComponent {
  constructor(private [1]: DataService) {}
}

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

AdataService

Bservice

Cdata

Dds

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic name like 'service' which is less clear.

Not marking the constructor parameter as private.

The injected service variable name is usually descriptive like dataService.

3fill in blank

hard

Fix the error in the service provider to ensure singleton behavior.

Angular

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

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

Aroot

Bcomponent

Cmodule

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'module' or 'any' which create multiple instances.

Omitting the @Injectable decorator.

Only providedIn: 'root' guarantees a singleton service across the app.

4fill in blank

hard

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

Angular

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

@Injectable({
  providedIn: '[1]'
})
export class CounterService {
  count = 0;
}

import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{counterService.count}}</button>`
})
export class CounterComponent {
  constructor(private [2]: CounterService) {}

  increment() {
    this.counterService.count++;
  }
}

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

Aroot

Bany

CcounterService

Dservice

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using generic variable names like 'service' instead of descriptive ones.

Use providedIn: 'root' for singleton service and inject it as counterService in the component.

5fill in blank

hard

Fill all three blanks to create a singleton service, inject it, and update its value.

Angular

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

@Injectable({
  providedIn: '[1]'
})
export class MessageService {
  message = 'Hello';
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-message',
  template: `<p>{{messageService.message}}</p><button (click)="[2]()">Change</button>`
})
export class MessageComponent {
  constructor(private [3]: MessageService) {}

  change() {
    this.messageService.message = 'Hi there!';
  }
}

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

Aroot

Bchange

CmessageService

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong provider scope.

Mismatching method name in template and class.

Using unclear variable names for injection.

Use providedIn: 'root' for singleton service, call change() on button click, and inject as messageService.