HostBinding

Declares a host property binding.

Host property bindings are automatically checked during change detection. If a binding changes, the host element of the directive is updated.

The HostBinding annotation takes an optional parameter that specifies the property name of the host element that will be updated. When not provided, the 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 {
  NgModel control;
 
  NgModelStatus(this.control);
 
  @HostBinding('class.valid')
  bool get valid => return control.valid;
 
  @HostBinding('class.invalid')
  bool get invalid => control.invalid;
}
 
@Component(
  selector: 'app',
  template: '<input [(ngModel)]="prop">',
  directives: const [FORM_DIRECTIVES, NgModelStatus])
class App {
  var prop;
 }