Membuat Custom Directive – Part 4

Selain menggunakan renderer yang telah dibahas pada modul sebelumnya. Pada modul ini kita bisa melakukan hal yang sama dengan menggunakan dekorator @HostBinding.

Penggunaan HostBinding umumnya digunakan untuk property binding. Jika directive yang Anda buat sederhana, seperti contoh tutorial, sangat cocok digunakan.

HostBinding memerlukan parameter property yang akan di-bind, pada kasus modul ini adalah ‘style.backgroundColor’.

Perhatikan, digunakan camel case pada backgroundColor, karena DOM tidak menggunakan tanda dash (-).

Untuk jelasnya, silakan langsung lihat contoh code dibawah.

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

@Directive({
  selector: '[appAdvHighlight]'
})
export class AdvHighlightDirective implements OnInit{
  @HostBinding('style.backgroundColor') backgroundColor: string = 'transparent';

  constructor(private elRef: ElementRef, private renderer: Renderer2) { }

  ngOnInit(): void {
    //this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
  }

  @HostListener('mouseenter') mouseover(eventData : Event){
    //pendekatan renderer
    //this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
    
    //pendekatan hostbinding
    this.backgroundColor = 'blue';
  }

  @HostListener('mouseleave') mouseleave(eventData : Event){
    //pendekatan renderer
    // this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'transparent');

    //pendekatan hostbinding
    this.backgroundColor = 'transparent';
  }
}

Jika Anda jalankan, hasil yang sama akan terjadi, yaitu, ketika di mouse enter, background color dari element <p> akan berubah menjadi biru. Dan ketika mouse leave, element akan kembali transparent.