Service-to-service injection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject LoggerService into DataService.

Angular

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

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

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

Alogger

BLoggerService

ClogService

DdataLogger

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name as the parameter name with uppercase (e.g., 'LoggerService') causes errors.

Using unrelated names that do not describe the service.

The constructor parameter name can be anything, but by convention, a lowercase descriptive name like 'logger' is used to hold the injected service instance.

2fill in blank

medium

Complete the code to inject DataService into AppComponent.

Angular

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

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

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

Aservice

BDataService

CdataService

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase names for constructor parameters.

Using generic names like 'service' that are not descriptive.

Using 'dataService' as the parameter name follows Angular style guide conventions for injected services.

3fill in blank

hard

Fix the error in the constructor injection of AuthService in ProfileService.

Angular

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class ProfileService {
  constructor(private [1]: AuthService) {}
}

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

AauthService

Breadonly authService

Cpublic authService

Dprivate authService

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the access modifier causes the service not to be accessible in the class.

Using only the parameter name without 'private' or 'public'.

To inject a service and make it a class property, the constructor parameter must have an access modifier like 'private' or 'public'.

4fill in blank

hard

Fill both blanks to inject HttpClient and LoggerService into ApiService.

Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoggerService } from './logger.service';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private [1]: HttpClient, private [2]: LoggerService) {}
}

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

Ahttp

Blogger

ClogService

Dclient

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name for both parameters.

Using uppercase or unrelated names.

Common names for injected services are 'http' for HttpClient and 'logger' for LoggerService.

5fill in blank

hard

Fill all three blanks to inject UserService, AuthService, and LoggerService into DashboardService.

Angular

import { Injectable } from '@angular/core';
import { UserService } from './user.service';
import { AuthService } from './auth.service';
import { LoggerService } from './logger.service';

@Injectable({
  providedIn: 'root'
})
export class DashboardService {
  constructor(private [1]: UserService, private [2]: AuthService, private [3]: LoggerService) {}
}

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

AuserService

BauthService

Clogger

DdashboardLogger

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase names for parameters.

Using the same name for different services.

Use descriptive camelCase names matching the service names: 'userService', 'authService', and 'logger'.