Compare injecting dependencies in constructor versus the modern inject() function.
01
01
Understand the problem
didependency-injection
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
Read the code
Comparison of constructor-based DI and functional inject()
import { Component, Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class UserService {}
// 1. Classical constructor approach
@Component({
selector: 'app-legacy-user',
template: '...'
})
export class LegacyUserComponent {
constructor(public userService: UserService, private http: HttpClient) {}
}
// 2. Modern inject() approach
@Component({
selector: 'app-modern-user',
template: '...'
})
export class ModernUserComponent {
userService = inject(UserService); // Field injection
private http = inject(HttpClient);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.