Rendering Kondisional dengan @if
Tampilkan konten berdasarkan kondisi dengan @if dan @else.
Rendering Kondisional dengan @if adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Alur Kontrol Bawaan
Template Angular modern menyertakan blok alur kontrol bawaan yang ditulis dengan simbol at. Blok ini menggantikan direktif struktural lama dan tidak memerlukan impor.
Blok if
Blok at-if merender konten secara kondisional. Anda menulis simbol at diikuti kata if, kondisi dalam tanda kurung, dan konten dalam kurung kurawal.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Menggantikan ngIf
Ini menggantikan direktif struktural lama *ngIf. Sintaks baru ini merupakan bagian dari bahasa template, sehingga tidak ada yang perlu diimpor.
Membaca Signal dalam Kondisi
Kondisinya dapat berupa expression apa pun, termasuk pemanggilan signal.
// @if (count() > 0) {
// <p>You have items</p>
// }Blok else
Blok at-else menyediakan konten cadangan ketika kondisi bernilai false. Blok ini langsung mengikuti kurung kurawal penutup blok if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }Rangkaian else if
Anda dapat merangkai kondisi menggunakan at-else if, lalu menambahkan at-else terakhir.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Menyimpan Hasil Kondisi
Blok at-if dapat mengikat hasil kondisi ke variabel lokal dengan kata kunci as, yang berguna untuk penyempitan nilai non-null.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Alasan Menggunakan Sintaks Baru
Alur kontrol bawaan lebih mudah dibaca, diperiksa tipenya, dan efisien daripada direktif struktural. Alur ini menghindari mikrosintaks dan tanda bintang pada direktif lama.
Tidak Memerlukan Elemen Kontainer
Berbeda dari pola lama, blok at-if tidak memerlukan elemen pembungkus atau ng-template. Kurung kurawal itu sendiri membatasi konten kondisional.
Menyarangkan Blok
Blok alur kontrol dapat disarangkan dengan bebas. at-if dapat berisi at-if lain, at-for, dan seterusnya.
Menggabungkan dengan Binding
Di dalam blok at-if, Anda dapat menggunakan bahasa template lengkap: interpolasi, binding properti, dan binding peristiwa semuanya berfungsi seperti biasa.
Pemeriksaan Cepat: Kondisional
Sintaks kondisional baru.
Ringkasan: Kondisional
Anda telah mempelajari blok at-if untuk rendering kondisional, dengan at-else dan at-else if sebagai alternatif, serta kata kunci as untuk menangkap hasilnya. Blok ini menggantikan star-ngIf dan tidak memerlukan impor. Berikutnya: pengulangan dengan at-for.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Rendering Kondisional dengan @if” gratis?
Ya — teks lengkap “Rendering Kondisional dengan @if” 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 “Rendering Kondisional dengan @if”?
Tampilkan konten berdasarkan kondisi dengan @if dan @else. 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 1 dari 4.
Berapa lama pelajaran “Rendering Kondisional dengan @if” 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
- Rendering Kondisional dengan @if
- Perulangan dengan @for
- Pemilihan dengan @switch
- Pemuatan Tertunda dengan @defer