Dom nesnesi içerisindeki herhangi bir html elementini component class'ı üzerinde refere edebilmek için viewchild komponentini kullanırız.
HTML Elementini Refere Etmek
Componenti Refere Etmek
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.
ng-content
Componentler arasında veri aktarmak istediğimiz de @input ve @output decoratorleri kullanılır.
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.
Child component içerisinde ng-component selector'ı ile işaretlediğimiz kısma parentten gönderilen html öğesi basılacaktır.
Multiple ng-content
Kaydol:
Kayıtlar (Atom)