2 Ağustos 2025 Cumartesi

ng-template

Componentler arası veri değilde html öğeleri içeren kodlar paylaşmak istediğimizde burada devreye ng-content girmektedir. ng-content, html içeriklerini parent componentten child component'e geçirmemizi ve render etmemizi sağlar. Fakat ng-template ile ng-contentten farklı olarak bilinçli olarak bu ilgili kısmında render edilmesini tetiklemeliyiz. ng-content kısmı direkt olarak sayfa içerisinde görüntülenir.


TemplateRef ve ViewContainerRef ile ng-template'i bilinçli olarak çağırma

TempalteRef, ng-template'i component class'ı üzerinde temsil etmemizi sağlayan bir sınıfken, ViewContainerRef ise ng-templatenin nerede oluşturulacağını belirtmemizi sağlayan başka bir sınıftır.



Yukarıdaki görseli incelersek eğer template: içerisindeki ng-template'e bir referans verilmekte ve bu referans component classında  @ViewChild eşliğinde TemplateRef türünde elde edilmektedir. 

Ardından dependency injection ile inject edilen ViewContainerRef nesnesi üzerinden createEmbeddedView metodu kullanılarak ng-template sayfada görüntülenmektedir.





Hiç yorum yok:

Yorum Gönder