How to update dependency injection token value

Question

Angular dependency injection let you inject a string, function, or object using a token instead of a service class.

I declare it in my module like this:

providers: [{ provide: MyValueToken, useValue: 'my title value'}]

and I use it like this:

constructor(@Inject(MyValueToken) my_value: string) {
  this.title = my_value;
}

However, how can I update the value from the component and let other components get every time the new value? in other words, I want to simulate the functionality of using something like a BehaviorSubject to emit and receive values.

If this is not possible then what is the use of those injection tokens values if they provide only static data as instead I can simply declare the static value in my component and use it directly.

Answer 1

Instead of a primitive which is immutable, you can use a BehaviorSubject, then access and update it in one component and subscribe in the other:

providers: [{ provide: MyValueToken, useValue: new BehaviorSubject('')}]

// consumer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.subscribe((my_value)=>this.title = my_value);
}

// producer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.next('my title value');
}

Answer 2

In addition to the Wizard:

If you have a use-case where every consumer needs its own instance of BehaviourSubject. (I happen to be in this use-case). Make sure you define a factory.

const myFactory = () => { return new BehaviorSubject<string>('') };

providers: [
    { provide: MyValueToken, useFactory: myFactory }
]

// Then, as proposed in the top-answer.

// consumer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.subscribe((my_value)=>this.title = my_value);
}

// producer
constructor(@Inject(MyValueToken) my_value: BehaviorSubject) {
  my_value.next('my title value');
}