Injecting a Service

In the world of Angular, services are primarily used to organize and share data or logic that could be used across multiple components. However, to make use of these services, you need to understand how to inject them into parts of your application where they're needed - a process known as Dependency Injection (DI). In this tutorial, we are going to cover the basics of injecting a service in Angular.

What is Dependency Injection?

Let's start with the basics. Dependency Injection (DI) is a core aspect of Angular. It's a design pattern in which a class requests dependencies from external sources rather than creating them itself. In the context of Angular, the 'external source' is usually an Angular injector.

Creating a Service

Before we can inject a service, we need to create one. Here's an example of a simple service:

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  data: string[] = ['Data 1', 'Data 2', 'Data 3'];

  constructor() { }

  getData() {
    return this.data;
  }
}

In the above code, we've created a service called DataService. This service has a data property and a getData method. The @Injectable() decorator tells Angular that this service might itself have injected dependencies. While it doesn't have any in this case, it's a good practice to add it.

Injecting the Service

To inject the service, you would first import it into your component and then add it to the component's constructor as a parameter. Here's how:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  data: string[];

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

In the above code, we're injecting the DataService into the AppComponent. We do this by adding a parameter to the AppComponent's constructor. The private keyword in the constructor argument creates and initializes a new private property in our class.

Now, our AppComponent has access to the DataService and can use its methods and properties. In this case, it's using the getData method to get the data and store it in its own data property.

The Role of the Injector

In Angular, an injector is responsible for creating instances of and delivering services to classes like components. When you add a service as a parameter to the component's constructor, Angular tries to find an existing instance of the service to provide. If it can't find an existing instance, it creates a new one.

The providedIn: 'root' metadata in the @Injectable() decorator tells Angular to provide the service in the root injector. There's only one root injector in an Angular application, and all components in the application can access services provided in the root injector.

That's the basics of service injection in Angular. By managing dependencies in this way, Angular helps us write clean, modular code that's easy to test and maintain.