@angular/core

Host

decorator

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.

API

  
    @Host ({})

Usage Notes

The following shows use with the @Optional decorator, and allows for a null result.

          class OtherService {}        class HostService {}        @Directive({          selector: 'child-directive',          standalone: false,        })        class ChildDirective {          logs: string[] = [];          constructor(@Optional() @Host() os: OtherService, @Optional() @Host() hs: HostService) {            // os is null: true            this.logs.push(`os is null: ${os === null}`);            // hs is an instance of HostService: true            this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`);          }        }        @Component({          selector: 'parent-cmp',          viewProviders: [HostService],          template: '<child-directive></child-directive>',          standalone: false,        })        class ParentCmp {}        @Component({          selector: 'app',          viewProviders: [OtherService],          template: '<parent-cmp></parent-cmp>',          standalone: false,        })        class App {}

For an extended example, see "Dependency Injection Guide".