/Angular 2 TypeScript

Host decorator

What it does

Specifies that an injector should retrieve a dependency from any injector until reaching the host element of the current component.

How to use

@Injectable() class Car { constructor(@Host() public engine:Engine) {} }


For more details, see the Dependency Injection Guide.


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}`);

  selector: 'parent-cmp',
  viewProviders: [HostService],
  template: '<child-directive></child-directive>',
class ParentCmp {

  selector: 'app',
  viewProviders: [OtherService],
  template: '<parent-cmp></parent-cmp>',
class App {

exported from @angular/core/index defined in @angular/core/src/di/metadata.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.