Angular Directive özelliğini https://gelistir.net/415/angular-directive-olusturmak/ adresindeki başlıkta incelemiştik.
Bu başlıkta ise HostListener ile html elementlerine dair DOM event’ lerini dinleyeceğiz ve aksiyon alacağız.

HostListener nedir ?

Angular Directive de kullanılan bir decorator’ dür. Directive’ in eklendiği element’ in javascript dom event’ lerini dinler. DOM eventler bknz : https://www.w3schools.com/js/js_htmldom_events.asp
Decorator’ de belirttiğiniz event, element için tetiklendiğinde, içerisine yazdığımız kodlar çalışır. Jquery’ den aşina olanlar için, klasik onClick event’ ini örnek verebiliriz. bknz : https://www.w3schools.com/jquery/event_click.asp

Mouse Event’ leri ile çalışan directive

  • Directive oluşturmayı bilmiyorsanız, https://gelistir.net/415/angular-directive-olusturmak/#Directive_Olusturmak adresinden inceleyerek bir directive oluşturun.

  • DOM manipülasyonlarını daha sağlıklı yapmak için Renderer2 kütüphanesini kullanıyoruz. Gerekli import işlemlerini yapalım;

    import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
  • Renderer2′ yi constructor metodunda directive’ in üye değişkeni yapalım;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
  • HostListener decorator’ ümüzü yazıyoruz;

    @HostListener('mouseenter') mouseenter(eventData: Event) {
    //çalışacak kodlar buraya
    }
  • HostListener directive parametre olarak, yakalamak istediğimiz event’ i alıyor. Ardından mouseenter metodu ile, Event tipindeki event datasını, eventData değişkeninde tutuyoruz. Süslü parentez içerisinde ise çalışmasını istediğimiz kodları yazıyoruz.

  • Dom manipülasyonlarını Renderer2 kütüphanesi üzerinden yapmak daha sağlıklıdır. Direk olarak element’ in css özelliklerini set etmek yerine, bu değişikliği Angular’ a Renderer2 üzerinden bildirmek, işlemlerin daha sağlıklı ele alınmasını sağlar. HostListener içerisine ilgili kodu yazıyoruz;

@HostListener('mouseenter') mouseenter(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
  }
  • Renderer2 yi constructor’ da renderer ismiyle üye değişken yapmıştık. setStyle metodu 3 parametre alıyor. Element, css özelliği ve değeri.

  • Arkaplan renk değişikliği, mouse element ten çekilince geri alınsın istediğimiz için "mouseleave" event’ ini de HostListener ile dinleyip aksiyon alıyoruz;

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

Directive’ in son hali;

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

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

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

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

}
  • Directive’ in template’ de kullanımı;
<p appHighlight> Test </p>

Uygulamanın canlı hali aşağıdadır, mouse’ u test yazısının üstüne getirip çekin.

Last modified: 9 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.