HostBinding
Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive.
| Option | Description |
|---|---|
hostPropertyName
|
The DOM property that is bound to a data property. |
Usage notes
The following example creates a directive that sets the valid and invalid
properties on the DOM element that has an 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">`,
- })
- class App {
- prop;
- }