Conditional Rendering

Operator Ternary

Metode paling sederhana untuk conditional rendering dalam template HTML.

<template>
    <div>{isVisible ? 'Konten Terlihat' : 'Konten Tersembunyi'}</div>
</template>

Tag if:true dan if:false

LWC menyediakan direktif if:true dan if:false untuk mengendalikan rendering elemen.

<template>
    <div if:true={isVisible}>Konten ini akan muncul jika isVisible true</div>
    <div if:false={isVisible}>Konten ini akan muncul jika isVisible false</div>
</template>

Iterasi dengan Conditional Rendering

Menggabungkan iterasi dan conditional rendering menggunakan for:each dan if:true.

<template>
    <template for:each={items} for:item="item">
        <div key={item.id}>
            <template if:true={item.isActive}>
                {item.name} is active
            </template>
        </div>
    </template>
</template>

Getter untuk Logika Kompleks

Untuk logika kondisional yang lebih kompleks, gunakan getter di JavaScript.

export default class MyComponent extends LightningElement {
    @track data = { value: 5 };
    
    get isValueGreaterThanTen() {
        return this.data.value > 10;
    }
}

Kemudian di template:

<template>
    <div if:true={isValueGreaterThanTen}>Nilai lebih besar dari 10</div>
</template>

Menggunakan class binding untuk Conditional Styling

Menerapkan kelas CSS secara kondisional.

<template>
    <div class={computedClass}>Teks dengan warna dinamis</div>
</template>

export default class MyComponent extends LightningElement {
    @track isError = false;

    get computedClass() {
        return this.isError ? 'error-text' : 'normal-text';
    }
}

Tag lwc:if

lwc:if adalah direktif baru yang lebih efisien dan mudah dibaca untuk melakukan conditional rendering.

Dasar Penggunaan lwc:if

<template>
    <lwc:if condition={isVisible}>
        <div>Konten ini akan muncul jika isVisible bernilai true</div>
    </lwc:if>
</template>

import { LightningElement, api } from 'lwc';

export default class ConditionalExample extends LightningElement {
    @api isVisible = false;
}

Menggunakan lwc:elseif dan lwc:else

<template>
    <lwc:if condition={status === 'success'}>
        <div class="success">Operasi berhasil!</div>
    </lwc:if>
    <lwc:elseif condition={status === 'error'}>
        <div class="error">Terjadi kesalahan.</div>
    </lwc:elseif>
    <lwc:else>
        <div class="loading">Sedang memproses...</div>
    </lwc:else>
</template>

import { LightningElement, api } from 'lwc';
export default class StatusExample extends LightningElement {
    @api status = 'loading';
}

Nested lwc:if

<template>
    <lwc:if condition={isLoggedIn}>
        <div>Selamat datang, {userName}!</div>
        <lwc:if condition={hasPermission}>
            <button>Akses Fitur Khusus</button>
        </lwc:if>
    </lwc:if>
    <lwc:else>
        <div>Silakan login untuk melanjutkan.</div>
    </lwc:else>
</template>

import { LightningElement, api } from 'lwc';
export default class NestedConditionalExample extends LightningElement {
    @api isLoggedIn = false;
    @api userName = '';
    @api hasPermission = false;
}

Menggunakan lwc:if dengan Iterasi

<template>
    <ul>
        <template for:each={items} for:item="item">
            <li key={item.id}>
                {item.name}
                <lwc:if condition={item.isSpecial}>
                    <span class="special-badge">Special</span>
                </lwc:if>
            </li>
        </template>
    </ul>
</template>

import { LightningElement, track } from 'lwc';
export default class ItemListExample extends LightningElement {
    @track items = [
        { id: 1, name: 'Item 1', isSpecial: true },
        { id: 2, name: 'Item 2', isSpecial: false },
        { id: 3, name: 'Item 3', isSpecial: true }
    ];
}

Menggunakan Getter untuk Kondisi Kompleks

<template>
    <lwc:if condition={isEligibleForDiscount}>
        <div>Anda mendapatkan diskon 10%!</div>
    </lwc:if>
</template>

import { LightningElement, api } from 'lwc';
export default class DiscountExample extends LightningElement {
    @api customerType;
    @api purchaseAmount;
    get isEligibleForDiscount() {
        return (this.customerType === 'VIP' && this.purchaseAmount > 1000) ||
               (this.customerType === 'Regular' && this.purchaseAmount > 5000);
    }
}

Keuntungan Menggunakan lwc:if

1. Lebih Mudah Dibaca: Struktur lwc:if, lwc:elseif, dan lwc:else lebih mudah dibaca dibandingkan dengan nested if:true dan if:false.
2. Performa Lebih Baik: lwc:if dioptimalkan untuk performa yang lebih baik dalam merender dan memperbarui DOM.
3. Lebih Fleksibel: Memungkinkan penggunaan elseif yang tidak tersedia dalam sintaks if:true/if:false.
4. Konsistensi: Menyediakan cara yang konsisten untuk menangani kondisi tunggal dan multi-cabang.

Dengan menggunakan lwc:if, Anda dapat membuat komponen LWC yang lebih bersih, efisien, dan mudah dipelihara, terutama ketika berurusan dengan logika kondisional yang kompleks.