mediumFrontend

How does Dependency Injection work in Angular?

Q: How does Dependency Injection work in Angular?

## Dependency Injection Angular has a **hierarchical injector** system. You ask for a dependency by its **token** (usually a class type) in a constructor (or via `inject()`), and Angular's injector **finds or creates** the instance and hands it over — you never `new` it yourself. This decouples classes from how their collaborators are built and makes testing (swap in a mock) easy. Injectors form a tree: a request bubbles **up** from the component's injector toward the **root** injector until a provider is found. `@Injectable({ providedIn: 'root' })` registers an app-wide **singleton**. <text class='d-text' x='230' y='48' text-anchor='middle'

452 views

Understand the problem

Explain Angular's DI system.

diservices

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.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Inject a service via the constructor

Run Playground

import { Component, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })   // app-wide singleton, registered at root
export class Logger {
  log(msg: string) { return 'LOG: ' + msg; }
}

@Component({
  selector: 'app-root',
  template: '<p>{{ message }}</p>',
})
export class AppComponent {
  message: string;
  // Angular resolves the Logger token and injects the instance.
  constructor(private logger: Logger) {
    this.message = this.logger.log('DI works');
  }
}

Join the discussion

Discussion (0)

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

What are functional HTTP Interceptors in modern Angular, and how do you register them?

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