<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki Angular 5 \u2013 Custom Directives<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Angular 5 mimarisinde Custom Directives yap\u0131lar\u0131n\u0131n nas\u0131l olu\u015fturuldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 detayl\u0131ca incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise bir \u00f6nceki makalede at\u0131lan temellerin \u00fczerine Custom Structural Directives(\u00d6zel Yap\u0131sal Direktifler) yap\u0131lar\u0131n\u0131 ekleyecek ve tam teferruat\u0131yla incelemede ve de\u011ferlendirmede bulunaca\u011f\u0131z.<\/p>\n

Yap\u0131sal direktiflerde TemplateRef<\/em> ve ViewContainerRef<\/em> olmak \u00fczere iki mod\u00fcl ile kar\u015f\u0131la\u015f\u0131lmaktad\u0131r. Peki bu mod\u00fcller nedir? ne i\u015f yaparlar?<\/em><\/strong> sorusunu cevaplayal\u0131m…<\/p>\n

\n
\nTemplateRef<\/strong>
\nDirektifin kullan\u0131ld\u0131\u011f\u0131 template’in i\u00e7indekileri i\u00e7erir.\n<\/li>\n

\nViewContainerRef<\/strong>
\nTemplate’in g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tutar, dolay\u0131s\u0131yla template i\u00e7erisinde bulunan elemanlar\u0131 g\u00f6r\u00fcnt\u00fcn\u00fcn i\u00e7erisine yerle\u015ftirme yahut kald\u0131rma i\u015flevini yerine getirmektedir.\n<\/li>\n<\/ul>\n
\u0130\u00e7eri\u011fimizi \u00f6rneklendirmek i\u00e7in “if”, “loop” ve “each” olmak \u00fczere \u00fc\u00e7 farkl\u0131 adet i\u015flevsellik \u00fczerine yap\u0131sal direktif olu\u015fturaca\u011f\u0131z.<\/p>\n
\n
\nIf \u015eart\u0131 \u0130\u00e7in \u00d6zel Yap\u0131sal Direktif Olu\u015fturma<\/strong><\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\n\r\n@Directive({\r\n selector: '[CustomIf]'\r\n})\r\nexport class CustomIfDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n @Input() set CustomIf(condition: boolean) {\r\n if (condition)\r\n this.viewContainerRef.createEmbeddedView(this.templateRef);\r\n \/\/E\u011fer \u015fart do\u011fruysa ilgili template ViewContainerRef nesnesi ile g\u00f6r\u00fcnt\u00fcn\u00fcn i\u00e7erisine yerle\u015ftirilerek ilgili element g\u00f6sterilir.\r\n else\r\n this.viewContainerRef.clear();\r\n \/\/Yok e\u011fer \u015fart yanl\u0131\u015fsa ilgili template ViewContainerRef nesnesi ile g\u00f6r\u00fcnt\u00fcn\u00fcn i\u00e7erisinden temizlenerek ilgili element temizlenir.\r\n }\r\n\r\n}\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “@Input” deklarasyonu ard\u0131ndan “set” keyword\u00fc ile direktifle ayn\u0131 isimde boolean bir parametre alan “CustomIf” metodu olu\u015fturulmu\u015f bulunmaktad\u0131r. Parametredeki de\u011ferin “true” ya da “false” durumuna g\u00f6re ilgili direktifin kullan\u0131ld\u0131\u011f\u0131 eleman g\u00f6sterilecek ya da g\u00f6sterilmeyecektir.<\/p>\n
Kullan\u0131m\u0131;<\/p>\n
\r\n<div *CustomIf="show">\r\n <p>Hello World!<\/p>\r\n<\/div>\r\n<\/pre>\n<\/li>\n
\nD\u00f6ng\u00fc Yap\u0131s\u0131 \u0130\u00e7in \u00d6zel Yap\u0131sal Direktif Olu\u015fturma<\/strong><\/p>\n
\r\nimport { Directive, Input, TemplateRef, ViewContainerRef } from '@angular\/core';\r\n\r\n@Directive({\r\n selector: '[CustomLoop]'\r\n})\r\nexport class CustomLoopDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n @Input() set CustomLoop(num: number) {\r\n for (let i = 0; i < num; i++)\r\n this.viewContainerRef.createEmbeddedView(this.templateRef);\r\n }\r\n}\r\n<\/pre>\n
Kullan\u0131m\u0131;<\/p>\n
\r\n<div *CustomLoop="5">\r\n <p>Hello World!<\/p>\r\n<\/div>\r\n<\/pre>\n
Sonu\u00e7 olarak ekrana be\u015f adet “Hello World!” de\u011ferini yazacakt\u0131r.\n<\/li>\n
\nforEach Yap\u0131s\u0131 \u0130\u00e7in \u00d6zel Yap\u0131sal Direktif Olu\u015fturma<\/strong><\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\n\r\n@Directive({\r\n selector: '[CustomEach]'\r\n})\r\nexport class CustomEachDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n\r\n @Input() set CustomEach(source: Array<any>) {\r\n source.forEach((element: string) => {\r\n this.viewContainerRef.createEmbeddedView(this.templateRef);\r\n });\r\n }\r\n}\r\n<\/pre>\n
Kullan\u0131m\u0131;<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n source: Array<any> = ["a", "b", "c"];\r\n}\r\n<\/pre>\n
\r\n<div *CustomEach="source">\r\n <p>Hello World!<\/p>\r\n<\/div>\r\n<\/pre>\n
Kaynakta \u00fc\u00e7 adet veri oldu\u011fundan dolay\u0131 “Hello World!” de\u011ferini \u00fc\u00e7 kere tekrarlayan \u00e7\u0131kt\u0131 verecektir.\n<\/li>\n<\/ul>\n
\u015eimdi ise olu\u015fturdu\u011fumuz \u00f6zel yap\u0131sal direktifimizi kullan\u0131rken verilen yahut kaynakta bulunan de\u011ferleri kullanmay\u0131, listelemeyi vs. inceleyelim.<\/p>\n
\u0130lk olarak each d\u00f6ng\u00fcs\u00fcne verilen kaynaktaki verileri listeleyelim.<\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\nimport { isNgTemplate } from '..\/..\/..\/node_modules\/@angular\/compiler';\r\n\r\n@Directive({\r\n selector: '[CustomFor]'\r\n})\r\nexport class CustomForDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n\r\n @Input() set CustomFor(source: Array<any>) {\r\n source.forEach((item, index) => {\r\n this.viewContainerRef.createEmbeddedView(this.templateRef, {\r\n result: `${++index}-) ${item}`\r\n });\r\n });\r\n }\r\n}\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere “CustomFor” metodu i\u00e7erisinde ViewContainerRef nesnesinin “createEmbededView” fonksiyonuna verilen TemplateRef nesnesinin haricinde, ikinci parametre olarak bir obje tan\u0131mlanmakta ve i\u00e7erisine belirtilen “result” alan\u0131na d\u00f6ng\u00fcdeki her bir eleman\u0131 index de\u011feriyle birlikte at\u0131yor ve g\u00f6r\u00fcnt\u00fcye ekliyoruz.<\/p>\n
Kullan\u0131ma gelirsek e\u011fer;<\/p>\n
\r\n<div *CustomFor="source;let key=result">\r\n <p>{{key}}<\/p>\r\n<\/div>\r\n<\/pre>\n
yukar\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere direktifimizi \u00e7a\u011f\u0131rd\u0131ktan sonra de\u011fer olarak noktal\u0131 virg\u00fcle(;) kadar d\u00f6ng\u00fcn\u00fcn kayna\u011f\u0131n\u0131 ifade edecek olan metodun parametresini veriyoruz, noktal\u0131 virg\u00fclden sonra “let” keyword\u00fcyle bir de\u011fi\u015fken tan\u0131mlayarak direktifte tan\u0131mlad\u0131\u011f\u0131m\u0131z “result” alan\u0131ndaki her bir de\u011feri bu de\u011fi\u015fkene at\u0131yoruz. “source” de\u011fi\u015fkenine de a\u015fa\u011f\u0131daki gibi “AppComponent” s\u0131n\u0131f\u0131 i\u00e7erisinden verimizi g\u00f6nderiyoruz.<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n source: Array<any> = ["a", "b", "c"];\r\n}\r\n<\/pre>\n
$\"Angular$ <\/a><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere \u00f6zel yap\u0131sal direktifimiz arac\u0131l\u0131\u011f\u0131yla bir kaynaktaki verileri listeletmi\u015f bulunmaktay\u0131z.<\/p>\n
E\u011fer ki, direktifi kullan\u0131rken “result” de\u011ferini otomatik kar\u015f\u0131lamak isterseniz “$implicit” operat\u00f6r\u00fcn\u00fc a\u015fa\u011f\u0131daki gibi kullanabilirsiniz.<\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\nimport { isNgTemplate } from '..\/..\/..\/node_modules\/@angular\/compiler';\r\n\r\n@Directive({\r\n selector: '[CustomFor]'\r\n})\r\nexport class CustomForDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n\r\n @Input() set CustomFor(source: Array<any>) {\r\n source.forEach((item, index) => {\r\n this.viewContainerRef.createEmbeddedView(this.templateRef, {\r\n $implicit: `${++index}-) ${item}`\r\n });\r\n });\r\n }\r\n}\r\n<\/pre>\n
“$implicit” operat\u00f6r\u00fc ilgili direktifteki de\u011ferleri direkt olarak viewe ta\u015f\u0131ma g\u00f6revi g\u00f6ren bir operat\u00f6rd\u00fcr.<\/p>\n
\r\n<div *CustomFor="source;let key">\r\n <p>{{key}}<\/p>\r\n<\/div>\r\n<\/pre>\n
“$implicit” operat\u00f6r\u00fc ile veriler ta\u015f\u0131n\u0131yorsa yukar\u0131daki gibi sadece tan\u0131mlanan de\u011fi\u015fken direkt olarak o de\u011feri yakalayacakt\u0131r. Dolay\u0131s\u0131yla bu kullan\u0131mda yine ayn\u0131 \u00e7\u0131kt\u0131yla kar\u015f\u0131la\u015faca\u011f\u0131z.<\/p>\n
E\u011fer ki birden fazla de\u011fer d\u00f6nd\u00fcrmek ve viewde yakalamak istiyorsan\u0131z;<\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\nimport { isNgTemplate } from '..\/..\/..\/node_modules\/@angular\/compiler';\r\n\r\n@Directive({\r\n selector: '[CustomFor]'\r\n})\r\nexport class CustomForDirective {\r\n constructor\r\n (\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n\r\n @Input() set CustomFor(source: Array<any>) {\r\n source.forEach((item, index) => {\r\n this.viewContainerRef.createEmbeddedView(this.templateRef, {\r\n resultValue: item,\r\n resultIndex: ++index\r\n });\r\n });\r\n }\r\n}\r\n<\/pre>\n
\r\n<div *CustomFor="source;let value=resultValue;let index=resultIndex">\r\n <p>{{index}}-) {{value}}<\/p>\r\n<\/div>\r\n<\/pre>\n
\u015feklinde \u00e7al\u0131\u015fabilirsiniz.<\/p>\n
Son olarak konuyla alakal\u0131 a\u015fa\u011f\u0131daki \u00f6rne\u011fide incelemenizi tavsiye ediyorum.<\/p>\n
\r\nimport { Directive, TemplateRef, ViewContainerRef, Input } from '@angular\/core';\r\n\r\n@Directive({\r\n selector: '[CustomFor]'\r\n})\r\nexport class CustomForDirective {\r\n constructor(\r\n private templateRef: TemplateRef<any>,\r\n private viewContainerRef: ViewContainerRef\r\n ) { }\r\n\r\n @Input() set CustomFor(num: number) {\r\n for (let i = 1; i <= num; i++)\r\n this.viewContainerRef.createEmbeddedView(this.templateRef, {\r\n $implicit: i != num ? `${i},` : `${i}`\r\n });\r\n }\r\n}\r\n<\/pre>\n
\r\n<div>\r\n <span *CustomFor="20; let value">{{value}}<\/span>\r\n<\/div>\r\n<\/pre>\n
$\"Angular$ <\/a><\/p>\n
\u0130\u00e7eri\u011fimizin sonuna gelmi\u015fken konumuzun genel k\u00fclt\u00fcr\u00fcyle ilgili vurgulamak istedi\u011fim son bir husus mevcuttur;<\/p>\n
Dikkat ederseniz \u00f6zel olarak olu\u015fturulmu\u015f direktifler kullan\u0131l\u0131rken direktif ad\u0131n\u0131n ba\u015f\u0131na “*” karakteri verilmektedir. Bu karakter okunabilir kodu yahut anla\u015f\u0131labilir yap\u0131sall\u0131\u011f\u0131 ifaden eden syntactic sugar olarak nitelendirilmektedir. “*” karakteri ile direktif \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda ilgili dom elementi kapsad\u0131\u011f\u0131 t\u00fcm yap\u0131larla birlikte tamamen ele al\u0131nmakta ve TemplateRef nesnesi arac\u0131l\u0131\u011f\u0131yla ilgili element istenildi\u011fi gibi modifike edilebilmektedir.<\/em><\/strong><\/p><\/blockquote>\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, Bir \u00f6nceki Angular 5 \u2013 Custom Directives ba\u015fl\u0131kl\u0131 yaz\u0131mda Angular 5 mimarisinde Custom Directives yap\u0131lar\u0131n\u0131n nas\u0131l olu\u015fturuldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 detayl\u0131ca incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise bir \u00f6nceki makalede at\u0131lan temellerin \u00fczerine Custom...<\/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,2602,1256,450,2603,2197,2605,2604],"class_list":["post-9305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-5","tag-angular-5","tag-angular-5-structural-directives","tag-implicit","tag-input","tag-structural-directives","tag-syntactic-sugar","tag-templateref","tag-viewcontainerref"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9305","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=9305"}],"version-history":[{"count":23,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9305\/revisions"}],"predecessor-version":[{"id":9330,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9305\/revisions\/9330"}],"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=9305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}