Belajar dan mengenal Fitur Angular Signals

Mengenal Apa itu Angular Signal

Angular signal sebenarnya adalah sebuah wrapper data / value yang akan memberitahukan perubahan value tersebut kepada kita.

Jadi aplikasi angular tidak harus mendeteksi setiap perubahan lagi selayaknya data binding sebelumnya, kita yang memutuskan kapan data tersebut berubah. Meskipun kita bisa menggunakan sebagai two way data binding, tapi secara tujuan utama adalah meringankan kerja angular dan mempermudah developer untuk memutuskan bagaimana data tersebut digunakan.

Dengan kata lagin, kita sebagai developer bisa memanggil data yang berubah, memodifikasi dan juga mengatur data atau value.

Signal dikelompokkan menjadi dua jenis, writable dan read-only.

Bagaimana cara menggunakan angular signal?

Jika dulu kita mensetup variable / model di angular sama dengan bagaimana kita mendeklarasi variable, maka di signal kita seperti mendeklarasikan function. Mirip dengan yang ada di Vue 3.

Contohnya adalah seperti ini.

Dulunya seperti ini:

multiply:number = 0;

menjadi seperti ini jika menggunakan signal:

multiply = signal<number>(0);

Ada banyak jenis signal selain signal ini sendiri, contohnya adalah input(), output(), computed(), effect(). Kita akan coba bahas ini di bab selanjutnya.

Contoh Writable Angular Signal

Contoh signal() di atas adalah contoh dari tipe writable signal, kita bisa mendeklarasikan signal, membaca value signal, mengganti value dari signal dan juga mengupdate value dari signal. Bagaimana caranya?

Membaca signal

Untuk membaca signal kita bisa langsung memanggil dalam bentuk getter function.

Kita memanggilnya menggunakan getter function, hal ini berlaku untuk pemanggilan signal di template komponen.

Contohnya adalah :

multiply()

angka()

Menuliskan data / value ke signal

Terus bagaimana cara menuliskan data baru ke signal?

Kita tinggal menggunakan function set() ke signal tersebut. Parameter yang diminta adalah value baru dari signal.

Contohnya adalah :

multiply.set(5);

Maka data yang tadinya 0 menjadi 5.

Mengupdate data / value ke signal

Untuk mengupdate data kita menggunakan function update, jadi kita akan mendapatkan callback value sebelumnya yang bisa kita modifikasi.

Contohnya adalah :

multiply.update((value:number) => value * 2);

Yang tadinya berisi 5 menjadi 10.

Apakah angular memiliki signal.mutate()?

Pada saat developer preview, angular memperkenalkan mutate function untuk mengubah atau memodifikasi value dalam bentuk object. Tapi pada akhirnya tim angular menghilangkan mutate dan tetap mempertahankankan update.

Computed Signal

Computed signal adalah jenis signal yang readonly, tidak bisa dituliskan data ke signal tersebut.

Di dokumentasi angular 18, saya memahaminya sebagai berikut