Injection Tokens

An InjectionToken lets you provide and inject values like config strings, feature flags, or factory results.

4 min read Level 3/5 #angular#di#tokens

What you'll learn

Create a typed InjectionToken
Provide a value through the providers array
Inject it with the inject() function

Sometimes the thing you want to inject is not a class — it is a URL, a feature flag, or the result of a factory. InjectionToken gives that value a typed identity DI can recognize.

Create a token

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

The string is just a debug label. The type parameter is the real contract — inject(API_URL) returns a string.

Provide a value

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { API_URL } from './tokens';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' },
  ],
};

Inject anywhere

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_URL } from './tokens';

@Injectable({ providedIn: 'root' })
export class UsersService {
  private http = inject(HttpClient);
  private baseUrl = inject(API_URL);

  list() {
    return this.http.get(`${this.baseUrl}/users`);
  }
}

Factory tokens

useFactory lets you compute the value at provision time — it can itself use inject().

{
  provide: API_URL,
  useFactory: () => inject(EnvService).isProd ? 'https://api.app.com' : '/api',
}

Injection tokens are the bridge between DI and the rest of your config. Use them anywhere a class would feel like overkill.

HttpClient →