Service-to-service injection in Angular - Mini Project: Build & Apply

Service-to-service injection in Angular

📖 Scenario: You are building a simple Angular app where one service needs to use another service to get data. This is common when services depend on each other to share logic or data.

🎯 Goal: Create two Angular services: DataService that provides a message, and LoggerService that uses DataService to log that message. Then inject LoggerService into a component to display the logged message.

📋 What You'll Learn

Create a service called DataService with a method getMessage() that returns the string 'Hello from DataService'.

Create a service called LoggerService that injects DataService in its constructor.

Add a method logMessage() in LoggerService that returns the message from DataService.getMessage().

Create a component called AppComponent that injects LoggerService and displays the logged message in its template.

💡 Why This Matters

🌍 Real World

Service-to-service injection is common in Angular apps to keep code modular and reusable. For example, a UserService might inject an ApiService to fetch user data.

💼 Career

Understanding dependency injection and service communication is essential for Angular developers to build maintainable and testable applications.

1

Create DataService with getMessage method

Create an Angular service called DataService with a method getMessage() that returns the string 'Hello from DataService'.

Angular

// Create DataService with getMessage method
// Your code here

Need a hint?

Use @Injectable({ providedIn: 'root' }) to make the service available app-wide.

2

Create LoggerService injecting DataService

Create an Angular service called LoggerService that injects DataService in its constructor and stores it in a private variable called dataService.

Angular

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getMessage(): string {
    return 'Hello from DataService';
  }
}

// Create LoggerService that injects DataService
// Your code here

Need a hint?

Inject DataService by adding it as a private parameter in the constructor.

3

Add logMessage method in LoggerService

Add a method called logMessage() inside LoggerService that returns the result of calling getMessage() on the injected dataService.

Angular

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getMessage(): string {
    return 'Hello from DataService';
  }
}

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

  // Add logMessage method here
  // Your code here
}

Need a hint?

Use this.dataService.getMessage() inside logMessage().

4

Inject LoggerService in AppComponent and display message

Create an Angular component called AppComponent that injects LoggerService in its constructor. Add a public property message initialized by calling logMessage() on the injected loggerService. In the component template, display the message inside a <p> tag.

Angular

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

// Create AppComponent that injects LoggerService
// Your code here

Need a hint?

Inject LoggerService in the constructor and assign message by calling logMessage().