Angular Academy · Ders

ng-template ve ng-container

Şablon parçalarını tanımlayıp barındırın

ng-template ve ng-container, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Görüntülenmeyen Şablonlar

<ng-template>, bir şey onu açıkça örnekleyene kadar görüntülenmeyen bir işaretleme parçası tanımlar. *ngIf gibi yapısal yönergelerin temelini oluşturur.

Şablon Tanımlama

<ng-template> içindeki içerik etkisiz durumda kalır. Başka bir yerde kullanmak için ona bir başvuru değişkeni verirsiniz.

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

ngTemplateOutlet ile Görüntüleme

Bir şablonu başvuruyla görüntülemek için ngTemplateOutlet kullanın.

<ng-container *ngTemplateOutlet="empty"></ng-container>

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

ng-container Neden Kullanılır?

<ng-container>, mantıksal ve DOM dışı bir gruplama öğesidir. DOM'a fazladan bir sarmalayıcı öğe eklemeden yönergeleri uygulamanıza veya düğümleri gruplamanıza olanak tanır.

Sarmalayıcı div'lerden Kaçınma

ng-container olmadan, yalnızca bir yönergeyi barındırmak için gereksiz bir <div> ekleyebilirsiniz. ng-container, görüntülenen çıktıda görünmez.

<ng-container *ngIf="user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</ng-container>

Denetim Akışını Gruplama

ng-container, DOM'a ekleme yapmadan yeni denetim akışı bloklarını sarmalamak için çok kullanışlıdır.

<ng-container *ngIf="ready">
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ng-container>

Şablon Bağlamı

Şablonlar bir bağlam nesnesi alabilir ve değerleri let- değişkenleri aracılığıyla dışa açabilir.

<ng-template #row let-name="name">
  <p>{{ name }}</p>
</ng-template>

<ng-container
  *ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>

Varsayılan Bağlam Değeri

Özel $implicit bağlam değeri, atanmış anahtarı olmayan bir let- değişkenine bağlanır.

<ng-template #item let-value>
  <span>{{ value }}</span>
</ng-template>

<ng-container
  *ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>

Şablonlar Birinci Sınıf Öğelerdir

Bir <ng-template> üzerindeki #ref, bir TemplateRef'dir. Bunu bir @Input olarak aktarabilir ve böylece bir bileşenin, tüketicilerin kullanıcı arayüzünün bazı bölümlerini özelleştirmesine izin vermesini sağlayabilirsiniz.

emptyTemplate = input<TemplateRef<unknown>>();

Ana Bilgisayar Olarak ng-container

ng-container, DOM'u temiz tutarak dinamik bileşenler veya şablonlar için çıkış ana bilgisayarı olarak da kullanışlıdır.

<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>

Hangisi Ne Zaman Kullanılır?

ng-template: ertelenmiş/yeniden kullanılabilir işaretleme. ng-container: fazladan DOM oluşturmadan düğümleri gruplama ve yönergeleri barındırma. Bu ikisi genellikle birlikte çalışır.

Hızlı Kontrol

ng-template ve ng-container hakkındaki anlayışınızı sınayın.

Özet

<ng-template> öğesinin, ngTemplateOutlet (isteğe bağlı bağlamla) aracılığıyla görüntülenen etkisiz ve örneklenebilir işaretlemeyi tuttuğunu; <ng-container> öğesinin ise DOM'a ekleme yapmadan düğümleri grupladığını veya yönergeleri barındırdığını öğrendiniz.

Sıkça Sorulan Sorular

“ng-template ve ng-container” dersi ücretsiz mi?

Evet — “ng-template ve ng-container” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“ng-template ve ng-container” dersinde ne öğreneceğim?

Şablon parçalarını tanımlayıp barındırın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“ng-template ve ng-container” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön