How does Dependency Injection Work in Angular?
💡 Concept Name
Dependency Injection in Angular – A design pattern used to inject dependencies (services) into components instead of creating them directly.
📘 Quick Intro
Angular’s DI system automatically provides class instances (like services) where needed. Instead of creating service objects manually, Angular injects them into components, making code more testable and modular.
🧠 Analogy / Short Story
Imagine ordering food at a restaurant: you don’t cook, the chef (provider) handles it and the waiter (injector) delivers it to your table (component). Angular’s DI is the waiter delivering ready-made services so you don’t cook them yourself.
🔧 Technical Explanation
- 🏗️ DI is built into Angular's core architecture via the injector mechanism.
- 📦 Services are provided using the
@Injectable()decorator and registered in modules or components. - 🚚 Angular injects dependencies using the constructor of the class (constructor injection).
- 🔍 Tokens are used to identify what dependency should be injected.
- 🔁 Scopes: services can be provided at root, component, or module level.
🎯 Purpose & Use Case
- ✅ Reuse logic across components using shared services.
- ✅ Abstract API calls into injectable services.
- ✅ Easily swap dependencies for testing or different implementations.
- ✅ Manage app-wide configuration from a centralized service.
💻 Real Code Example
// data.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {
getMessage() {
return 'Hello from DataService!';
}
}
// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: '{{ message }}'
})
export class AppComponent {
message: string;
constructor(private dataService: DataService) {
this.message = this.dataService.getMessage();
}
}
❓ Interview Q&A
Q1: What is dependency injection in Angular?
A: A design pattern where Angular injects dependencies (services) into classes rather than instantiating them.
Q2: How does Angular identify which dependency to inject?
A: By using tokens and the constructor’s parameter types.
Q3: What does providedIn: 'root' do?
A: Registers the service at the application root level (singleton scope).
Q4: What decorator marks a class as injectable?
A: @Injectable().
Q5: Can services be scoped to components?
A: Yes, by using the providers array in component metadata.
📝 MCQs
Q1. What Angular decorator is used for making a service injectable?
- @Component()
- @NgModule()
- @Injectable()
- @Provider()
Q2. What does Angular use to identify what to inject?
- Service
- Token
- Value
- Parameter
Q3. How do you inject a service into a component?
- Using import statement
- Via constructor
- With @Inject directive
- With template binding
Q4. What does 'providedIn: root' mean?
- It is local to component
- Service is not injectable
- Service is singleton for the app
- It is registered on each route
Q5. Which of the following is NOT a DI feature?
- Multi-provider
- Hierarchical injector
- ViewChild
- Constructor injection
💡 Bonus Insight
You can use @Inject() decorator for more control over the token being injected. Also, Angular’s tree-shakable providers eliminate unused services during build for better performance.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!