Angular 5 – Custom Directives

Merhaba,

Angular uygulamalarında component yapıları aracılığıyla projemizi inşa etmekte ve bu inşa sürecinde arayüzde belli başlı programatik durumları directive yapıları aracılığıyla icra etmekteyiz. Aslında olayı birazdaha geniş yorumlarsak her bir component özünde bir direktiftir. Componentler, direktiflerin tüm özelliklerini barındırmakla birlikte aynı zamanda bir görünüme sahiptirler. Bu görünümden kasıt HTML arayüzüdür. Component html arayüzüne sahipken, direktifler html yapıları içerisinde kullanılan parçacıklardır. Aradaki farklardan biri budur. Bir diğer fark ise bir component sade ve sadece bir tane html arayüzü ile ilişkiliyken, direktifler birden fazla html arayüzünde sınırsız sayıda dom nesnesi ile kullanılabilmekte ya da bir başka deyişle ilişkilendirilebilmektedir.

Bu içeriğimizde Angular uygulamalarında kendi özel direktiflerimizi nasıl oluşturup, kullanabileceğimizi inceleyecek ve ilişkilendirildikleri görevlerle süreci nasıl yönlendirdiklerini değerlendireceğiz.

Direktifin Oluşturulması ve Temel Yapılanma

İlk olarak Angular CLI aracılığıla aşağıdaki kodları kullanarak directive yapısını projemize ekliyoruz.

ng generate directive directives/custom --spec false

ya da

ng g d directives/custom

Oluşturulan directive dosyasına göz atarsak eğer;

import { Directive } from '@angular/core';

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  constructor() { }
}

Yukarıdaki kod bloğunda gördüğünüz gibi direktifimiz oluşturulmuştur. Direktifimiz “@angular/core” dizini altında bulunan “Directive” modülü ile declare edilmektedir. “@Directive” komutunun içerisinde bulunan “selector” özelliğine verilmiş olan “[appCustom]” direktifimizin referansını temsil etmektedir. Dolayısıyla bu direktif aşağıdaki örnekte olduğu gibi kullanılacaktır.

<instance appCustom></instance>

Eğer ki direktif referansının başındaki ve sonundaki köşeli parantezleri kaldırıp, başına “.” karakterini koyarsak ilgili direktifi class değeri olarakta belirtebilmekteyiz.

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

@Directive({
  selector: '.appCustom'
})
export class CustomDirective {
  constructor() { }
}
<instance class="appCustom"></instance>

Direktifin Kullanıldığı DOM Nesnesini Elde Etme

<input type="text" appCustom/>

Oluşturduğumuz direktifin kullanıldığı dom nesnesini elde edebilmek için constructer metodunda aşağıdaki çalışmayı gerçekleştiriyoruz.

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

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  constructor(private item: ElementRef) {
    item.nativeElement.style.backgroundColor = "red";
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer constructer metodunda bulanan “ElementRef” tipinden “item” parametresi bizlere ilgili direktifin kullanıdığı dom nesnesini getirecektir. Örnektede anlaşıldığı üzere direktifin kullanıldığı dom nesnesinin arkaplan rengi kırmızı yapılmaktadır.

Angular 5 - Custom Directives

Eğer ki uygulamanızın her daim tarayıcı ortamında çalışacağını varsayıyorsanız bu şekilde bir yaklaşım sergilemeniz yeterlidir. Yok eğer mobil cihazlar, tabletler vs. gibi çeşitli farklı ortamlarda çalışılacaksa, platformdan bağımsız bir şekilde çalışma sergilenmesi gerekmektedir. Bunun içinde “Renderer” modülü imdada yetişmektedir;

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

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  constructor(private item: ElementRef, private renderer: Renderer) {
    renderer.setElementStyle(item.nativeElement, "backgroundColor", "gray");
  }
}

Angular 5 - Custom Directives
Bu şekilde platformdan bağımsız çalışma sergilemiş bulunmaktayız.

HostListener ve HostBinding Deklorasyonları

HostListener

Oluşturduğumuz direktifin hangi event/olay ile görevlendirileceğini belirlememizi sağlayan bir deklarasyondur.

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

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  constructor(private item: ElementRef, private renderer: Renderer) {

  }

  @HostListener("click")
  onclick() {
    this.renderer.setElementStyle(this.item.nativeElement, "backgroundColor", "gray");
    console.log("Tıklandı");
  }

  @HostListener("change")
  onchange() {
    this.renderer.setElementStyle(this.item.nativeElement, "backgroundColor", "yellow");
    console.log("Değer değiştirildi.");
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer “@HotListener” deklarasyonu “click” ve “change” olaylarına özel kullanılmıştır. İlgili dekrasyonların görevlendirildiği herhangi bir olay tetiklendiğinde deklarasyona tanımlanan fonksiyon tetiklenmektedir. Bunun için aşağıdaki görseli incelemeniz yeterli olacaktır;
Angular 5 - Custom Directives

HostBinding

Bu deklarasyon; direktifin işaretlediği dom nesnesinin bir özelliğine kendini bind ederek, deklare edildiği değişkenin değerine göre o özelliği ilgili nesneye uygulamaktadır. Hemen aşağıdaki örneği ele alırsak eğer;

<style>
  .bgcolor {
    background-color: red;
  }
</style>

<input type="text" appCustom/>
import { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular/core';

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  @HostBinding("class.bgcolor")
  private isEnable: boolean = true;
  constructor(private item: ElementRef, private renderer: Renderer) {

  }

  @HostListener("click")
  onclick() {
    this.isEnable = !this.isEnable;
    console.log("Tıklandı : " + this.isEnable);
  }
}

gördüğünüz üzere “boolean” tipteki “isEnable” isimli değişkenimizi “HostBinding” deklarasyonuyla işaretlemiş bulunmaktayız. İlgili değişkenin değeri “true” olduğunda, direktifin ilişkilendirildiği nesneye “class.bgcolor” değerini uygulayacaktır. Değer “false” olduğunda ise uygulanan bu müdahale kaldırılacaktır.

Angular 5 - Custom Directives

Mesela aşağıdaki örnekte ise yukardakine ek olarak ilgili dom nesnesinin “string” tipteki “color” değişkeninin değerine göre “style.color” değerini şekillendirecek bir geliştirme yapılmıştır.

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

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  @HostBinding("class.bgcolor")
  private isEnable: boolean = true;

  @HostBinding("style.color")
  private color: string;
  constructor(private item: ElementRef, private renderer: Renderer) {

  }

  @HostListener("click")
  onclick() {
    this.isEnable = !this.isEnable;
    if (this.isEnable)
      this.color = "blue";
    else
      this.color = "gray";
    console.log("Tıklandı : " + this.isEnable);
  }
}

Angular 5 - Custom Directives

Son olarak ilgili deklerasyonla alakalı aşağıdaki örneği incelemenizide tavsiye ederim;

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

@Directive({
  selector: '[appCustom]'
})
export class CustomDirective {
  @HostBinding("class.bgcolor")
  private isEnable: boolean = true;

  @HostBinding("style.color")
  private color: string;

  @HostBinding("style.width")
  private width: string;

  @HostBinding("attr.value")
  private value: string;

  constructor(private item: ElementRef, private renderer: Renderer) {
    this.isEnable = true;
    this.color = "yellow";
    this.width = "150px";
    this.value = "Merhaba";
  }
}

Angular 5 - Custom Directives

Evet… Bu noktadan itibaren Angular 5 ile Custom Directives yapılarının nasıl oluşturulduğunu ve nasıl kullanıldığını, gerekli deklerasyonlarla beraber detaylıca incelemiş bulunmaktayız.

İlgilenenlerin faydalanması dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 07 Eylül 2018

    […] önceki Angular 5 – Custom Directives başlıklı yazımda Angular 5 mimarisinde Custom Directives yapılarının nasıl […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.