Sign in
Skip to solution
mediumFrontend

What is the difference between constructor-based DI and the inject() function?

446 views
01

Understand the problem

Compare injecting dependencies in constructor versus the modern inject() function.

didependency-injection
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Constructor-based injection uses TypeScript parameter types to resolve dependencies. The functional inject() API can be used outside constructors in initialization contexts (like field declarations, guards, or custom functions), enabling cleaner composition and functional APIs.

Solution ready — 2 min read

Classified // press E to declassify

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

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 58 of 121 decoded in the Angular track. One more won't hurt.

Back to track