Angular injection context

Within a constructor
As a definition of a class field
Inside the factory function

Terminology

Injectable: Any class decoracted with @Injectable.
Injector: The object that is responsible for creating instances of services and injecting them into components.
Injector scope: The scope of all class instances that live "below" a specific injector.
Injector hierachy: A priotized tree of injector scopes, organized in platform -> root -> module -> component order.
Injectable is provided: An instance of the injectable will be given to classes below this specific injector level, whenever they request it.
Injectable is injected: A class constructor has requested to be given some instance of the service, so Angular will try to give it the nearest instance that can be found in the injector hierarchy
Tree-shaking: An optimization that happens automatically thanks to the Angular compiler. When it detects that some code is not being used, that code is removed from the final compilation of the app (or compilation of a given lazy-loaded module).

Other terms that you should already know: class, instance, module, component, lazy/eagerly loaded modules

Injection

Injectable decorator

The @Injectable decorator is not required if the service has no dependencies. You need it when you need to inject other services into the service, and only if you need to inject other services into our service, NOT TO INJECT THE SERVICE INTO OTHER COMPONENTS/SERVICES.

ProvidedIn

You have 3 options to provide a service:

root - the service is provided in the root injector Single shared instance of MyService to all classes in the application.
platform - the service is provided in the platform injector Angular will create and provide a single shared instance of MyService to all Angular applications on the page. (This is only relevant in advanced use cases, if you use a micro-frontends architecture.)
any - the service is provided in the injector of the current module DEPRECATED since Angular 15

The benefit of using providedIn is that Angular can optimize the app by loading the service lazily. The root option is the same as the old way of providing a service in the root module.

Tips
You can use Empty Injectable() to keep control of the service scope of and provide some other services dependencies.
In this case the value of providedIn will be null, an you will need to explicitly provide the service in the providers array of the module or component.

Hierarchical Injectors

Each Angular application has its own injector hierarchy. When Angular creates a component, it creates a new injector for that component and its children. So if you inject a service into a component, Angular will look for the service in the component's injector, then in the parent component's injector, and so on until it reaches the root injector.

Example of injecting a service in a component

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ myService.value }}</h1>
  `,
  providers: [MyService]
})
export class AppComponent {
  myService = inject(MyService);
  constructor(public myService: MyService) {}
}

export class MyService {
  value = 'Hello, World!';
}

The MyService is provided in the providers array of the @Component decorator. This means that the service is only available to the AppComponent and its children.

Injection Token

Injection token are passed in inject function, for example in our previous example, the injection token are the class of service itself.

So we can customize the injection token of our service by using useClass.

export const MY_SERVICE_TOKEN = new InjectionToken<MyService>('MyServiceToken');

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ myService.value }}</h1>
  `,
  providers: [
    { provide: MY_SERVICE_TOKEN, useClass: MyService }
  ]
})
export class AppComponent {
  myService = inject(MY_SERVICE_TOKEN);

We can also create an injection token and return a static value, like this

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

// Define an injection token
export const MY_VALUE_TOKEN = new InjectionToken<string>('MyValueToken');

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ myValue }}</h1>
  `,
  providers: [
    { provide: MY_VALUE_TOKEN, useValue: 'Hello from useValue!' }
  ]
})
export class AppComponent {
  myValue = inject(MY_VALUE_TOKEN);
}

And for dynamic value you can also use useFactory to compute and return some value.

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

// Define an injection token
export const MY_DYNAMIC_VALUE_TOKEN = new InjectionToken<string>('MyDynamicValueToken');

// Function to compute a dynamic value
export function dynamicValueFactory() {
  return `Dynamic value generated at ${new Date().toLocaleTimeString()}`;
}

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ myDynamicValue }}</h1>
  `,
  providers: [
    { provide: MY_DYNAMIC_VALUE_TOKEN, useFactory: dynamicValueFactory }
  ]
})
export class AppComponent {
  myDynamicValue = inject(MY_DYNAMIC_VALUE_TOKEN);
}

Angular injection context ​

Terminology ​

Injection ​

Injectable decorator ​

ProvidedIn ​

Hierarchical Injectors ​

Example of injecting a service in a component ​

Injection Token ​

References ​