Host

Specifies that an injector should retrieve a dependency from any injector until reaching the closest host.

In Angular, a component element is automatically declared as a host for all the injectors in its view.

Example

In the following example App contains ParentCmp, which contains ChildDirective. So ParentCmp is the host of ChildDirective.

ChildDirective depends on two services: HostService and OtherService. HostService is defined at ParentCmp, and OtherService is defined at App.

class OtherService {}
class HostService {}
 
@Directive(
  selector: 'child-directive'
)
class ChildDirective {
  ChildDirective(
      @Optional() @Host() OtherService os,
      @Optional() @Host() HostService hs) {
    print("os is null", os);
    print("hs is NOT null", hs);
  }
}
 
@Component(
  selector: 'parent-cmp',
  providers: const [HostService],
  template: '''
    Dir: <child-directive></child-directive>
  ''',
  directives: const [ChildDirective]
)
class ParentCmp {}
 
@Component(
  selector: 'app',
  providers: const [OtherService],
  template: '''
    Parent: <parent-cmp></parent-cmp>
  ''',
  directives: const [ParentCmp]
)
class App {}
 
bootstrap(App);