HostBinding: HostBindingFactory

export HostBinding : HostBindingFactory

exported from angular2/core defined in angular2/src/core/metadata.ts (line 1321)

Declares a host property binding.

Angular automatically checks host property bindings during change detection. If a binding changes, it will update the host element of the directive.

HostBindingMetadata takes an optional parameter that specifies the property name of the host element that will be updated. When not provided, the class property name is used.

Example

The following example creates a directive that sets the valid and invalid classes on the DOM element that has ngModel directive on it.

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control:NgModel) {}
  @HostBinding('[class.valid]') get valid { return this.control.valid; }
  @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
}

@Component({
  selector: 'app',
  template: `<input [(ngModel)]="prop">`,
  directives: [FORM_DIRECTIVES, NgModelStatus]
})
class App {
  prop;
}

bootstrap(App);