Hierarchical Dependency Injection in Angular

Hierarchical Dependency Injection (DI) in Angular allows for a flexible and efficient way to manage the creation and sharing of services throughout an application.

Overview of Hierarchical Dependency Injection

Angular's DI system is hierarchical, meaning that injectors form a tree structure where child injectors inherit providers from their parent injectors. This allows for varying service instances across different parts of the application based on the injector hierarchy.

Injector Hierarchy

Angular's injectors are organized in a hierarchical structure, enabling different levels of dependency resolution:

• Root Injector: The top-level injector created during the application bootstrap. It typically provides singleton services available throughout the app.
• Module Injector: Specific to Angular modules, allowing for module-level service instances.
• Component Injector: Specific to Angular components, providing component-level service instances.

Example: Root vs. Component-Level Providers

Let's consider an example where we define a service and provide it at different levels.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [MyService], // Root-level provider
  bootstrap: [AppComponent]
})
export class AppModule { }

// my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private count = 0;

  constructor() { }

  increment() {
    this.count++;
  }

  getCount(): number {
    return this.count;
  }
}

// parent.component.ts
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-parent',
  template: '',
})
export class ParentComponent {
  constructor(private myService: MyService) {
    this.myService.increment();
  }
}

// child.component.ts
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-child',
  template: '
Count: {{ myService.getCount() }}
',
  providers: [MyService] // Component-level provider
})
export class ChildComponent {
  constructor(public myService: MyService) {
    this.myService.increment();
  }
}
        

In this example:

• The `MyService` provided at the root level is shared across the application.
• The `MyService` provided at the component level (`ChildComponent`) creates a new instance specific to that component.

Key Points

Conclusion

Hierarchical Dependency Injection in Angular provides a powerful mechanism for managing service instances at various levels of an application, promoting modularity and efficiency.