What is Dependency Injection DI and how is it used in Angular

Dependency Injection (DI) is a design pattern and a fundamental concept in software engineering that Angular heavily relies on. It is a technique where one object supplies the dependencies of another object rather than the object creating its dependencies internally. In the context of Angular, DI is used to inject dependencies (like services or other objects) into components, services, directives, pipes, and other Angular classes.

Key Concepts of Dependency Injection in Angular:

1. Injection Tokens: In Angular, every class that participates in DI is represented by an injection token. These tokens are used to identify the dependency that needs to be injected.

2. Injectors: Angular has a hierarchical dependency injection system. At the top of this hierarchy is the root injector, which is created when the application is bootstrapped. There can also be child injectors for lazy-loaded modules or components.

3. Providers: Providers tell Angular how to obtain a dependency value. Providers can be registered at different levels (root, module, component) and specify how Angular should create or obtain instances of dependencies.

How Dependency Injection Works in Angular:

1. Injecting Services into Components: The most common use case of DI in Angular is injecting services into components. Here’s how you inject a service into a component:

   import { Component } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-example',
     template: `...`
   })
   export class ExampleComponent {
     constructor(private dataService: DataService) {
       // DataService is injected into ExampleComponent
     }
   }
   

   • Here, DataService is injected into ExampleComponent via its constructor. Angular's DI system automatically resolves the DataService dependency by looking up the appropriate provider for DataService.

2. Providing Dependencies: Providers are used to register dependencies and tell Angular how to create or obtain instances of those dependencies. Providers can be registered at different levels:

   • Root Level: Providers specified in @Injectable() with providedIn: 'root' are registered at the application root injector level and are available throughout the application.
   • Module Level: Providers specified in a module's providers array are registered at the module level and are available to all components and services within that module.
   • Component Level: Providers specified in a component's providers array are registered at the component level and are available only to that component and its children (if any).

   import { NgModule } from '@angular/core';
   import { DataService } from './data.service';
   
   @NgModule({
     providers: [DataService] // DataService is provided at the module level
   })
   export class AppModule { }
   

3. Hierarchical Injection: Angular’s DI system is hierarchical, meaning that injectors form a tree-like structure that parallels the component tree of your application. When Angular needs to resolve a dependency, it looks up the injector hierarchy starting from the component requesting the dependency and goes up to the root injector.

4. Injecting Tokens Other than Services: While services are the most common dependencies injected, Angular's DI system can inject other tokens like values, factories, and instances.

Dependency Injection in Angular promotes modularity, reusability, and testability by allowing components and services to be loosely coupled and independently testable. It simplifies managing dependencies and encourages the use of single responsibility principle by separating the creation and use of objects. This makes Angular applications easier to maintain and scale.