GeezerVison is showing next.angular.dev — HostBinding • Angular
The following example creates a directive that sets the valid and invalid
class, a style color, and an id on the DOM element that has an ngModel directive on it.
@Directive({selector: '[ngModel]'})
class NgModelStatus {
constructor(public control: NgModel) {}
// class bindings
@HostBinding('class.valid') get valid() { return this.control.valid; }
@HostBinding('class.invalid') get invalid() { return this.control.invalid; }
// style binding
@HostBinding('style.color') get color() { return this.control.valid ? 'green': 'red'; }
// style binding also supports a style unit extension
@HostBinding('style.width.px') @Input() width: number = 500;
// attribute binding
@HostBinding('attr.aria-required')
@Input() required: boolean = false;
// property binding
@HostBinding('id') get id() { return this.control.value?.length ? 'odd': 'even'; }
@Component({
selector: 'app',
template: `<input [(ngModel)]="prop">`,
})
class App {
prop;
}