Angular

Computed Signals

Penjelasan

computed() membuat SIGNAL TURUNAN dari signal lain — setara computed() di Vue. Hasilnya di-CACHE dan cuma dihitung ULANG saat salah satu signal dependency-nya benar-benar berubah, bukan setiap kali component dirender ulang.

Contoh Konsep

import { Component, signal, computed } from '@angular/core';

@Component({
    selector: 'app-keranjang',
    standalone: true,
    template: `
        <p>Total: Rp {{ total() }}</p>
        <button (click)="jumlah.set(jumlah() + 1)">Tambah Jumlah</button>
    `,
})
export class KeranjangComponent {
    harga = signal(100000);
    jumlah = signal(2);

    total = computed(() => this.harga() * this.jumlah()); // otomatis update kalau harga/jumlah berubah
}

Praktikum

Buat signal nilaiUjian (array angka, mis. [80, 90, 70]). Buat computed() bernama rataRata yang menghitung rata-rata isi array itu. Tampilkan rataRata() di template.

Editor Latihan

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

Tips

Sama seperti signal biasa, computed() juga WAJIB dipanggil sebagai fungsi untuk dibaca (rataRata(), bukan rataRata) — dan computed signal bersifat READ-ONLY, kamu tidak bisa memanggil .set() atau .update() padanya, nilainya SELALU mengikuti signal sumbernya.

← Kembali Signals: Reaktivitas Modern Angular Lanjutkan → Lifecycle Hooks: ngOnInit & ngOnDestroy