Menghitung Total Keranjang dengan Angular Signals dan computed

Saat jumlah barang berubah, subtotal harus ikut berubah. Menyimpan jumlah dan subtotal sebagai dua state terpisah mudah menimbulkan ketidaksesuaian. Simpan data sumber, lalu turunkan subtotal dari data tersebut.

Pada contoh ini harga menggunakan rupiah bulat dan jumlah awal satu. computed membaca signal jumlah sehingga subtotal mengikuti perubahan. Tidak diperlukan subscription manual atau effect yang menulis ulang nilai subtotal.

Contoh implementasi

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

@Component({
  selector: 'app-cart-counter',
  standalone: true,
  template: `
    <p>Quantity: {{ quantity() }}</p>
    <button (click)="decrease()" [disabled]="quantity() <= 1">−</button>
    <button (click)="increase()">+</button>
    <p>Total: Rp {{ total() }}</p>
  `,
})
export class CartCounter {
  readonly price = 25000;
  quantity = signal(1);
  total = computed(() => this.price * this.quantity());

  increase(): void {
    this.quantity.update(value => value + 1);
  }

  decrease(): void {
    this.quantity.update(value => Math.max(1, value - 1));
  }
}

Cara memeriksa

Nilai awal total adalah 25000. Setelah menekan tombol tambah dua kali, jumlah menjadi 3 dan total 75000. Tombol kurang berhenti pada jumlah 1. Batas juga diterapkan di metode, bukan hanya pada status tombol.

Jika harga berasal dari API dan dapat berubah, ubah harga menjadi signal lalu baca price() dalam computed. Jangan mengubah objek di dalam signal secara langsung tanpa pembaruan signal.

Batas contoh

Perhitungan ini hanya untuk tampilan. Server tetap harus menghitung ulang harga dan total ketika pesanan dibuat. Nilai dari browser tidak boleh menjadi sumber harga final.

Referensi

Dokumentasi resmi