Apakah Angular Signals?

Question

IT Interview Practice · Accepted Answer

**Signals** adalah primitif reaktif Angular (ditambahkan dalam Angular 16+) untuk mengelola status — pembungkus nilai yang **memberitahu konsumen saat berubah**, mengaktifkan pembaruan berbutir halus dan efisien tanpa bergantung pada deteksi perubahan Zone.js. ## Membuat dan menggunakan sinyal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## Membaca sinyal: panggilnya seperti fungsi ```html ``` Perhatikan bahwa sinyal dibaca dengan **memanggilnya** (`count()`), bukan sebagai properti biasa. Dalam template, Angular melacak dengan tepat sinyal mana yang dibaca tampilan, jadi hanya bagian yang terpengaruh yang diperbarui saat sinyal berubah. ## Tiga jenis sinyal ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` malas dan disimpan dalam cache (seperti computed Vue); `effect` menjalankan efek samping secara reaktif (seperti watcher). ## Mengapa sinyal penting: reaktivitas berbutir halus ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Sinyal memberikan Angular **pelacakan ketergantungan yang tepat** — ketika sinyal berubah, hanya tampilan dan computed yang benar-benar membacanya yang diperbarui. Ini lebih efisien daripada deteksi perubahan luas yang dipicu Zone.js, dan merupakan fondasi untuk menghapus Zone.js sepenuhnya (mode tanpa zona). ## Input berbasis sinyal (lebih baru) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Mengapa ini penting Sinyal adalah evolusi paling signifikan dalam reaktivitas Angular — model yang lebih sederhana, lebih eksplisit, dan jauh lebih efisien daripada deteksi perubahan implisit Zone.js. Mereka mengaktifkan pembaruan berbutir halus, mengurangi pemeriksaan yang tidak perlu, terintegrasi dengan rapi dengan computed/effect, dan membuka jalan menuju Angular zoneless. Memahami sinyal semakin penting, karena Angular mengarahkan pengembangan baru menuju sinyal sebagai primitif status default.

Membuat dan menggunakan sinyal

Membaca sinyal: panggilnya seperti fungsi

Tiga jenis sinyal

Mengapa sinyal penting: reaktivitas berbutir halus

Input berbasis sinyal (lebih baru)

Mengapa ini penting

Soalan berkaitan