Angular

Signals: Reaktivitas Modern Angular

Penjelasan

Signal adalah sistem reaktivitas modern Angular (diperkenalkan penuh di Angular 17+, mirip konsepnya ref() di Vue) — nilai dibungkus signal(nilaiAwal), dibaca dengan memanggilnya sebagai fungsi signalNya(), dan diubah lewat method .set() atau .update(). Signal membuat Angular tahu PERSIS bagian mana yang perlu diperbarui, tanpa bergantung pada Zone.js seperti pola lama.

Contoh Konsep

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

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <p>Jumlah: {{ jumlah() }}</p>
        <button (click)="tambah()">Tambah</button>
    `,
})
export class CounterComponent {
    jumlah = signal(0);

    tambah() {
        this.jumlah.update((nilai) => nilai + 1); // atau: this.jumlah.set(this.jumlah() + 1)
    }
}

Praktikum

Buat component dengan signal nyala (boolean, awalnya false). Buat method toggle() yang membalik nilainya lewat .update(). Tampilkan teks "Lampu Nyala" atau "Lampu Mati" di template sesuai signal itu.

Editor Latihan

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

Tips

Signal HARUS DIPANGGIL sebagai fungsi untuk dibaca nilainya (jumlah(), dengan tanda kurung) — di template maupun di TypeScript, BEDA dengan ref() Vue yang di template otomatis "terbuka" tanpa perlu ekstra syntax. Lupa tanda kurung adalah kesalahan paling umum pemula Signals.

← Kembali Services & Dependency Injection Lanjutkan → Computed Signals