Membuat Custom Directive – Part 3

by

Tentu akan lebih menarik jika directive yang dibuat lebih intuitif. Misalnya warna diubah ketika terjadi even mouse over.

Untuk itu kita gunakan decorator HostListener, yang berguna mengakses event yang terjadi pada element.

Buka file adv-highlight.directive.ts, tambahkan code berikut

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

@Directive({
  selector: '[appAdvHighlight]'
})
export class AdvHighlightDirective implements OnInit{

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

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

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

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

Parameter pada @HostListener, yaitu: mouseenter dan mouseleave adalah event standard.

Sementara mouseover(eventData: Event) dan mouseleave(eventData: Event) adalah method yang akan digunakan ketika event terjadi.

Jika dijalankan sesuai ekspektasi element akan berubah warna ketika terjadi mouseenter dan mouseleave.

Sharing is caring:

Leave a Comment