Merhaba. Bu yazıda sizlere <ng-template>, <ng-container> ve <ng-content> ten bahsetmek istiyorum. Angular’ın şuan en güncel olan 8 versiyonundayım.

ng-template

<ng-template>, Component’ler gibi yeniden kullanılabilir şablonlar oluşturmamızı sağlar. Ayrıca <ng-template> HTML’deki <template> elemanına benzer.

MDN‘deki <template> etiketinin tanımı şu şekilde:

The HTML Content Template (<template>) element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

HTML’de Template’ler siz çağırmadıkça, kullanmadıkça sayfada görünmezler fakat DOM’a yansırlar. Angular’da da, Template’ler siz sayfaya çağırmadıkça veya koşul gerçekleşmedikçe sayfada görünmezler, tıpkı HTML’deki <template> etiketi gibi. Fakat <template> etiketi DOM’da görünürken, <ng-template> lazım olmadıkça DOM’a yansımaz.

<ng-template> için basit bir örnek vermek gerekirse:

<ng-template>
  Burası bir Template'dir.
</ng-template>

Yukarıdaki template Angular tarafından DOM’a basılmayacaktır.

Aşağıda, #tmpl1 dom elemanının referansıdır. *ngTemplateOutlet directive’i tarafından çağırılarak sayfaya basılır:

<ng-template #tmpl1>
  Burası bir Template'dir.
</ng-template>
<ng-container *ngTemplateOutlet="tmpl1"></ng-container>

<ng-template>‘in Loading gösterme amaçlı kullanılmasına bazı projelerde denk gelebilirsiniz:

<div class="items" *ngIf="items else loading">
  ...
</div>

<ng-template #loading>
  <div>Yükleniyor...</div>
</ng-template>

loading değişkeni dolu olduğu an <ng-template #loading> sayfaya basılacaktır.

ng-container

Az önce bahsettiğimiz ng-template sayfaya koşul gerçekleştiğinde yansımasına rağmen ng-container her daim sayfaya basılır, sayfaya basmak için herhangi bir koşula gerek yoktur. Fakat DOM’a ekstra bir düğüm eklemeden sadece kendi içeriğini sayfaya basar. (React’taki <React.Fragment> gibi.)

<ng-container>
    Bu yazısı sayfaya basılacaktır.
</ng-container>

Aşağıdaki örnek, items değişkeninin dolu olduğunu düşünürsek, ng-container‘ı anlamak için gayet güzel olacak:

<table>
  <tbody>
    <ng-container *ngFor="let item of items">
    <tr *ngIf="item">
      <td></td>
    </tr>
    </ng-container>
  </tbody>
</table>

Aşağıda<ng-container> ve <ng-template>‘in kullanımı hakkında ufak bir örnek mevcut.

https://stackblitz.com/edit/angular-kgesdb

ng-content

Component’lerinizin içine component, HTML element vb. taşımak için <ng-content> kullanılır. En basit örneğiyle:

top.component.ts:

import  {  Component,Input,TemplateRef  }  from  '@angular/core';
@Component({
  selector:  'top-component',
  template:  `
    <div class="wwrapper">
      <ng-content></ng-content>
    </div>
  `,
})
export  class  TopComponent  {
  @Input() template:  TemplateRef<any>;
}

Gerekli component’i module dosyanıza import edip kullanmak isterseniz kullanım şu şekilde olacak:

<top-component>
Bu yazılar wrapper içinde görünecektir.
</top-component>

DOM’daki çıktısı şu şekilde olacaktır:

<div class="wrapper">
Bu yazılar wrapper içinde görünecektir.
</div>

Şimdilik bu kadar, görüşmek üzere :)

Kaynaklar: