Angular Academy · Lesson

Injection Tokens

Inject non-class values with tokens.

Lesson 4 of 413 steps

Injection Tokens is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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

// 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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Injection Tokens” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Injection Tokens”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

← Back to Angular Academy