Injection Token in Angular

The DI system in Angular uses tokens to uniquely identify a Provider. There are three types of tokens that you can create in Angular. They are Type Token, String Token, and Injection Token.

DI Tokens

We declare the Provider in with providers metadata. This is how it looks like.

The syntax has two properties. provide (provide: ProductService) & provider (useClass: ProductService)

The first property is Provide holds the Token or DI Token. The Tokens act like a key. The DI systems need the key to locate the provider in the Providers array.

Angular Provider

The Token can be either a type, a string or an instance of InjectionToken.

Type Token

Here the type being injected is used as the token.

For Example, we would like to inject the instance of the ProductService, we will use the ProducService as the token as shown below

The ProductService is then injected into the component by using the following code.

You can keep the same token (ProductService) and change the class to another implementation of the Product service. For Example in the following code, we change it to BetterProductService.

Angular does not complain if we use the token again. In the following example token ProductService used twice. In such a situation last to register wins (BetterProductService).

Stackblitz

String token

You can use the Type token only if you have Type representation. But that is not the case always. Sometimes we need to inject simple string values or simple object literal, where there is no type.

We can use string tokens in such a scenario.

Example

You can then use the Inject the ProductService using the @Inject method

Example:

Stackblitz

Code

Problems with the String Tokens

The String tokens are easy to use but prone to error. Two developers can use the same token at the different parts of the app. The third-party libraries can also use the same token.

If we re-use the token, then the last to register overwrites all previously registered tokens.

String tokens are easier to mistype and that makes it difficult to track & maintain in big applications.

This is where the InjectionToken comes into the picture.

What is an Injection Token

The Injection Token allows creating token that allows the injection of values that don’t have a runtime representation.

It is very similar to string tokens. But instead of using a hardcoded string, we create the Injection Token by creating a new instance of the InjectionToken class. They ensure that the tokens are always unique.

In Angular 4 and prior versions used OpaqueToken. It now deprecated and replaced by InjectionToken.

Creating an InjectionToken

To Create an Injection Token, first, we need to import InjectionToken from @angular/core

Create a new Injection Token APIURL from InjectionToken

Register it in the providers array.

Inject it into the Component

InjectionToken Example

The following example shows how to use the Injection Token. You can refer to the Stackblitz for the code

token.ts

app.module.ts

Stackblitz

app.component.ts

Code

Reference

InjectionToken

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top