Signal dan Effect Angular

Angular telah mengubah cara ia mengendalikan reaktiviti. Anda tidak lagi memerlukan Zone.js untuk mengesan setiap perubahan kecil. Signal membolehkan Angular mengemas kini bahagian UI tertentu sahaja yang berubah. Ini menjadikan aplikasi anda lebih pantas dan membolehkan mod zoneless.

Apakah itu Signal?

Signal ialah bekas untuk nilai reaktif. Apabila nilai berubah, Angular tahu dengan tepat bahagian templat mana yang perlu dikemas kini.

  • signal(): Mencipta signal baharu. Gunakan .set() untuk menggantikan nilai atau .update() untuk mengubah nilai berdasarkan nilai semasa.
  • computed(): Mencipta signal baca-sahaja (read-only). Ia memperoleh nilainya daripada signal lain. Angular hanya mengira ini apabila anda membacanya dan menyimpan keputusan tersebut dalam cache.
  • effect(): Menjalankan kod apabila signal berubah. Gunakan ini untuk kesan sampingan (side effects) seperti log atau perubahan DOM secara manual.

Bilakah perlu menggunakan Signal berbanding RxJS

Anda tidak perlu memilih salah satu. Anda harus menggunakan kedua-duanya untuk tugasan yang berbeza.

Gunakan Signal untuk:

  • Menyimpan keadaan (state) UI.
  • Menggerakkan render templat.
  • Menggantikan @Input() dan @Output().
  • Bekerja dalam aplikasi zoneless.

Gunakan RxJS untuk:

  • Mengendalikan aliran (stream) asinkron seperti HTTP atau WebSockets.
  • Logik kompleks seperti debouncing atau menukar aliran.
  • Menggabungkan pelbagai urutan peristiwa (event sequences).

Anda boleh menghubungkan keduanya menggunakan rxjs-interop:

  • toSignal(): Menukar Observable kepada Signal.
  • toObservable(): Menukar Signal kepada Observable.

API Baharu Tanpa Decorator

Angular 17+ memperkenalkan cara baharu untuk mengendalikan aliran data tanpa menggunakan decorator.

  • input(): Signal baca-sahaja untuk data yang datang daripada induk (parent).
  • model(): Signal boleh-tulis (writable) untuk pengikatan dua hala (two-way binding). Ia menggantikan corak @Input() dan @Output() yang lama.
  • output(): Cara untuk mengeluarkan (emit) peristiwa daripada anak (child) kepada induk (parent). Ia bukan sebuah signal, tetapi ia memudahkan kod anda.

Mengapa ini lebih baik daripada React

Jika anda tahu React, konsepnya adalah serupa tetapi pelaksanaannya berbeza.

  • Penjejakan Automatik: Dalam React, anda mesti menyenaraikan kebergantungan (dependencies) dalam satu tatasusunan (array). Dalam Angular, sistem menjejak signal mana yang anda gunakan secara automatik. Anda tidak akan terlupa kebergantungan.
  • Kemas Kini Tepat: React sering melakukan render semula (re-render) keseluruhan komponen. Signal Angular hanya mengemas kini nod DOM tertentu yang bergantung pada nilai tersebut.
  • Tiada Stale Closures: Signal sentiasa menyediakan nilai semasa apabila anda memanggilnya.

Sumber: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn