0Pricing
Angular Academy · Lesson

Injection Tokens

Inject non-class values with tokens.

Injection Tokens is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Injection Tokens

Not every dependency is a class. To inject values like configuration objects, strings, or interfaces, you use an InjectionToken as a unique key.

Why Tokens

Classes can be used directly as DI keys, but interfaces and primitive values cannot (interfaces vanish at runtime). An InjectionToken provides a stable, typed key for these cases.

Creating a Token

Create a token with new InjectionToken<T>, passing a human-readable description.

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

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

The Type Parameter

The generic type parameter (here string) gives the token a type, so injected values are properly typed.

Providing a Token Value

Register the token with a value using useValue in a providers array.

// bootstrapApplication(AppComponent, {
//   providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
// });

Injecting a Token

Inject the token with the inject function to get its value.

import { inject } from '@angular/core';
import { API_URL } from './tokens';

export class Api {
  private baseUrl = inject(API_URL);
}

Tokens for Configuration

A common use is app configuration: define an interface, create a token typed to it, and provide a config object.

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

Providing the Config

Then provide the configuration value at bootstrap.

// providers: [{ provide: APP_CONFIG, useValue: { title: 'My App', retries: 3 } }]

Factory Defaults

A token can supply a default via a factory in its options, so it works even without an explicit provider.

export const RETRIES = new InjectionToken<number>('RETRIES', {
  providedIn: 'root',
  factory: () => 3
});

Tokens vs Classes

Use a class as the key when the dependency is a service class. Use an InjectionToken when injecting non-class values: configs, primitives, or interface-typed objects.

Avoiding Magic Strings

InjectionTokens replace fragile string keys with typed, collision-free identifiers, catching mistakes at compile time.

Quick Check: Tokens

Injecting non-class values.

Recap: Injection Tokens

You learned that InjectionToken provides typed keys for injecting non-class values like config objects, strings, and interface-typed data. Create one with new InjectionToken, provide it with useValue or a factory default, and inject it with inject(). You have completed the Dependency Injection course.

Frequently asked questions

Is the “Injection Tokens” lesson free?

Yes — the full text of “Injection Tokens” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Injection Tokens”?

Inject non-class values with tokens. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Injection Tokens” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Services and Injectable
  2. The inject Function
  3. Providers and Scopes
  4. Injection Tokens
← Back to Angular Academy