@Host Decorator in Angular

@Host decorator is one of the Resolution Modifiers in Angular. The Others are @Self, SkipSelf & Optional. These Decorators configures how the DI Framework resolves the dependencies. We already covered @Self, @SkipSelf & @Optional Decorators. In this tutorial, we will learn about @Host in detail.

@Host

The definition of @Host from the Angular Docs

Parameter decorator on a view-provider parameter of a class constructor that tells the DI framework to resolve the view by checking injectors of child elements, and stop when reaching the host element of the current component.

The definition is a little confusing. So let us try to simplify it a bit.

1. The @Host property searches for the dependency inside the component’s template only.
2. It starts with the current Injector and continues to search in the Injector hierarchy until it reaches the host element of the current component.
3. It does not search for the dependency in the Providers of the host element.
4. But it does search in the ViewProviders of the host element.
5. Module injector is never searched in the case of @Host flag

It looks somewhat similar to @Self. But @Self only checks in the Injector of the current component.

But the @Host checks for the dependency in the current template.

@Host Example

Let us look at the Angular Project from StackBlitz. It is the same Project from in the tutorial @Self, @SkipSelf & @Optional Decorators.

It has three Components. AppComponent, ChildComponent & GrandChildComponent. One testDirective directive. And RandomService, which generates the Random number, when instantiated.

All the components & directives display the random number from the RandomService.

Make the Providers empty in all components & directives so that RandomService is always provided by the AppModule. Run the App and you should see the same number displayed by all the components & directives. Also, you will RandomService Constructed message only once in the console window indicating that a single instance of the service is created.

Parent & Child Components with @Host Decorator

In the template of ChildComponent, we have added GrandChildComponent.

child.component.ts

@Component({
  selector: "my-child",
  providers: [],
  viewProviders: [],
  template: `
    <div class="box">
      <p>ChildComponent => {{ randomNo }}</p>

      <my-grandChild></my-grandChild>
    </div>
  `
})
export class ChildComponent {

Now, go to the GrandChildComponent and add the @Host decorator on the randomService

export class GrandChildComponent {
  randomNo;
  constructor(@Host() private randomService: RandomService) {
    this.randomNo = randomService?.RandomNo;
  }
}

Immidetaly you will see the message.

No provider for RandomService found in NodeInjector

The GrandChildComponent is part of the following template of ChildComponent. This Template is hosted inside the ChildComponent. Hence ChildComponent is the host component.

    <div class="box">
      <p>ChildComponent => {{ randomNo }}</p>

      <my-grandChild></my-grandChild>
    </div>

@Host first looks for the Dependency in the template. It starts with the Providers of the GrandChildComponent.

Next, it will move to ChildComponent, which is the Host Component. Here it will only look in the ViewProviders and not in Providers array.

Hence there are two ways in which you can remove this error

Add the RandomService to the Providers of the GrandChildComponent. Because that is where DI looks first for dependency.

The second option is to add RandomService to viewProviders array of the ChildComponent.

Directives & @Host Decorator

The Components are nothing but Directives with a View. Hence Directives works in the same way

Goto the testDirective and add the @host decorator on randomService. The error immediately shows up in the console window. No provider for RandomService found in NodeInjector.

export class testDirective implements OnInit {
  constructor(
    private el: ElementRef,
    @Host() private randomService: RandomService
  ) {}

The testDirective is part of this template from GrandChildComponent. The Host of the template is GrandChildComponent.

  template: `
    <div class="box">
      GrandChildComponent => {{ randomNo }}

      <div class="dirbox" testDirective>fdf</div>

    </div>
  `,

@Host will look for the Dependency in this order

1. Providers array of testDirective
2. ViewProviders of the GrandChildComponent

Hence adding the RandomService in any of those places will resolve the error.

Multiple Directives

Consider the following StackBlitz example. Here we have three directives. All of them has a dependency on randomService.

Now go to cDirective and add @Host on RandomService.

To understand how @Host resolves the Dependency, take a look at the template, where we have used cDirective

The template from the ChildComponent (Hence our Host Component). The aDir, bDir & cDir all part of this template. As mentioned earlier @Host only looks at this template while resolving the dependency.

    <div class="box">
      <p>ChildComponent => {{ randomNo }}</p>

      <div aDir>
        <div bDir>
          <div cDir></div>
        </div>
      </div>
    </div>

@Host will look for the Dependency in this order

1. Providers of cDirective
2. Providers of bDirective
3. Providers of aDirective
4. ViewProviders of ChildComponent

Put RandomService in any of those place and error will go away

What if we add @Host in bDirective instead of cDirective. The checking will be done in the following order. cDirective is not checked as it is the child of bDirective

1. Providers of bDirective
2. Providers of aDirective
3. ViewProviders of ChildComponen

Content Projection & @Host Decorator

Now, look at the StackBlitz example. The App has three components (AppComponent, ChildComponent & GrandChildComponent) and a service (RandomService). Here we are making use of Content Projection to project the GrandChildComponent into the ChildComponent.

Open the GrandChildComponent and add the @Host decorator on randomService.

Like in our previous examples, let us go and look at the template where you will find the GrandChildComponent. You will find it in template of the AppComponent.

app.component.ts

    <div class="box">
      <p>AppComponent => {{ randomNo }}</p>
      <my-child>
        <my-grandChild></my-grandChild>
      </my-child>
    </div>

Hence the above is our template and the host is AppComponent.

@Host will look for the Dependency in this order

1. Providers of GrandChildComponent
2. Providers of ChildComponent
3. ViewProviders of AppComponent

Reference

1. A curious case of the @Host decorator and Element Injectors in Angular
2. @Host API