Angular Dependency Injection In Depth : Complete Guide

santosh

10 Jun, 2023

Angular Dependency Injection In Depth : Complete Guide

In this tutorial, we’ll explore how to build a Todo Manager application using Angular. We’ll create components for managing todos, and leverage Angular’s advanced dependency injection features.

Angular Dependency Injection (DI) is a powerful feature that allows for efficient management and injection of dependencies in Angular applications. While the basic usage of DI is well-known, Angular also offers some advanced features to enhance the dependency injection process. Here are some of the advanced features of Angular DI:

Hierarchical Dependency Injection: Angular supports hierarchical injection, where dependencies can be resolved at different levels within the application. This allows for more fine-grained control over how dependencies are provided and shared between components.
Custom Injectors: Angular allows the creation of custom injectors to override the default injection behavior. Custom injectors enable advanced scenarios where specific dependencies need to be resolved differently based on certain conditions or configurations.
Injection Tokens: Injection tokens provide a way to define and identify dependencies in Angular. They are used to map tokens to the corresponding provider configuration. Injection tokens allow for more flexibility in resolving dependencies and can be used in scenarios where multiple implementations of a service are required.
Factory Providers: Angular supports the use of factory providers, where a factory function is used to create and provide instances of a dependency. This can be useful in cases where the creation of a dependency requires some additional configuration or initialization.
InjectionScope: InjectionScope is an experimental feature in Angular that allows for more granular control over the lifetime and scope of injected dependencies. It provides options to define different scopes like singleton, component-level, or lazy-loaded module-level scopes for dependencies.
Dependency Injection Decorators: Angular provides decorators such as @Optional, @Self, @SkipSelf, and @Host that can be used to modify the default injection behavior. These decorators allow for more precise control over dependency resolution and can be handy in complex dependency scenarios.
Async Dependency Resolution: Angular supports asynchronous resolution of dependencies using the useFactory function or by returning a Promise or an Observable from the provider configuration. This enables fetching dependencies from remote sources or performing asynchronous operations during dependency resolution.

These advanced features of Angular DI provide developers with powerful tools to handle complex dependency scenarios, customize injection behavior, and achieve more flexibility and control over the dependency injection process in Angular applications.

Hierarchical Dependency Injection

Create a new Angular project using the Angular CLI.

ng new todo-manager-app

Set up the basic project structure and import necessary dependencies.

cd todo-manager-app

Define the Todo interface in the todo.model.ts file.

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

Implement the TodoServiceV1 in the todo.service-v1.ts file.

import { Injectable } from "@angular/core";
import { Todo } from "../models/todo.model";
@Injectable({
  providedIn: 'root',
})
export class TodoServiceV1 {
  private todos: Todo[] = [];

  getAllTodos(): Todo[] {
    return this.todos;
  }

  addTodo(todo: Todo): void {
    this.todos.push(todo);
  }

  updateTodo(todo: Todo): void {
    const index = this.todos.findIndex((t) => t.id === todo.id);
    if (index !== -1) {
      this.todos[index] = todo;
    }
  }

  deleteTodo(todoId: number): void {
    const index = this.todos.findIndex((t) => t.id === todoId);
    if (index !== -1) {
      this.todos.splice(index, 1);
    }
  }
}

Create a new service file called TodoServiceHierarchy that extends the TodoServiceV1 class. This new service will be responsible for providing a separate instance of the TodoServiceV1 for a specific component or component subtree. Save it as todo-service-hierarchy.service.ts.

import { Injectable } from '@angular/core';
import { Todo } from '../models/todo.model';
import { TodoServiceV1 } from './todo.service-v1';

@Injectable({providedIn:'root'})
export class TodoServiceHierarchy extends TodoServiceV1 {
  // Implement any additional or overridden functionality specific to this instance
  override getAllTodos(): Todo[] {
    return [
      { id: 1, title: "Hirerachy todo", completed: false }
    ]

  }
}

Generate a TodoListComponent to display the list of todos.

ng generate component todo-list

Inject the TodoServiceHierarchy into the TodoListComponent.

import { Component, Injectable } from '@angular/core';
import { Todo } from '../models/todo.model';
import { TodoServiceHierarchy } from '../services/todo-service-hierarchy.service';
import { TodoServiceV1 } from '../services/todo.service-v1';
@Component({
  selector: 'app-todo-list',
  template: `
    <ul>
      <li *ngFor="let todo of todos">
        {{ todo.title }}<button (cllick)="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
  `,
  providers: []

})
export class TodoListComponent {
  todos: Todo[] = [];

  constructor(private todoService: TodoServiceHierarchy) {
    this.todos = this.todoService.getAllTodos();
  }
  deleteTodo(id: any) {

  }
}

Update the app.component.html file to include the TodoListComponent

<div>
  <h1>Todo Manager App</h1>
  <app-todo-list></app-todo-list>
</div>

Run the application.

ng serve

In this example, we created separate instances of the TodoServiceV1 using hierarchical dependency injection. The TodoListComponent uses the TodoServiceHierarchy to retrieve and display the list of todos, while the TodoListComponent uses the original TodoServiceV1 to retrieve and display todo details.

By leveraging hierarchical dependency injection, each component gets its own isolated instance of the TaskService, allowing them to manage tasks independently. This approach provides flexibility and control over the lifecycle and configuration of services, ensuring that each component operates with the desired functionality.

Angular Dependency Injection In Depth- Custom Provider in Angular

Angular Dependency Injection In Depth- Injection Tokens

Angular Dependency Injection In Depth-Factory Providers

Angular Dependency Injection In Depth-Dependency Injection Decorators