Angular Academy · Pelajaran

ng-template dan ng-container

Definisikan dan tempatkan fragmen templat.

ng-template dan ng-container adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Templat yang Tidak Langsung Dirender

<ng-template> mendefinisikan potongan markup yang tidak dirender sampai sesuatu membuat instansinya secara eksplisit. Ini menjadi dasar bagi direktif struktural seperti *ngIf.

Mendefinisikan Templat

Konten di dalam <ng-template> tetap tidak aktif. Berikan variabel referensi untuk menggunakannya di tempat lain.

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

Merender dengan ngTemplateOutlet

Gunakan ngTemplateOutlet untuk merender templat berdasarkan referensinya.

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

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

Mengapa ng-container?

<ng-container> adalah elemen pengelompokan logis dan bukan DOM. Elemen ini memungkinkan Anda menerapkan direktif atau mengelompokkan node tanpa menambahkan elemen pembungkus tambahan ke DOM.

Menghindari Div Pembungkus

Tanpa ng-container, Anda mungkin menambahkan <div> yang tidak berguna hanya untuk menjadi tempat direktif. ng-container menghilang dari keluaran yang dirender.

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

Mengelompokkan Alur Kontrol

ng-container sangat berguna untuk membungkus blok alur kontrol baru tanpa menambahkan DOM.

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

Konteks Templat

Templat dapat menerima objek konteks, yang mengekspos nilai melalui variabel let-.

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

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

Nilai Konteks Bawaan

Nilai konteks khusus $implicit terikat ke variabel let- yang tidak memiliki kunci yang ditetapkan.

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

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

Templat sebagai Nilai Kelas Satu

#ref pada <ng-template> merupakan TemplateRef. Anda dapat meneruskannya sebagai @Input agar komponen memungkinkan konsumen menyesuaikan bagian-bagian UI-nya.

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

ng-container sebagai Host

ng-container juga berguna sebagai host saluran untuk komponen atau templat dinamis, sehingga DOM tetap bersih.

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

Kapan Menggunakan yang Mana

ng-template: markup tertunda/dapat digunakan kembali. ng-container: mengelompokkan dan menjadi host direktif tanpa DOM tambahan. Keduanya sering digunakan bersama.

Pemeriksaan Singkat

Uji pemahaman Anda tentang ng-template dan ng-container.

Rangkuman

Anda telah mempelajari bahwa <ng-template> menyimpan markup tidak aktif yang dapat dibuat instansinya dan dirender melalui ngTemplateOutlet (dengan konteks opsional), sedangkan <ng-container> mengelompokkan node atau menjadi host direktif tanpa menambahkan DOM.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ng-template dan ng-container” gratis?

Ya — teks lengkap “ng-template dan ng-container” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “ng-template dan ng-container”?

Definisikan dan tempatkan fragmen templat. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “ng-template dan ng-container” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy