Injection Tokens and Advanced DI

Injection Tokens

Tokens allow injecting values other than classes:

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

// Token definition
export const API_URL = new InjectionToken<string>('API_URL');
export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>('FEATURE_FLAGS');

// Registration in configuration
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: API_URL, useValue: 'https://api.dojo.com/v1' },
    {
      provide: FEATURE_FLAGS,
      useValue: {
        darkMode: true,
        newDashboard: false
      }
    }
  ]
};

// Usage
@Injectable({ providedIn: 'root' })
export class ApiService {
  private apiUrl = inject(API_URL);

  getSamurai(id: number) {
    return this.http.get(`${this.apiUrl}/samurai/${id}`);
  }
}

Provider Factories

// useFactory - dynamic value creation
{
  provide: LoggerService,
  useFactory: (env: EnvironmentService) => {
    return env.isProduction()
      ? new ProductionLogger()
      : new DevelopmentLogger();
  },
  deps: [EnvironmentService]
}

// useClass - swapping implementations
{
  provide: StorageService,
  useClass: environment.production
    ? CloudStorageService
    : LocalStorageService
}

// useExisting - alias
{
  provide: OldService,
  useExisting: NewService
}

Multi Providers

export const HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS');

// You can add multiple values to a single token
{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true
},
{
  provide: HTTP_INTERCEPTORS,
  useClass: LoggingInterceptor,
  multi: true
}