Setting Up Injection Tokens with Dynamic Values
| March 15, 2023 | in
Injection tokens are a popular way of providing dependencies in Angular. They are used to provide a value, such as a service instance or a configuration setting, to a component or other part of the application. Below is a simple example of setting up an injection token and using it.
Suppose you have a constant value that is needed in several components. You can define it as a static value and provide it to the components or services requiring it:
In the above example, the injection token provides its invariable value to other components or services. In the example below, I want to show an injection token of type
BehaviorSubject* where other components or services can change its value.
BehaviorSubject is an RxJS construct that maintains a value and broadcasts changes to that value to its subscribers. BehaviorSubjects are commonly used in Angular applications to share data between components.
In this example, we define an
Default_Value that is typed as a
BehaviorSubject. We also define a component called
MyComponent that injects this token. We want any components or services that use the injection token to be able to assign their desired default values to the string object.
The constructor of
MyComponent injects the
Default_Value token and sets the value of
defaultValue to the current value of the behavior subject by calling
Now, let’s say you want to provide an instance of this
BehaviorSubject with a default value of “Hello, world!” to the dependency injection system so that it can be injected into the
MyComponent. You can do this in your module as follows:
MyComponent is created, it will receive the instance of the behavior subject with the default value of “Hello, world!” and set its
defaultValue property accordingly. If other components want to set a different default value in
MyComponent, they can do it easily thanks to
InjectionToken of type