<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular mimarisinde tasar\u0131msal a\u00e7\u0131dan \u015fablonlarla dinamik \u00e7al\u0131\u015fmalar ger\u00e7ekle\u015ftirmemizi sa\u011flayan ng-template<\/code> \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z.<\/p>\n
ng-template Nedir?<\/h4>\nng-template<\/code>, ng-container<\/a> gibi sayfa \u00fczerinde HTML elementleriyle u\u011fra\u015fmaks\u0131z\u0131n bir b\u00f6l\u00fcm\/alan olu\u015fturmam\u0131za olanak sa\u011flayan ve Document Object Model(DOM) i\u00e7erisinde tan\u0131mlanmayan bir \u00f6zelliktir. ng-container<\/code>‘dan temel fark\u0131, render edildi\u011fi taktirde dahi ayr\u0131 aparatlar arac\u0131l\u0131\u011f\u0131yla g\u00f6sterilmedi\u011fi s\u00fcrece i\u00e7erisindeki HTML elementlerin DOM \u00fczerine i\u015flenmemesidir.<\/p>\n
Misal olarak a\u015fa\u011f\u0131daki kod blo\u011funu incelerseniz e\u011fer;<\/p>\n
\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <ng-container>\r\n      Container i\u00e7erik\r\n    <\/ng-container>\r\n    <ng-template>\r\n      Template i\u00e7erik\r\n    <\/ng-template>\r\n`\r\n})\r\nexport class AppComponent {\r\n  title = 'a';\r\n}\r\n<\/pre>\n<\/div>\n<\/a>Bu kod render edildi\u011finde ng-container<\/code>‘\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131n DOM’a eklendi\u011fini lakin ng-template<\/code>‘in \u00e7\u0131kt\u0131s\u0131n\u0131n ise eklenmedi\u011fini g\u00f6receksiniz.<\/p>\n
Buradan anl\u0131yoruz ki, ng-template<\/code>‘in nerede ve ne zaman g\u00f6r\u00fcnt\u00fclenece\u011fini bildirmek bizim i\u015fimizdir.<\/p>\n
ng-template<\/code>‘i g\u00f6r\u00fcnt\u00fclemek i\u00e7in a\u015fa\u011f\u0131daki iki y\u00f6ntemden birini kullanabilirsiniz:<\/p>\n
\nngTemplateOutlet<\/code> direktifi<\/li>\nTemplateRef & ViewContainerRef \u00f6\u011feleri<\/li>\n<\/ul>\nngTemplateOutlet Direktifi \u0130le ng-template’i G\u00f6r\u00fcnt\u00fcleme<\/h4>\n\n\r\n    <ng-container *ngTemplateOutlet="templateIcerik">\r\n      Container i\u00e7erik\r\n    <\/ng-container>\r\n    <ng-template #templateIcerik>\r\n      Template i\u00e7erik\r\n    <\/ng-template>\r\n<\/pre>\n<\/div>\n<\/a>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer ilgili ng-template<\/code>‘e bir referans at\u0131yoruz ve bu referans\u0131 ng-container<\/code> \u00fczerinde ‘ngTemplateOutlet’ direktifi e\u015fli\u011finde \u00e7a\u011f\u0131r\u0131yoruz. Yap\u0131lan render neticesine g\u00f6z atarsan\u0131z e\u011fer ng-template<\/code>‘in ng-container<\/code> i\u00e7eri\u011fini ezdi\u011fini g\u00f6r\u00fcyoruz.<\/p>\n
TemplateRef & ViewContainerRef \u0130le ng-template’i G\u00f6r\u00fcnt\u00fcleme<\/h4>\n‘TemplateRef’, ng-template<\/code>‘i component \u00fczerinde(.ts) temsil etmemizi sa\u011flayan bir s\u0131n\u0131fken, ‘ViewContainerRef’ ise ng-template<\/code>‘in nerede olu\u015fturulaca\u011f\u0131n\u0131 belirtmemizi sa\u011flayan ba\u015fka bir s\u0131n\u0131ft\u0131r.<\/p>\n\n\r\nimport { AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <ng-template #templateIcerik>\r\n      Template i\u00e7erik\r\n    <\/ng-template>\r\n`\r\n})\r\nexport class AppComponent implements AfterViewInit {\r\n  constructor(private viewContainerRef: ViewContainerRef) {\r\n\r\n  }\r\n\r\n  @ViewChild("templateIcerik", { read: TemplateRef })\r\n  templateIcerik: TemplateRef<any>;\r\n\r\n  ngAfterViewInit(): void {\r\n    this.viewContainerRef.createEmbeddedView(this.templateIcerik);\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki kod blo\u011funa g\u00f6z atarsan\u0131z e\u011fer ng-template<\/code>‘e yine bir referans verilmekte ve component’in .ts dosyas\u0131 i\u00e7erisinde ‘@ViewChild’ e\u015fli\u011finde bu referans ‘TemplateRef’ t\u00fcr\u00fcnde elde edilmektedir. Ard\u0131ndan dependency injection ile inject edilen ‘ViewContainerRef’ nesnesi \u00fczerinden createEmbeddedView<\/code> metodu kullan\u0131larak ng-template<\/code> sayfada g\u00f6r\u00fcnt\u00fclenmektedir.<\/p>\n
Evet, art\u0131k ng-template<\/code>‘in ne oldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 \u00f6\u011frendi\u011fimize g\u00f6re gelin hangi durumlarda tercih edebilece\u011fimizi inceleyelim.<\/p>\nngIf \u0130le ng-template Kullan\u0131m\u0131<\/h4>\nngIf<\/a> direktifini a\u015fa\u011f\u0131daki gibi bir durumda bir\u00e7ok kez kullanm\u0131\u015fs\u0131n\u0131zd\u0131r.<\/p>\n
\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <input [(ngModel)]="selected" type="checkbox"> Se\u00e7\r\n    <div *ngIf="selected">\r\n      Se\u00e7ili\r\n    <\/div>\r\n`\r\n})\r\nexport class AppComponent {\r\n  selected: boolean = false;\r\n}\r\n<\/pre>\n<\/div>\nBu kodu yazman\u0131n a\u015fa\u011f\u0131daki gibi ng-template<\/code> e\u015fli\u011finde farkl\u0131 bir yolu daha vard\u0131r. <\/p>\n\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <input [(ngModel)]="selected" type="checkbox"> Se\u00e7\r\n    <ng-template [ngIf]="selected">\r\n      <div>\r\n        Se\u00e7ili\r\n      <\/div>\r\n    <\/ng-template>\r\n`\r\n})\r\nexport class AppComponent {\r\n  selected: boolean = false;\r\n}\r\n<\/pre>\n<\/div>\nYa da a\u015fa\u011f\u0131daki gibi if-else durumlar\u0131na g\u00f6re \u015fablon g\u00f6sterimlerinde ng-template<\/code> bi\u00e7ilmi\u015f kaftand\u0131r.<\/p>\n\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <div *ngIf="selected; then template1 else template2">\r\n\r\n    <\/div>\r\n    <ng-template #template1>\r\n      \u015eablon 1\r\n    <\/ng-template>\r\n    <ng-template #template2>\r\n      \u015eablon 2\r\n    <\/ng-template>\r\n`\r\n})\r\nexport class AppComponent {\r\n  selected: boolean = true;\r\n}\r\n<\/pre>\n<\/div>\n<\/a>G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere \u015farta g\u00f6re hangi ng-template<\/code>‘in g\u00f6r\u00fcnt\u00fclenece\u011fini if -> then -> else<\/em> yap\u0131s\u0131 sayesinde belirlememizi sa\u011flamaktad\u0131r. Ayr\u0131ca ilgili HTML eleman\u0131n\u0131n yerine \u015farta uygun referansa kar\u015f\u0131l\u0131k gelen ng-template<\/code>‘in i\u00e7eri\u011fini bast\u0131\u011f\u0131na dikkatinizi \u00e7ekerim.<\/p>\n
Tabi yukar\u0131daki \u00e7al\u0131\u015fmay\u0131 a\u015fa\u011f\u0131daki gibi [ngIf]<\/code>, [ngIfThen]<\/code> ve [ngIfElse]<\/code> direktifleri e\u015fli\u011finde de geli\u015ftirebiliriz.<\/p>\n
\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <ng-template [ngIf]="selected" [ngIfThen]="template1" [ngIfElse]="template2">\r\n\r\n    <\/ng-template>\r\n    <ng-template #template1>\r\n      \u015eablon 1\r\n    <\/ng-template>\r\n    <ng-template #template2>\r\n      \u015eablon 2\r\n    <\/ng-template>\r\n`\r\n})\r\nexport class AppComponent {\r\n  selected: boolean = true;\r\n}\r\n<\/pre>\n<\/div>\nngFor \u0130le ng-template Kullan\u0131m\u0131<\/h4>\nA\u015fa\u011f\u0131daki ngFor<\/a> direktifiyle olan \u00e7al\u0131\u015fmay\u0131 ele al\u0131rsak e\u011fer;<\/p>\n
\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n    <ul>\r\n      <li *ngFor="let product of products;trackBy: trackByProduct">\r\n        {{ product.name }}\r\n      <\/li>\r\n    <\/ul>\r\n`\r\n})\r\nexport class AppComponent {\r\n  products: { name: string, quantity: number }[] = [\r\n    { name: "A Product", quantity: 15 },\r\n    { name: "B Product", quantity: 25 },\r\n    { name: "C Product", quantity: 35 },\r\n    { name: "D Product", quantity: 45 }\r\n  ]\r\n\r\n  trackByProduct(index, product: { name: string, quantity: number }) {\r\n    return product.name;\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nng-template<\/code> e\u015fli\u011finde a\u015fa\u011f\u0131daki gibi de in\u015fa edebilirsiniz.<\/p>\n\n\r\n    <ul>\r\n      <ng-template\r\n      ngFor let-product\r\n      [ngForOf]="products"\r\n      [ngForTrackBy]="trackByProduct">\r\n        <li>\r\n          {{ product.name }}\r\n        <\/li>\r\n      <\/ng-template>\r\n    <\/ul>\r\n<\/pre>\n<\/div>\nBurada g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ngFor<\/code>, [ngForOf]<\/code> ve [ngForTrackBy]<\/code> direktifleri bizlere e\u015flik etmektedir.<\/p>\nngSwitch \u0130le ng-template Kullan\u0131m\u0131<\/h4>\nng-template<\/code>‘i ayn\u0131 \u015fekilde ngSwitch<\/code> ile birlikte de kullanabilmekteyiz. \u015e\u00f6yle ki;<\/p>\n\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n  <input type="number" [(ngModel)]="number" max="5" min="1">\r\n  <div [ngSwitch]="number">\r\n    <div *ngSwitchCase="1">Bir<\/div>\r\n    <div *ngSwitchCase="2">\u0130ki<\/div>\r\n    <div *ngSwitchCase="3">\u00dc\u00e7<\/div>\r\n    <div *ngSwitchCase="4">D\u00f6rt<\/div>\r\n    <div *ngSwitchCase="5">Be\u015f<\/div>\r\n  <\/div>\r\n`\r\n})\r\nexport class AppComponent {\r\n  number: number;\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki \u00f6rne\u011fi ele al\u0131rsak render edildi\u011finde a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma sergileyecektir.
\n<\/a>Ayn\u0131 operasyonu ng-template<\/code> ile a\u015fa\u011f\u0131daki gibi ger\u00e7ekle\u015ftirirsek e\u011fer ayn\u0131 davran\u0131\u015f\u0131 sergilemi\u015f olacakt\u0131r.<\/p>\n
\n\r\n  <input type="number" [(ngModel)]="number" max="5" min="1">\r\n  <div [ngSwitch]="number">\r\n    <ng-template [ngSwitchCase]="1">\r\n      <div>Bir<\/div>\r\n    <\/ng-template>\r\n    <ng-template [ngSwitchCase]="2">\r\n      <div>\u0130ki<\/div>\r\n    <\/ng-template>\r\n    <ng-template [ngSwitchCase]="3">\r\n      <div>\u00dc\u00e7<\/div>\r\n    <\/ng-template>\r\n    <ng-template [ngSwitchCase]="4">\r\n      <div>D\u00f6rt<\/div>\r\n    <\/ng-template>\r\n    <ng-template [ngSwitchCase]="5">\r\n      <div>Be\u015f<\/div>\r\n    <\/ng-template>\r\n    <ng-template ngSwitchDefault>\r\n      <div>S\u0131f\u0131r<\/div>\r\n    <\/ng-template>\r\n  <\/div>\r\n<\/pre>\n<\/div>\n\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular mimarisinde tasar\u0131msal a\u00e7\u0131dan \u015fablonlarla dinamik \u00e7al\u0131\u015fmalar ger\u00e7ekle\u015ftirmemizi sa\u011flayan ng-template \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z. ng-template Nedir? ng-template, ng-container gibi sayfa \u00fczerinde HTML elementleriyle u\u011fra\u015fmaks\u0131z\u0131n bir b\u00f6l\u00fcm\/alan olu\u015fturmam\u0131za olanak sa\u011flayan ve Document Object...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[4650,2156,4649,4648,4647,2605,2604],"class_list":["post-25475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-viewchild","tag-angular","tag-angular-ng-template","tag-ng-template","tag-ngtemplateoutlet","tag-templateref","tag-viewcontainerref"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25475","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=25475"}],"version-history":[{"count":11,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25475\/revisions"}],"predecessor-version":[{"id":25491,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25475\/revisions\/25491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=25475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}