Membuat Custom Directive – Part 5

Melanjutkan dari modul sebelumnya, mungkin Anda berpikir, tentu directive yang dibuat akan lebih intuitif jika user dapat mengirimkan parameter warna yang diinginkan.

Dan tentu saja itu dapat dilakukan, dengan menggunakan custom property, yaitu decorator @Input.

KIta akan tambahkan 2 property warna default dan warna highlight pada directive, dimana kedua property tersebut dapat diisi melalui property binding.

Untuk jelasnya, lihat contoh code dibawah

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

@Directive({
  selector: '[appAdvHighlight]'
})
export class AdvHighlightDirective implements OnInit{
  @Input() defaultColor : string = 'transparent';
  @Input() highlightColor : string = 'blue';
  //pendekatan hostbinding
  //@HostBinding('style.backgroundColor') backgroundColor: string = 'transparent';

  //pendekatan hostbinding dan property binding
  @HostBinding('style.backgroundColor') backgroundColor!: string;

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

  ngOnInit(): void {
    //this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
    //pendekatan property binding
    this.backgroundColor = this.defaultColor
  }

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

    //pendekatan hostbinding dan property binding
    this.backgroundColor = this.highlightColor;    

  }

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

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

    //pendekatan hostbinding dan property binding
    this.backgroundColor = this.defaultColor;        
  }
}

Perhatian, pada code ini kita lakukan inisialisasi backgroundCoor = defaultColor pada ngOnInit, agar saat dirender, element HTML sudah menggunakan warna default.

Berikutnya buka app.component.html, lalu tambahkan property binding dengan passing warna yang kita inginkan.

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p appBscHighlight>Custom Directive Direct DOM</p>
            <p appAdvHighlight [defaultColor]="'#b2e99b'" [highlightColor]="'#e8d641'">Custom Directive Renderer</p>
        </div>
    </div>
</div>

Sesuai ekspektasi, warna background berubah sesuai dengan warna yang kita passing terhadap directive.