Chapter 5.2☕ 15 min read

Dependency Injection — How Angular Resolves

Angular gives you dependencies — you don't create them yourself.

01What is Dependency Injection

Dependency Injection (DI) is a pattern where Angular provides dependencies to your classes instead of you creating them.

"DI = Swiggy delivery — tum biryani nahi banate, Swiggy deliver karta hai."

Without DI: You create everything yourself:

const logger = new LoggerService();\nconst http = new HttpClient();\nconst router = new Router();\n// You manage creation, lifecycle, cleanup...

With DI: You ask, Angular provides:

private logger = inject(LoggerService);\nprivate http = inject(HttpClient);

Angular creates, manages, and provides the instances — you just use them.

02The Injector — Angular's Delivery System

The Injector is the core of DI — it's a container that holds service instances and knows how to create them.

"Injector = warehouse — order do, milega."

When you call inject(ServiceName), Angular:

Checks the injector if an instance already exists
If yes → returns that instance
If no → creates a new instance using the provider, stores it, and returns it

Angular doesn't have ONE injector — it has a tree of injectors that mirrors your component tree.

03Injector Hierarchy — Tree of Injectors

Angular's injectors are organized in a hierarchy:

Root injector (AppModule/app.config level) — topmost, one per app
Component injector — each component has its own injector

"Root injector = Hyderabad main warehouse, Component injector = local branch."

When a component asks for a service, Angular:

Checks the component's own injector first
If not found, checks the parent component's injector
Keeps going up the tree until it reaches the root injector
If still not found → throws an error

This is why providedIn: 'root' makes a service available everywhere — it lives in the root injector that ALL components can reach.

04Resolution Process Step by Step

Let's trace through a real resolution:

// GrandchildComponent injects BiryaniService\nprivate service = inject(BiryaniService);\n\n// Step 1: Check GrandchildComponent's injector\n// → Not found (BiryaniService is at root)\n\n// Step 2: Check ParentComponent's injector\n// → Not found\n\n// Step 3: Check AppComponent's injector\n// → Not found\n\n// Step 4: Check Root Injector\n// → Found! (because @Injectable({ providedIn: 'root' }))\n// → Return the singleton instance

"Breadth-first search — pehle apne level pe dhundho, phir upar jao."

This upward resolution means child components inherit their parent's services — unless they override them by providing their own.

05Why DI is Powerful

Why is DI such a powerful pattern?

Testable — Inject a mock service in unit tests. No need to modify component code.
Flexible — Swap implementations without changing component code. LoggerService → ConsoleLoggerService.
Singleton by default — One instance shared everywhere. Consistent state across the app.
Decoupled — Component doesn't know HOW the service is created, just uses it.

"DI ka matlab — component ko koi fikar nahi ki service kaise bani, bas use karo."

Key Takeaways

✅ DI lets Angular provide dependencies — you don't create them (like Swiggy delivery).
✅ Injector is the container that holds and creates service instances.
✅ Injectors form a hierarchy matching the component tree — child checks parent up to root.
✅ Resolution: component injector → parent → ... → root injector.
✅ DI makes code testable, flexible, singleton-efficient, and decoupled.

Previous5.1 — Creating Services 📋 All Chapters Next Chapter5.3 — inject() vs Constructor →