Bind an Angular Signal Effect to an Injector for Automatic Cleanup
In Angular, effects are often assigned to class properties during the constructor phase. However, there may be cases where the effect needs to be parameterized with values from parent components, which are not available during construction.
When running effects outside the constructor, such as in the ngOnInit lifecycle hook, you need to manually provide the injector instance to the effect configuration.
[00:00] The most convenient way to run an effect is to assign it to a class property like here to the timer effect property. However, this happens during a constructor. And during the constructor, we don't have access for instance, to the inputs passed from the parent components. So if we are in a case [00:19] where the effect has to be parameterized using the values from the parent component, we might want to move the effect to n g on init method. So let's first remove the unnecessary pieces of code. So let's revoke the manual cleanup and let's move the effect to n g on init. Now we can [00:39] see that nothing interesting is happening. However, when we check the checkbox, we'll see that an error is being thrown. Effect can only be used within an injection context such as and here is a list of some injection context such as the constructor. So when the effect has been created during initializing a property, this is executed within the constructor. And [00:59] within the constructor, Angular is within the injection context so that we can inject things. Angular effect is using the injector internally in order to know when to actually clean up the effect, of course, as long as we are using the on cleanup function. So here, since we, [01:19] for some reason, we need to run this effect during an engine unit, what we need to do is we need to manually pass the injector. So due to the fact that we are not during the constructor phase, we need to pass the injector manually. So we're going to fetch the injector via the built in inject function and we'll [01:39] use the injector token and we're going to now use the private injector property. So effect can allow us not only to parameterize what is that manual cleanup value but also the injector. So in this case, we will simply pass the this dot private [01:59] injector property and we can see that this is still running correctly.