Angular 17: Signals (Part 1)

Angular 17: Signals (Part 1) — Signals Basics

AI Generated image by https://ideogram.ai/

Hi everyone!
This article talk about the basics of Angular 17 Signals. Such as, What are signals, writable signals, getting signal value and computed signals.

What are Signals?

A signal is like a special box that holds a value and can tell others when this value changes. A signal can hold any type of value, from complex objects to primitives.
Angular tracks the usage of signals by reading their values through a getter function.

Signals vs Observables?

• Signals trigger updates to the view directly, without the need of async pipe. This makes the app faster and the code simpler.
• Signals are built to work smoothly without causing unexpected behaviors.
• Signals let you access the same data repeatedly without slowing down your app, and always give you consistent results.
• Resources are automatically cleaned up. Moreover, it provides a suitable way for releasing resources that were created by calling setInterval or setTimeout.

Writable signals

Create a writable signals is doing by calling the signal function with an initial value. Writable signal’s value can be update directly.
Code example (inside component.ts file):

// Creates signal with 170 as initial value
height = signal<number>(170);

exampleFunction1() {
  // Set 160 as new value
  this.height.set(160);
  
  // Increase signal's value by 4
  this.height.update(value => value + 4);
}

Getting signal value:

Getting the value of a signal of any kind is always the same. It’s done by invoking the signal as if it were a function.
Code example (inside component.ts file):

exampleFunction2() {
  // Getting the height's value
  const height = this.height();
}

Code example (inside component.html file):

<div>Height: {{height()}}</div>

Computed (read-only) signals

A computed signal is a read-only signal which his value derived from other signals. Create a computed signals is doing by calling the computed function with an computing function.
Note: computed is not writable. You cannot directly assign value to it.

Code example (inside component.ts file):

// Creates signal with 170 as initial value
height = signal<number>(170);

// Creates signal with 65 as initial value
weight = signal<number>(65);

// Creates computed signal which is value derived from height and weight:
bmi = computed(() => this.height() / Math.pow(this.weight(), 2));

Angular understands that bmi value depends on height and weight, and needs to be updated whenever the value of either of them changes.
The computing function of bmi’s does not run until the first time bmi is read.
When the computing function called, its calculated value is cached, and future reads of bmi will return the cached value without re-running the function.
When the height or weight changes, the cached value of bmi is marked has no longer valid, and the new value will be recalculated only on the next read of bmi.
Note: It’s ok to perform expensive operation inside a computed signal.

What next?

I will talk about input signals, output signals, model signals, effects, integration with rxjs (Observables) using rxjs-interop package, and creating custom signals.

Goodbye everyone!

You can find this article and others on my LinkedIn profile:
https://www.linkedin.com/in/shachar-ovadya/