Injectable Services in Angular: A Comprehensive Guide

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

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  // Service logic goes here
}

The @Injectable() decorator marks this class as an injectable service, meaning it can be used within Angular's Dependency Injection system. The providedIn: 'root' metadata ensures that the service is available globally across the application.

Step 2: Adding Functionality to the Service

Let's add a method to the HeroService to return some mock hero data:

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  getHeroes() {
    return HEROES;
  }
}

Here, the getHeroes() method returns an array of heroes from a mock data file (mock-heroes.ts). This demonstrates how you can easily use a service to handle data-related tasks.

Injecting Services into Components

Once a service is created, you can inject it into any component to access its functionality. To inject a service, declare it as a dependency in the component’s constructor.

For example, to inject the HeroService into a HeroListComponent, you would do the following:

import { Component } from '@angular/core';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
})
export class HeroListComponent {
  constructor(private heroService: HeroService) {}

  // Component logic using the HeroService
}

In this example, the HeroService is injected via the component’s constructor. Now, the HeroListComponent can use the getHeroes() method from the service to retrieve hero data.

Injecting Services into Other Services

Angular also allows one service to inject another service. This is particularly useful when a service depends on additional functionality provided by another service. For example, let's say the HeroService depends on a Logger service to log messages whenever heroes are fetched.

Here’s how you would inject the Logger service into the HeroService:

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Logger } from '../logger.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor(private logger: Logger) {}

  getHeroes() {
    this.logger.log('Getting heroes.');
    return HEROES;
  }
}

In this example, the Logger service is injected into the HeroService through its constructor. The getHeroes() method now logs a message each time heroes are fetched. This demonstrates how services can work together to provide more robust functionality.

Understanding the @Injectable() Decorator

The @Injectable() decorator is crucial for making a class injectable. It tells Angular’s Dependency Injection system that the class can be injected into other classes (components or services).

• providedIn: 'root': This metadata ensures that the service is provided at the root level, meaning it's a singleton and shared across the entire application. When you provide a service in the root, Angular optimizes it by only creating one instance of the service, regardless of how many components or services use it.

• Local Providers: You can also configure a service to be provided at the component level instead of the root by specifying providers directly in a component's metadata. However, using providedIn: 'root' is more common and recommended for services used throughout the application.

Service Examples

Let’s look at two examples of injectable services: a basic logging service and a hero-fetching service.

Logger Service Example

The Logger service is a simple class that logs messages to the console:

export class Logger {
  log(msg: unknown) {
    console.log(msg);
  }
  error(msg: unknown) {
    console.error(msg);
  }
  warn(msg: unknown) {
    console.warn(msg);
  }
}

This service provides logging capabilities that can be used by other services or components.

HeroService Example

Here’s a more complex HeroService that depends on both Logger and BackendService to fetch hero data:

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger
  ) {}

  async getHeroes() {
    this.heroes = await this.backend.getAll(Hero);
    this.logger.log(`Fetched ${this.heroes.length} heroes.`);
    return this.heroes;
  }
}

In this case, HeroService uses the BackendService to fetch heroes asynchronously and logs the result using the Logger service. This demonstrates how services can depend on one another to perform complex tasks.

Conclusion

In Angular, injectable services are a key feature for creating scalable, maintainable, and efficient applications. By encapsulating logic in services and injecting them into components or other services, you promote code reuse and separation of concerns. Angular’s Dependency Injection system makes it easy to create and use services across your application, ensuring that your components remain focused on handling user interactions and the view layer.

Whether you're fetching data, logging messages, or managing other business logic, injectable services in Angular allow you to build modular applications with ease.