Bind an Angular Signal Effect to an Injector for Automatic Cleanup

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a week ago

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.

egghead
egghead
~ 49 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today