How dependency injection works in Angular - Try It Yourself

How dependency injection works in Angular

📖 Scenario: You are building a simple Angular application that shows a welcome message. You want to use Angular's dependency injection system to provide a service that supplies the message text.

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

📋 What You'll Learn

Create a service class called MessageService that has a method getMessage() returning the string 'Hello from Angular DI!'.

Create a standalone component called WelcomeComponent.

Inject the MessageService into the WelcomeComponent using Angular's dependency injection.

Display the message from the service inside the component's template.

💡 Why This Matters

🌍 Real World

Dependency injection is a core feature in Angular that helps manage how components get the services they need. This makes your app easier to maintain and test.

💼 Career

Understanding Angular's dependency injection is essential for building scalable and testable Angular applications, a key skill for frontend developers working with Angular.

1

Create the MessageService

Create a service class called MessageService with a method getMessage() that returns the string 'Hello from Angular DI!'.

Angular

// Create the MessageService class with getMessage() method
// Your code here

Need a hint?

Define a class with a method that returns the exact string.

2

Create the WelcomeComponent

Create a standalone Angular component called WelcomeComponent with a template that will display a message. Use the @Component decorator with standalone: true and a template containing <h1>{{ message }}</h1>.

Angular

export class MessageService {
  getMessage(): string {
    return 'Hello from Angular DI!';
  }
}

// Create the WelcomeComponent with standalone: true and template showing {{ message }}
// Your code here

Need a hint?

Use the @Component decorator with standalone: true and a simple template.

3

Inject MessageService into WelcomeComponent

Inject the MessageService into the WelcomeComponent constructor using Angular's dependency injection. Assign the message from messageService.getMessage() to the component's message property.

Angular

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

export class MessageService {
  getMessage(): string {
    return 'Hello from Angular DI!';
  }
}

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

  // Inject MessageService in constructor and assign message
  // Your code here
}

Need a hint?

Use constructor injection and assign the message inside the constructor.

4

Provide MessageService in WelcomeComponent

Add the providers array to the @Component decorator of WelcomeComponent and include MessageService to make it available for injection.

Angular

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

export class MessageService {
  getMessage(): string {
    return 'Hello from Angular DI!';
  }
}

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `{{ message }}`,
  // Add providers array with MessageService
  // Your code here
})
export class WelcomeComponent {
  message = '';

  constructor(private messageService: MessageService) {
    this.message = this.messageService.getMessage();
  }
}

Need a hint?

Add providers: [MessageService] inside the @Component decorator.