Injecting services into components in Angular - Mini Project: Build & Apply

Injecting services into components

📖 Scenario: You are building a simple Angular app that shows a welcome message fetched from a service. This simulates how apps get data from services to display in components.

🎯 Goal: Create an Angular standalone component that uses a service to get a welcome message and display it.

📋 What You'll Learn

Create a service that returns a welcome message string

Create a standalone component

Inject the service into the component using Angular's dependency injection

Display the welcome message in the component template

💡 Why This Matters

🌍 Real World

Services in Angular are used to share data and logic across components. Injecting services into components is a core pattern for building scalable apps.

💼 Career

Understanding dependency injection and service usage is essential for Angular developer roles and building maintainable frontend applications.

1

Create the WelcomeService

Create a standalone Angular service called WelcomeService with a method getMessage() that returns the string 'Hello from WelcomeService!'.

Angular

// Create the WelcomeService with getMessage() method
// Your code here

Need a hint?

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

2

Create the WelcomeComponent

Create a standalone Angular component called WelcomeComponent with a template that displays {{ message }}. Import CommonModule and add it to imports. Initialize a public string property message with an empty string.

Angular

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

// Create the WelcomeComponent with a message property and template
// Your code here

Need a hint?

Use @Component with standalone: true and import CommonModule for basic Angular directives.

3

Inject WelcomeService into WelcomeComponent

Modify the WelcomeComponent constructor to inject WelcomeService as a private parameter called welcomeService. Then, inside the constructor, set this.message to the value returned by welcomeService.getMessage().

Angular

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

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

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule],
  template: `{{ message }}`
})
export class WelcomeComponent {
  message: string = '';

  constructor(private welcomeService: WelcomeService) {
    // Your code here
  }
}

Need a hint?

Use Angular's constructor injection to get the service instance and call getMessage().

4

Use WelcomeComponent in the app

Add the app-welcome selector tag inside the bootstrap array of your main Angular module or use it in your main app component template to display the welcome message.

Angular

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

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

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule],
  template: `{{ message }}`
})
export class WelcomeComponent {
  message: string = '';

  constructor(private welcomeService: WelcomeService) {
    this.message = this.welcomeService.getMessage();
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WelcomeComponent],
  template: `
    
  `
})
export class AppComponent {}

Need a hint?

Use the <app-welcome></app-welcome> tag inside the root component template to show the welcome message.