This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

Host

A constructor parameter decorator that tells the DI framework to retrieve a dependency from any injector until reaching the host element of the current component.

See also

Options

Usage notes

class OtherService {} class HostService {} @Directive({selector: 'child-directive'}) 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>', }) class ParentCmp { } @Component({ selector: 'app', viewProviders: [OtherService], template: '<parent-cmp></parent-cmp>', }) class App { }
      
      class OtherService {}
class HostService {}

@Directive({selector: 'child-directive'})
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>',
})
class ParentCmp {
}

@Component({
  selector: 'app',
  viewProviders: [OtherService],
  template: '<parent-cmp></parent-cmp>',
})
class App {
}