Angular

Conditional Rendering: @if

Penjelasan

Angular versi modern (17+) memperkenalkan control flow syntax baru langsung di template, menggantikan directive *ngIf lama: @if (kondisi) { ... } @else { ... } — sintaksnya lebih mirip JavaScript biasa dan lebih cepat performanya dibanding *ngIf lama.

Contoh Konsep

import { Component } from '@angular/core';

@Component({
    selector: 'app-status',
    standalone: true,
    template: `
        @if (sudahBayar) {
            <p>Pesanan sudah dibayar</p>
        } @else {
            <p>Menunggu pembayaran</p>
        }
    `,
})
export class StatusComponent {
    sudahBayar = false;
}

Praktikum

Buat component dengan properti stok (number). Pakai @if/@else untuk menampilkan "Tersedia" atau "Habis" sesuai nilai stok (>0 atau tidak).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau kamu menemukan tutorial/kode Angular lama yang memakai *ngIf="kondisi", itu syntax LAMA (masih didukung tapi tidak direkomendasikan lagi untuk project baru) — @if adalah penggantinya yang resmi sejak Angular 17, pelajari yang baru untuk project baru.

← Kembali Two-way Binding dengan ngModel Lanjutkan → List Rendering: @for