Using HostBinding to Bind to Host Properties when Creating Directive in Angular

host-binding.directive.ts

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector: '[appHostBinding]'
})
export class HostBindingDirective {

  @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

  constructor() {
  }

  @HostListener('mouseenter') mouseover(eventData: Event) {
    this.backgroundColor = 'green';
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.backgroundColor = 'transparent';
  }
}

app.component.html

<p appHostBinding>Hello World 4</p>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app

Related