July 13 blog

what is signals in Angular?

https://angular.dev/guide/signals

reading the documentation may like many, but i will not say
that but angular documentation changes my

perspective

we can use many values in signals from primitives to complex
data structures

angular signal is two types

we can use it only for reading the values this type
does not allows us to change the values
and another type is can we can do read and write

signals was either writable or read-only

how to use the signal in the angular

for using signal we have to import in the angular component

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

const count = signal(0);

using them in the javascript

count()

using them in the template

count()

we have two way to change the value signal they are

set() and update()

this two are function we are getting

form the signal

count.set(3);

count.update((value) => value + 1);

changing the values using the angular event binding

// in template
<button (click)="incrementCount()">+1</button>


// in typescript 
count = signal(0);

incrementCount() {
  this.count.update(val => val + 1);
}

we actually saw that signal has read only and writable

now how to convert the writable signal to read only signal

by using asReadonly() function can make a signal

to read only signal, this function actually takes a copy of the
signal and make it as read only values having signal

Computed signals

it is actually read only signal it actually derives its

value from other signals.

suppose if you like to deside the value type for the

signal we can do it by the WritableSignal

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

const count: WritableSignal<number> = signal(0); 

suppose if you want to use the type for read only signal
we can use the Signal type

const doubleCount: Signal = computed(() => count() * 2);

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

const price = signal(10);

const doublePrice = computed(() => price() * 2);

we know that computed value is read only, and it actually derived

value form the other signal that means if we change the value of

the original signal does that affects the computed signal, yes

actually yes whenever if you change the signal it affects the

computed signal and so it is lazily evaluated.

Note it actually depends the signal value but it does not depends

value of the signal it actually expects the signal changes

effect signal

if you want to track an value and based on the value if you want

to do any action you can use the effect,

if you use any values inside the effect it will be automatically

becomes the dependencies, if you use any signal inside effect. if the

signal changes effect will automatically starts runs

effect(() => {
  console.log(`User set to ${currentUser()} and the counter is ${counter()}`);
});

it is an example form the angular

suppose if you are using the eventlistner, setInterval and setTimeout.

effect((onCleanup) => {
  const timer = setInterval(() => {
    console.log('Tick...');
  }, 1000);

  onCleanup(() => clearInterval(timer)); 
});