How is dependency injection implemented in Angular? Explain hierarchical injectors.

Dependency Injection (DI) is a core design pattern in Angular that allows you to inject services and other dependencies into components, directives, pipes, and other services — without hard-coding their creation. This makes your app more modular, testable, and maintainable.

🔧 How Dependency Injection Works in Angular

At its core:

• Angular uses an Injector to create and deliver dependencies.

• When a class declares a dependency (usually in its constructor), Angular looks for a provider of that dependency and injects it.

✅ Example:

@Injectable()
export class AuthService {
  isLoggedIn(): boolean {
    return true;
  }
}

@Component({
  selector: 'app-login',
  template: `...`
})
export class LoginComponent {
  constructor(private authService: AuthService) {
    console.log(authService.isLoggedIn());
  }
}

In this case, AuthService is injected into LoginComponent.

🗂️ Providers: Where the Magic Happens

A provider tells Angular how to create a dependency. It can be declared at different levels:

• @Injectable({ providedIn: 'root' }) — Singleton, app-wide (preferred).

• Inside component/directive metadata (providers: [...])

• In NgModule metadata

🧱 Hierarchical Injectors in Angular

Angular’s DI system is hierarchical, meaning there are multiple injectors arranged in a tree-like structure that matches the component tree.

📌 Injector Hierarchy:

• Root injector (global, app-wide)

• Module injectors (scoped to NgModules)

• Component injectors (scoped to component and its children)

When Angular needs to resolve a dependency, it:

1. Checks the component’s own injector (if defined in providers).

2. If not found, walks up the tree toward the root injector.

✅ Real-World Example

@Component({
  selector: 'app-dashboard',
  providers: [LoggerService]
})
export class DashboardComponent {}

@Component({
  selector: 'app-widget',
  template: `...`
})
export class WidgetComponent {
  constructor(private logger: LoggerService) {}
}

• If WidgetComponent is a child of DashboardComponent, it gets a new instance of LoggerService.

• If LoggerService was provided in the root, WidgetComponent would share the same instance app-wide.

🎯 Why Hierarchical Injectors Matter

🔁 Reusability & Encapsulation

• You can scope services to components for isolation (e.g., local state, logging).

🧪 Testing

• Easier to mock or override services at component level.

⚠️ Potential Pitfall

• Accidentally declaring a service in multiple component providers can lead to unexpected multiple instances.

🔄 Summary

Concept	Description
Dependency Injection	Angular automatically injects required services via constructors
Injector	Registry that maps tokens to service instances
Root Injector	Global scope; services provided in 'root'
Hierarchical Injectors	Each component/module can have its own injector (child of parent)
Service Scope	Controls how many instances of a service are created and where shared