Angular 17: Services and Dependency Injection

In previous chapters, we explored how to create Angular services. Now, we’ll delve deeper into how to inject these services into components. Dependency injection (DI) is one of Angular’s core features—it decouples components from services, making code more modular and significantly easier to test.

Understanding Dependency Injection

Dependency Injection (DI) is a design pattern that enables us to obtain required dependencies where they’re needed, rather than instantiating them directly inside the dependent class. This improves code maintainability and testability. In Angular, DI is implemented via the Injector service.

How to Inject a Service

In Angular, you inject a service by declaring its type in a component’s constructor. Below is a simple example demonstrating service injection into a component.

Creating a Simple Service

Suppose we previously created a service named DataService, which provides some data. Let’s first define this service:

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

@Injectable({
  providedIn: 'root'  // Makes the service available at the application root level
})
export class DataService {
  private data: string[] = ['Angular', 'React', 'Vue'];

  getData(): string[] {
    return this.data;
  }
}

Injecting the Service into a Component

Next, we’ll inject this DataService into a component named AppComponent. Here's how:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to My Application</h1>
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.data = this.dataService.getData();  // Use data provided by the service
  }
}

In the code above, we inject the service via private dataService: DataService in the constructor. Then, inside the ngOnInit lifecycle hook, we call dataService.getData() to retrieve the data and assign it to the component’s data property.

Using Service Methods

Once the service is injected and used in the component, we can leverage Angular’s built-in mechanisms—such as services themselves—to manage and utilize the data it provides. Below, we add a method to update the data from within the component:

updateData(newData: string): void {
  this.dataService.addData(newData); // Assume DataService has an addData() method
  this.data = this.dataService.getData(); // Fetch updated data
}

This approach allows us to update data within the service whenever needed—without modifying data directly in the component—ensuring data consistency across the application.

Summary

In this chapter, we learned how to inject services into Angular components. This practice greatly enhances modularity and service reusability. In the next chapter, we’ll focus on using Angular’s HttpClient service to interact with external APIs—further exploring the powerful capabilities of services and dependency injection. For any Angular application aiming to implement complex functionality, mastering dependency injection is essential.

Let’s prepare for the next topic: exploring how to use HTTP APIs within services.