@HostBinding connects a directive property to a property, attribute, class, style, or textContent value on the host element. It lets Angular manage host updates without direct DOM manipulation through ElementRef. section 14.5
Use host bindings when a directive needs to reflect its state through the element it decorates:
- Bind a directive input to the host class, such as changing a product row between table-success and table-warning. section 14.5
- Bind a directive property to an input element’s value, then update that property when the host emits an input event. section 14.6
- Prefer host bindings over direct DOM APIs when Angular property or event bindings express the same behavior; Angular supplies the environment-specific implementation. section 14.5
Synchronize a custom input binding
A directive can expose a paModel input while binding fieldValue to the host input’s value. ngOnChanges copies model changes into fieldValue; @HostListener("input", ["$event.target.value"]) updates fieldValue and emits paModelChange. The template can then use [(paModel)]="newProduct.name".
