Angular – Gelişmiş Component Yapılanması | ng-container

Merhaba,

Bu içeriğimizde Angular mimarisinde HTML’in dışında işlevsel bir alan oluşturmamızı sağlayan ng-container özelliğini inceliyor olacağız.

ng-container Nedir?

ng-container, sayfa üzerinde HTML elementleriyle uğraşmaksızın bir bölüm/alan oluşturmamıza olanak sağlayan, Document Object Model(DOM) içerisinde tanımlanmayan lakin içinde içerik barındırabilen, özü itibariyle ne directive, ne component ne de class yahut interface olan, sade ve sadece bir sözdizimi/syntax öğesinden ibaret olan bir özelliktir.

Misal olarak;

    <h1>Başlık 1</h1>
    <p>İçerik</p>
    <ng-container>
      Container içerik
    </ng-container>

Yukarıdaki şablonu ele alırsak eğer bunun render edilmiş hali yandaki görseldeki gibi olacaktır. ng-container‘ın render edildikten sonra herhangi bir HTML elementine karşılık gelmediğine dikkatinizi çekerim.

ng-container Nerelerde Kullanılır?

ng-container‘ı genellikle ngIf, ngFor vs. gibi direktifler eşliğinde kullanmaktayız. Bu durumlara örnek olması hasebiyle aşağıdaki çalışmayı inceleyebilirsiniz:

  programmingLanguages = [
    { name: "Angular", active: true },
    { name: "React", active: true },
    { name: "Typescript", active: true },
    { name: "Javascript", active: true },
    { name: "Php", active: false }
  ]

Yukarıda, içerisinde bazı programlama dillerinin bilgilerini barındıran bir koleksiyon tanımı mevcuttur. Bizler bu koleksiyon içerisindeki programlama dillerinden aktif olanları ekrana listelemek istiyorsak tüm öğeleri tek tek ngIf direktifi ile kontrol etmemiz gerekmektedir. ng-container‘ı kullanmaksızın bu işlemi gerçekleştirebilmek için span HTML öğesini aşağıdaki gibi kullanabiliriz.

    <ul>
      <span *ngFor="let language of programmingLanguages">
        <li *ngIf="language.active">{{language.name}}</li>
      </span>
    </ul>

Render neticesi :

Ya da component’lerin html dosyalarını temiz tutabilmek ve render neticesinde üretilecek kaynak kodu da mümkün mertebe performanslı olacak şekilde sade bir şekilde sunabilmek için ng-container‘ı kullanarak burada daha doğru bir tercihte bulunabiliriz.

    <ul>
      <ng-container *ngFor="let language of programmingLanguages">
        <li *ngIf="language.active">{{language.name}}</li>
      </ng-container>
    </ul>

Render neticesi :

Dikkat ederseniz aktif olmayan programlama dillerinin yerine ekstradan bir html elemanı üretilmeyeceği için maliyet ve performans açısından lehimize bir davranış sergilenmiş olmaktadır.

ng-container İle ng-template İlişkisi

ng-container ile var olan ng-template‘ler içerisindeki şemaları aşağıdaki gibi ngTemplateOutlet ile dinamik bir şekilde çekebilirsiniz.

  template: `
    <div class="div1">
      <ng-container *ngTemplateOutlet="div1content"></ng-container>
    </div>
    <div class="div2">
      <ng-container *ngTemplateOutlet="div2content"></ng-container>
    </div>
    <div class="div3">
      <ng-container *ngTemplateOutlet="div3content"></ng-container>
    </div>

    <ng-template #div1content>div1 içeriği</ng-template>
    <ng-template #div2content>div2 içeriği</ng-template>
    <ng-template #div3content>div3 içeriği</ng-template>
`,
  styles: [`
    .div1 { color:red; }
    .div2 { color:blue; }
    .div3 { color:green; }
`]

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…