<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular mimarisinde bir structural directive olan ngTemplateOutlet<\/code> direktifinin ne oldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 tam teferruatl\u0131 ele al\u0131yor olaca\u011f\u0131z.<\/p>\n
ngTemplateOutlet Neye Yarar?<\/h4>\nDOM \u00fczerinde ng-container<\/a> ile ayr\u0131lm\u0131\u015f \u00e7e\u015fitli b\u00f6l\u00fcmlere ng-template<\/a>‘in bar\u0131nd\u0131rd\u0131\u011f\u0131 i\u00e7erikleri yay\u0131nlamak i\u00e7in kullan\u0131lmaktad\u0131r.<\/p>\n
ngTemplateOutlet Nas\u0131l Kullan\u0131l\u0131r?<\/h4>\nBunu \u00f6nceden klavyeye alm\u0131\u015f oldu\u011fumuz ng-container<\/a> ve ng-template<\/a> ba\u015fl\u0131kl\u0131 i\u00e7eriklerimizde basitinden incelemi\u015ftik. Yine benzer \u00f6rne\u011fi vermemiz gerekirse e\u011fer a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz:<\/p>\n
\n\r\n<div style="background-color:pink;">\r\n  <ng-container *ngTemplateOutlet="contentTemplate">\r\n\r\n  <\/ng-container>\r\n<\/div>\r\n\r\n<ng-template #contentTemplate>\r\n  Content...\r\n<\/ng-template>\r\n<\/pre>\n<\/div>\nngTemplateOutlet’i ngTemplateOutletContext \u0130le Kullanmak?<\/h4>\nngTemplateOutlet<\/code>‘e ngTemplateOutletContext<\/code> \u00f6zelli\u011fini kullanarak da ekstradan parametrik veriler iletebiliriz. \u015e\u00f6yle ki;<\/p>\n\n\r\n<div style="background-color:pink;">\r\n  <ng-container [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{data:{value:15}}">\r\n\r\n  <\/ng-container>\r\n<\/div>\r\n\r\n<ng-template #contentTemplate let-data="data">\r\n  Content...\r\n  {{data.value}}\r\n<\/ng-template>\r\n<\/pre>\n<\/div>\nYukar\u0131daki kod blo\u011funu incelerseniz ‘contentTemplate’ isminde bir \u015fablon olu\u015fturulmakta ve ng-container<\/code> \u00fczerinden bu \u015fablona [ngTemplateOutletContext]<\/code> e\u015fli\u011finde<\/a> yandaki json de\u011feri parametre olarak g\u00f6nderilmektedir. ng-template<\/code> ise bu parametreyi let-data<\/code> keyword’\u00fc ile yakalamakta ve i\u00e7erisinde kullanmaktad\u0131r. Burada dikkat edilmesi gereken bir husus vard\u0131r ki o da, let-data<\/code> i\u00e7erisinde belirtilecek parametre ad\u0131n\u0131n [ngTemplateOutletContext]<\/code>‘e verilen json datas\u0131ndaki ilk de\u011fer ile ayn\u0131 olmas\u0131 zaruriyetidir.<\/a>Ayr\u0131ca alternatif olarak a\u015fa\u011f\u0131daki s\u00f6zdizimini de kullanabilirsiniz.<\/p>\n
\n\r\n  <ng-container *ngTemplateOutlet="contentTemplate; context:{data: {value: 15}}" >\r\n\r\n  <\/ng-container>\r\n<\/pre>\n<\/div>\nE\u011fer birden fazla parametrik de\u011fer g\u00f6ndermek istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015fabilirsiniz.<\/p>\n\n\r\n<div style="background-color:pink;">\r\n  <ng-container [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{data1:{value:15}, data2:{value:25}, data3:{value:35}}" >\r\n\r\n  <\/ng-container>\r\n<\/div>\r\n\r\n<ng-template #contentTemplate\r\nlet-data1="data1"\r\nlet-data2="data2"\r\nlet-data3="data3">\r\n  Content...\r\n  {{data1.value}}<br>\r\n  {{data2.value}}<br>\r\n  {{data3.value}}\r\n<\/ng-template>\r\n<\/pre>\n<\/div>\nYa da di\u011fer s\u00f6zdizimine g\u00f6re a\u015fa\u011f\u0131daki gibi de \u00e7al\u0131\u015fabilirsiniz.<\/p>\n\n\r\n  <ng-container *ngTemplateOutlet="contentTemplate; context: {data1:{value:15}, data2:{value:25}, data3:{value:35}}" >\r\n\r\n  <\/ng-container>\r\n<\/pre>\n<\/div>\n$implicit Kullan\u0131m\u0131?<\/h4>\n$implicit<\/code> keyword’\u00fcn\u00fc context nesnesinde kullan\u0131rsan\u0131z e\u011fer t\u00fcm local de\u011fi\u015fkenler i\u00e7in default de\u011fer olarak ayarlama ger\u00e7ekle\u015ftirebilirsiniz. Misal olarak a\u015fa\u011f\u0131daki \u00f6rnekte, let-default<\/code>‘a herhangi bir de\u011fer atamas\u0131 ger\u00e7ekle\u015ftirmedik. Bundan dolay\u0131 ilgili parametre de\u011ferini $implicit<\/code> parametresinden alacakt\u0131r.<\/p>\n\n\r\n<div style="background-color:pink;">\r\n  <ng-container [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{$implicit: 'default value', data: {value:15}}" >\r\n\r\n  <\/ng-container>\r\n<\/div>\r\n\r\n<ng-template #contentTemplate let-data="data" let-default>\r\n  Content...\r\n  {{data.value}} <br>\r\n  {{default}}\r\n<\/ng-template>\r\n<\/pre>\n<\/div>\n<\/a><\/p>\n
Bizler $implicit<\/code> keyword’\u00fcn\u00fc genellikle tekil parametrelerin s\u00f6z konusu oldu\u011fu durumlar i\u00e7in pratik oldu\u011fu d\u00fc\u015f\u00fcncesiyle tercih ederiz. Bunun i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyebilirsiniz;<\/p>\n
\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-persons',\r\n  template: `\r\n<ng-container [ngTemplateOutlet]="personTemplate" [ngTemplateOutletContext]="{$implicit: persons}">\r\n\r\n<\/ng-container>\r\n\r\n<ng-template let-persons #personTemplate>\r\n  <ul>\r\n    <li *ngFor="let person of persons">\r\n      {{person.name}} {{person.surname}}\r\n    <\/li>\r\n  <\/ul>\r\n<\/ng-template>\r\n`\r\n})\r\nexport class PersonsComponent {\r\n  persons: { name: string, surname: string }[] = [\r\n    { name: "Gen\u00e7ay", surname: "Y\u0131ld\u0131z" },\r\n    { name: "Nevin", surname: "Y\u0131ld\u0131z" },\r\n    { name: "G\u00fcl\u015fah", surname: "Y\u0131ld\u0131z" },\r\n    { name: "Muhammet K\u00fcr\u015fad", surname: "Y\u0131ld\u0131z" },\r\n  ]\r\n}\r\n<\/pre>\n<\/div>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere buradaki operasyonda direkt ng-container<\/code> i\u00e7erisinde \u00e7a\u011fr\u0131lacak template i\u00e7erisine persons dizisi tek bir parametre olarak g\u00f6nderilmek istenmekte ve bunun i\u00e7in ayr\u0131 bir alan\u0131 manuel olarak tan\u0131mlamak yerine direkt olarak $implicit<\/code> keyword’\u00fc ile default tan\u0131mlama ger\u00e7ekle\u015ftirilmektedir. Devam\u0131nda ise ng-template<\/code>‘te kullan\u0131rken direkt olarak let-persons<\/code> ad\u0131nda bir de\u011fi\u015fkenle(ki farkl\u0131 bir isimde de olabilirdi) veri elde edilmektedir.
\n<\/a><\/p>\n
Child Component’e Template Ge\u00e7irmek<\/h4>\nngTemplateOutlet<\/code>‘i kullanarak parent component’ten child component’e template’leri ge\u00e7irebilir ve istedi\u011fimiz yerlerde kullanabiliriz. Bunun i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyiniz;<\/p>\n\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-parent',\r\n  template: `\r\n<ng-template #parentTemplate>\r\nParent Component Template Content\r\n<\/ng-template>\r\n\r\n<app-child [childTemplate]="parentTemplate"><\/app-child>\r\n`\r\n})\r\nexport class ParentComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131da parent component’in i\u00e7eri\u011fine g\u00f6z atarsan\u0131z e\u011fer ‘parentTemplate’ ad\u0131nda bir ng-template<\/code> tan\u0131mlanm\u0131\u015ft\u0131r ve bu template, 10. sat\u0131rda selector’\u0131 ile \u00e7a\u011fr\u0131lan child component’in ‘childTemplate’ de\u011ferine g\u00f6nderilmi\u015ftir. \u015eimdi de a\u015fa\u011f\u0131da child component’in i\u00e7eri\u011fine g\u00f6z atarsak;<\/p>\n\n\r\nimport { Component, Input, OnInit, TemplateRef } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-child',\r\n  template: `\r\n<ng-container *ngTemplateOutlet="childTemplate">\r\n\r\n<\/ng-container>\r\n`\r\n})\r\nexport class ChildComponent {\r\n  @Input() childTemplate: TemplateRef<HTMLElement>;\r\n}\r\n<\/pre>\n<\/div>\nBurada da ng-container<\/code>‘a ngTemplateOutlet<\/code> ile bir ‘TemplateRef<HTMLElement>’ t\u00fcr\u00fcnden ‘childTemplate’ isimli input parametre ba\u011flanm\u0131\u015ft\u0131r. Bu parametre i\u015fte parent component’te 10. sat\u0131rdaki ‘[childTemplate]’e kar\u015f\u0131l\u0131k gelmektedir.<\/p>\n
Yap\u0131lan bu \u00e7al\u0131\u015fma neticesinde parent component’te ki template child component’e ge\u00e7irilmi\u015ftir.<\/p>\nViewChild Kullanarak Template’e Eri\u015fmek<\/h4>\nHerhangi bir component’te ki ng-template<\/code>‘e eri\u015fim sa\u011flayabilmek i\u00e7in a\u015fa\u011f\u0131daki gibi ‘ViewChild’\u0131 kullanabilirsiniz.<\/p>\n\n\r\nimport { AfterViewInit } from '@angular\/core';\r\nimport { TemplateRef, ViewChild } from '@angular\/core';\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  template: `\r\n<ng-template #myTemplate>\r\nTemplate content\r\n<\/ng-template>\r\n`\r\n})\r\nexport class AppComponent implements AfterViewInit {\r\n  @ViewChild("myTemplate") myTemplate: TemplateRef<HTMLElement>;\r\n\r\n  ngAfterViewInit(): void {\r\n    console.log(this.myTemplate);\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n<\/a><\/p>\n
ng-template’i ng-content \u0130le Birlikte Kullanmak<\/h4>\nParent ve child component’lerin s\u00f6z konusu oldu\u011fu durumlarda ng-content<\/a>‘i a\u015fa\u011f\u0131daki gibi ng-template<\/code> i\u00e7erisinde kullanabilirsiniz.<\/p>\n
\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-parent',\r\n  template: `\r\n<app-child>\r\n  <p>Bu i\u00e7erik ng-content i\u00e7in<\/p>\r\n<\/app-child>\r\n`\r\n})\r\nexport class ParentComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\n\n\r\nimport { Component, Input, OnInit, TemplateRef } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-child',\r\n  template: `\r\n<ng-container [ngTemplateOutlet]="myTemplate">\r\n\r\n<\/ng-container>\r\n\r\n<ng-template #myTemplate>\r\n  <ng-content><\/ng-content>\r\n<\/ng-template>\r\n`\r\n})\r\nexport class ChildComponent {\r\n\r\n}\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 bir structural directive olan ngTemplateOutlet direktifinin ne oldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 tam teferruatl\u0131 ele al\u0131yor olaca\u011f\u0131z. ngTemplateOutlet Neye Yarar? DOM \u00fczerinde ng-container ile ayr\u0131lm\u0131\u015f \u00e7e\u015fitli b\u00f6l\u00fcmlere ng-template‘in bar\u0131nd\u0131rd\u0131\u011f\u0131 i\u00e7erikleri...<\/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":[4660,4647,4659,4658,4661],"class_list":["post-25540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-implicit-keywordu","tag-ngtemplateoutlet","tag-ngtemplateoutlet-directive","tag-ngtemplateoutlet-nedir","tag-ngtemplateoutletcontext"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25540","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=25540"}],"version-history":[{"count":10,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25540\/revisions"}],"predecessor-version":[{"id":25556,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25540\/revisions\/25556"}],"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=25540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}