Posted on Aug 26 Before Angular 14, Angular achieves hierarchical dependency injection by injecting services in constructor and applying combination of @Host, @Self, @SkipSelf() and @Optional() decorators. In Angular 14, Angular team introduces inject() and it accepts inject options that can achieve the results. In this blog post, I am going to illustrate how to pass different inject options to inject() in order to exercise fine-grained dependency injection. Mastering hierarchical dependency injection is not difficult after we understand host, self, skipSelf and optional values.Before mastering hierarchical dependency injection, we should know the available decorators and their counterparts.MessageService is a service but @Injectable does not have { providedIn: root } option. Therefore, it does not exist in root injector. If component wants to inject MessageService, it will require to provide inject option in inject() function.Next, I am going to explore different inject optional flags in the situation of single component.In OptionalComponent, the second parameter of inject() is { optional: true }. Therefore, MessageService can be optional. The component does not have providers array to provide MessageServie. Therefore, this.service is null and the value of msg is ‘Cannot inject MessageService and optional flag enabled.’In SelfComponent, the second parameter of inject() is { self: true }. The component is the only candidate to provide MessageService. Fortunately, the providers array provides MessageServie; therefore, this.service is defined and the value of msg is ‘Provide MessageService in SelfComponent.’To avoid error, I can provide optional property together with self.this.service is null and the value of msg is ‘Component does not inject MessageService itself and optional message is shown’When using inject(MessageService, { skipSelf: true }), I expect the component is a child of a parent component. Otherwise, error message is thrown.In SkipSelfOptionalComponent, the second parameter of inject() is { skipSelf: true, option: true }. Therefore, the component does not throw error and this.msg is 'skipSelf enabled and cannot inject MessageService, default message shown'In single component case, host property has the same results as self property.The value of this.msg is 'Host component of SkipSelfComponent. Both components should see this message'On the other hand, the value of this.msg is 'Host Optional component returns default message'As a single component, dependency injection is straightforward because the component either provides the service or return null. In the next section, I am going to illustrate how hierarchy dependency injection affects the value of msg in complex component.ParentComponent is the parent of HostComponent and HostOptionalComponent. HostComponent is the parent of SkipSelfComponent, SelfOptionalComponent and OptionalComponent. Similarly, HostOptionalComponent is the parent of SkipSelfOptionalComponent, SelfOptionalComponent and OptionalComponent. As children of complex components, SkipSelfComponent, SkipSelfOptionalComponent, and OptionalComponent render different values.Let me explain further.For the case of SkipSelfComponent, HostComponent is its parent and it provides MessageService in the providers array. Therefore, SkipSelfComponent injects the MessageService of HostComponent and displays “Host component of SkipSelfComponent. Both components should see this message”.The same reasoning also applies to OptionalComponent. It does not provide MessageService and injects the service from HostComponent. Therefore, OptionalComponent displays the same text.For the case of SkipSelfOptionalComponent, HostOptionalComponent is its parent and it does not provide MessageService. Angular goes one step further to find the service in its grandparent, ParentComponent. Fortunately, ParentComponent provides the service in the providers array. SkipSelfOptionalComponent injects MessageService from ParentComponent and displays “Message in Parent component”.When OptionalComponent is the sibling of SkipSelfOptionalComponent, it also injects MessageService from ParentComponent and displays “Message in Parent component”. OptionalComponent renders different results when it is a child of HostComponent and HostOptionalComponent respectivelySelfOptionalComponent always look up MessageService in its providers array. Therefore, it renders “Component does not inject MessageService itself and optional message is shown” and ignores whose its parent is.The following Stackblitz repo shows the final results:This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other technologies.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse José Pablo Ramírez Vargas - Aug 13 Rajaniraiyn R - Aug 22 Shuvo - Aug 23 Tien Nguyen - Aug 23 Once suspended, railsstudent will not be able to comment or publish posts until their suspension is removed. Once unsuspended, railsstudent will be able to comment and publish posts again. Once unpublished, all posts by railsstudent will become hidden and only accessible to themselves. If railsstudent is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Connie Leung. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag railsstudent: railsstudent consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging railsstudent will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.