hardFrontend

What is an InjectionToken?

Q: What is an InjectionToken?

**Core concept.** An InjectionToken is a **unique key** for injecting things that **aren't classes** — config objects, strings, functions, or interface-typed values. Because TypeScript interfaces don't exist at runtime, you can't inject by interface; a token gives DI a stable, collision-proof identity to provide and inject by. InjectionToken<Config> unique key <rect class='d-box' x='260' y='44' width='1

874 views

Understand the problem

Explain InjectionToken.

diinjection-token

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

Define, provide, and inject a token

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

export interface AppConfig { apiUrl: string; retries: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

@Component({
  selector: 'app-root',
  standalone: true,
  providers: [
    { provide: APP_CONFIG, useValue: { apiUrl: '/api', retries: 3 } },
  ],
  template: '<p>{{ cfg.apiUrl }} (retries: {{ cfg.retries }})</p>',
})
export class AppComponent {
  cfg = inject(APP_CONFIG);   // typed as AppConfig
}

Join the discussion

Discussion (0)

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

How does compilation work under the hood in Ivy?

What is Zone.js, how does it monkey-patch browser APIs, and how do you build a Zoneless Angular application?