<\/div>\n

Merhaba,<\/p>\n

Angular uygulamalar\u0131nda component yap\u0131lar\u0131 arac\u0131l\u0131\u011f\u0131yla projemizi in\u015fa etmekte ve bu in\u015fa s\u00fcrecinde aray\u00fczde belli ba\u015fl\u0131 programatik durumlar\u0131 directive yap\u0131lar\u0131 arac\u0131l\u0131\u011f\u0131yla icra etmekteyiz. Asl\u0131nda olay\u0131 birazdaha geni\u015f yorumlarsak her bir component \u00f6z\u00fcnde bir direktiftir. Componentler, direktiflerin t\u00fcm \u00f6zelliklerini bar\u0131nd\u0131rmakla birlikte ayn\u0131 zamanda bir g\u00f6r\u00fcn\u00fcme sahiptirler. Bu g\u00f6r\u00fcn\u00fcmden kas\u0131t HTML aray\u00fcz\u00fcd\u00fcr. Component html aray\u00fcz\u00fcne sahipken, direktifler html yap\u0131lar\u0131 i\u00e7erisinde kullan\u0131lan par\u00e7ac\u0131klard\u0131r. Aradaki farklardan biri budur. Bir di\u011fer fark ise bir component sade ve sadece bir tane html aray\u00fcz\u00fc ile ili\u015fkiliyken, direktifler birden fazla html aray\u00fcz\u00fcnde s\u0131n\u0131rs\u0131z say\u0131da dom nesnesi ile kullan\u0131labilmekte ya da bir ba\u015fka deyi\u015fle ili\u015fkilendirilebilmektedir.<\/p>\n

Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda kendi \u00f6zel direktiflerimizi nas\u0131l olu\u015fturup, kullanabilece\u011fimizi inceleyecek ve ili\u015fkilendirildikleri g\u00f6revlerle s\u00fcreci nas\u0131l y\u00f6nlendirdiklerini de\u011ferlendirece\u011fiz.<\/p>\n

Direktifin Olu\u015fturulmas\u0131 ve Temel Yap\u0131lanma<\/h3>\n

\u0130lk olarak Angular CLI arac\u0131l\u0131\u011f\u0131la a\u015fa\u011f\u0131daki kodlar\u0131 kullanarak directive yap\u0131s\u0131n\u0131 projemize ekliyoruz.<\/p>\n

\r\nng generate directive directives\/custom --spec false\r\n<\/pre>\nya da<\/p>\n
\r\nng g d directives\/custom\r\n<\/pre>\nOlu\u015fturulan directive dosyas\u0131na g\u00f6z atarsak e\u011fer;<\/p>\n
\r\nimport { Directive } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  constructor() { }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi direktifimiz olu\u015fturulmu\u015ftur. Direktifimiz “@angular\/core” dizini alt\u0131nda bulunan “Directive” mod\u00fcl\u00fc ile declare edilmektedir. “@Directive” komutunun i\u00e7erisinde bulunan “selector” \u00f6zelli\u011fine verilmi\u015f olan “[appCustom]” direktifimizin referans\u0131n\u0131 temsil etmektedir. Dolay\u0131s\u0131yla bu direktif a\u015fa\u011f\u0131daki \u00f6rnekte oldu\u011fu gibi kullan\u0131lacakt\u0131r.<\/p>\n
\r\n<instance appCustom><\/instance>\r\n<\/pre>\nE\u011fer ki direktif referans\u0131n\u0131n ba\u015f\u0131ndaki ve sonundaki k\u00f6\u015feli parantezleri kald\u0131r\u0131p, ba\u015f\u0131na “.” karakterini koyarsak ilgili direktifi class de\u011feri olarakta belirtebilmekteyiz.<\/p>\n
\r\nimport { Directive, HostListener } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '.appCustom'\r\n})\r\nexport class CustomDirective {\r\n  constructor() { }\r\n}\r\n<\/pre>\n\r\n<instance class="appCustom"><\/instance>\r\n<\/pre>\nDirektifin Kullan\u0131ld\u0131\u011f\u0131 DOM Nesnesini Elde Etme<\/h3>\n\r\n<input type="text" appCustom\/>\r\n<\/pre>\nOlu\u015fturdu\u011fumuz direktifin kullan\u0131ld\u0131\u011f\u0131 dom nesnesini elde edebilmek i\u00e7in constructer metodunda a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftiriyoruz.<\/p>\n
\r\nimport { Directive, HostListener, ElementRef } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  constructor(private item: ElementRef) {\r\n    item.nativeElement.style.backgroundColor = "red";\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer constructer metodunda bulanan “ElementRef” tipinden “item” parametresi bizlere ilgili direktifin kullan\u0131d\u0131\u011f\u0131 dom nesnesini getirecektir. \u00d6rnektede anla\u015f\u0131ld\u0131\u011f\u0131 \u00fczere direktifin kullan\u0131ld\u0131\u011f\u0131 dom nesnesinin arkaplan rengi k\u0131rm\u0131z\u0131 yap\u0131lmaktad\u0131r.<\/p>\n
<\/a><\/p>\n
E\u011fer ki uygulaman\u0131z\u0131n her daim taray\u0131c\u0131 ortam\u0131nda \u00e7al\u0131\u015faca\u011f\u0131n\u0131 varsay\u0131yorsan\u0131z bu \u015fekilde bir yakla\u015f\u0131m sergilemeniz yeterlidir. Yok e\u011fer mobil cihazlar, tabletler vs. gibi \u00e7e\u015fitli farkl\u0131 ortamlarda \u00e7al\u0131\u015f\u0131lacaksa, platformdan ba\u011f\u0131ms\u0131z bir \u015fekilde \u00e7al\u0131\u015fma sergilenmesi gerekmektedir. Bunun i\u00e7inde “Renderer” mod\u00fcl\u00fc imdada yeti\u015fmektedir;<\/p>\n
\r\nimport { Directive, HostListener, ElementRef, Renderer } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  constructor(private item: ElementRef, private renderer: Renderer) {\r\n    renderer.setElementStyle(item.nativeElement, "backgroundColor", "gray");\r\n  }\r\n}\r\n<\/pre>\n<\/a>
\nBu \u015fekilde platformdan ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fma sergilemi\u015f bulunmaktay\u0131z.<\/p>\n
HostListener ve HostBinding Deklorasyonlar\u0131<\/h3>\nHostListener<\/h4>\nOlu\u015fturdu\u011fumuz direktifin hangi event\/olay ile g\u00f6revlendirilece\u011fini belirlememizi sa\u011flayan bir deklarasyondur. <\/p>\n\r\nimport { Directive, HostListener, ElementRef, Renderer } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  constructor(private item: ElementRef, private renderer: Renderer) {\r\n\r\n  }\r\n\r\n  @HostListener("click")\r\n  onclick() {\r\n    this.renderer.setElementStyle(this.item.nativeElement, "backgroundColor", "gray");\r\n    console.log("T\u0131kland\u0131");\r\n  }\r\n\r\n  @HostListener("change")\r\n  onchange() {\r\n    this.renderer.setElementStyle(this.item.nativeElement, "backgroundColor", "yellow");\r\n    console.log("De\u011fer de\u011fi\u015ftirildi.");\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “@HotListener” deklarasyonu “click” ve “change” olaylar\u0131na \u00f6zel kullan\u0131lm\u0131\u015ft\u0131r. \u0130lgili dekrasyonlar\u0131n g\u00f6revlendirildi\u011fi herhangi bir olay tetiklendi\u011finde deklarasyona tan\u0131mlanan fonksiyon tetiklenmektedir. Bunun i\u00e7in a\u015fa\u011f\u0131daki g\u00f6rseli incelemeniz yeterli olacakt\u0131r;
\n<\/a><\/p>\n
HostBinding<\/h4>\nBu deklarasyon; direktifin i\u015faretledi\u011fi dom nesnesinin bir \u00f6zelli\u011fine kendini bind ederek, deklare edildi\u011fi de\u011fi\u015fkenin de\u011ferine g\u00f6re o \u00f6zelli\u011fi ilgili nesneye uygulamaktad\u0131r. Hemen a\u015fa\u011f\u0131daki \u00f6rne\u011fi ele al\u0131rsak e\u011fer;<\/p>\n\r\n<style>\r\n  .bgcolor {\r\n    background-color: red;\r\n  }\r\n<\/style>\r\n\r\n<input type="text" appCustom\/>\r\n<\/pre>\n\r\nimport { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  @HostBinding("class.bgcolor")\r\n  private isEnable: boolean = true;\r\n  constructor(private item: ElementRef, private renderer: Renderer) {\r\n\r\n  }\r\n\r\n  @HostListener("click")\r\n  onclick() {\r\n    this.isEnable = !this.isEnable;\r\n    console.log("T\u0131kland\u0131 : " + this.isEnable);\r\n  }\r\n}\r\n<\/pre>\ng\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere “boolean” tipteki “isEnable” isimli de\u011fi\u015fkenimizi “HostBinding” deklarasyonuyla i\u015faretlemi\u015f bulunmaktay\u0131z. \u0130lgili de\u011fi\u015fkenin de\u011feri “true” oldu\u011funda, direktifin ili\u015fkilendirildi\u011fi nesneye “class.bgcolor” de\u011ferini uygulayacakt\u0131r. De\u011fer “false” oldu\u011funda ise uygulanan bu m\u00fcdahale kald\u0131r\u0131lacakt\u0131r.<\/p>\n<\/a><\/p>\n
Mesela a\u015fa\u011f\u0131daki \u00f6rnekte ise yukardakine ek olarak ilgili dom nesnesinin “string” tipteki “color” de\u011fi\u015fkeninin de\u011ferine g\u00f6re “style.color” de\u011ferini \u015fekillendirecek bir geli\u015ftirme yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n
\r\nimport { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  @HostBinding("class.bgcolor")\r\n  private isEnable: boolean = true;\r\n\r\n  @HostBinding("style.color")\r\n  private color: string;\r\n  constructor(private item: ElementRef, private renderer: Renderer) {\r\n\r\n  }\r\n\r\n  @HostListener("click")\r\n  onclick() {\r\n    this.isEnable = !this.isEnable;\r\n    if (this.isEnable)\r\n      this.color = "blue";\r\n    else\r\n      this.color = "gray";\r\n    console.log("T\u0131kland\u0131 : " + this.isEnable);\r\n  }\r\n}\r\n<\/pre>\n<\/a><\/p>\n
Son olarak ilgili deklerasyonla alakal\u0131 a\u015fa\u011f\u0131daki \u00f6rne\u011fi incelemenizide tavsiye ederim;<\/p>\n
\r\nimport { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCustom]'\r\n})\r\nexport class CustomDirective {\r\n  @HostBinding("class.bgcolor")\r\n  private isEnable: boolean = true;\r\n\r\n  @HostBinding("style.color")\r\n  private color: string;\r\n\r\n  @HostBinding("style.width")\r\n  private width: string;\r\n\r\n  @HostBinding("attr.value")\r\n  private value: string;\r\n\r\n  constructor(private item: ElementRef, private renderer: Renderer) {\r\n    this.isEnable = true;\r\n    this.color = "yellow";\r\n    this.width = "150px";\r\n    this.value = "Merhaba";\r\n  }\r\n}\r\n<\/pre>\n<\/a><\/p>\n
Evet… Bu noktadan itibaren Angular 5 ile Custom Directives yap\u0131lar\u0131n\u0131n nas\u0131l olu\u015fturuldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, gerekli deklerasyonlarla beraber detayl\u0131ca incelemi\u015f bulunmaktay\u0131z.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular uygulamalar\u0131nda component yap\u0131lar\u0131 arac\u0131l\u0131\u011f\u0131yla projemizi in\u015fa etmekte ve bu in\u015fa s\u00fcrecinde aray\u00fczde belli ba\u015fl\u0131 programatik durumlar\u0131 directive yap\u0131lar\u0131 arac\u0131l\u0131\u011f\u0131yla icra etmekteyiz. Asl\u0131nda olay\u0131 birazdaha geni\u015f yorumlarsak her bir component \u00f6z\u00fcnde bir direktiftir....<\/p>\n","protected":false},"author":1,"featured_media":9303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2415],"tags":[2554,2601],"class_list":["post-9271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-5","tag-angular-5","tag-custom-directives"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9271"}],"version-history":[{"count":25,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9271\/revisions"}],"predecessor-version":[{"id":9304,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9271\/revisions\/9304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/9303"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}