In this article, I want to talk about a feature which Angular provides, that isn’t particularly well known or used by many developers. When using Angular InjectionToken, we can specify a factory function which returns a default value of the parameterized type T. For example:

This sets up the InjectionToken using this factory as a provider, as if it was defined explicitly in the application’s root injector. Now we can use it anywhere in our application:

But that’s not all. We can use the inject function to obtain a reference to other providers inside our factory function. Let’s see another real-world example:

In the above example, we inject the ActivatedRoute provider and return an observable for the timespan query param. Now we can use it in our components:

We can also pass InjectionFlags to the inject function. For example, we can say that the requested provider is optional:

Here’s another real-world example — let’s say you have a theme service, which exposes the current user’s theme:

The only data that most components need is the current theme. So instead of doing the following in each component:

We can create a provider with the sole purpose of providing the current user’s theme:

In summary, the benefits of using the InjectionToken factory function are:

  • The provider is tree-shakeable, since we don’t need to inject it in our app module as we’d do with the useFactory provider.
  • Using inject() to request a provider is faster and more type-safe than providing an additional array of dependencies (which is the common usage of useFactory providers).
  • The provider has a single responsibility, and our components are injected only with the data they need.
  • It makes testing more straightforward because we don’t need to mock everything. We can return a mock value from the factory, and that’s all.

 

Leave a comment

Your email address will not be published.