Angular se pone en forma. Se├▒ales en Angular ­čů░

Publicado el 04.06.2023 a las 22:39

Angular se pone en forma. Se├▒ales en Angular ­čů░

  1. Jugando con se├▒ales en Angular

    • ┬┐Qu├ę es una se├▒al en Angular?

    • Declarar una se├▒al en Angular

    • Acceder a una se├▒al en Angular

    • Modificar una se├▒al con variable primitiva en Angular

    • Modificar una se├▒al con variable no primitiva en Angular

    • Operando con se├▒ales en Angular

  2. Los efectos en Angular

  3. Ventajas de Signas frente a RXJS en Angular

Logo de fjmduran

Angular se pone en forma. Se├▒ales en Angular ­čů░

Jugando con se├▒ales en Angular

┬┐Qu├ę es una se├▒al en Angular?

De forma muy simplificada, piensa en las señales como unas variables en memoria capaces de informar a los objetos que las están consumiendo cuando cambia su valor.


Cuando exista un cambio, se har├í s├│lo en la zona del componente donde se est├ę consumiendo la se├▒al que ha cambiado.


Esta caracter├şstica dotar├í a Angular de una mayor velocidad al no actualizar todo el ├írbol de componentes.


Hasta ahora, cuando hab├şa un cambio, Angular disparaba un ciclo de detecci├│n completo para actualizar todas las propiedades de las clases, se hubiera modificado su valor o no.


Angular va a tratar a las señales como variables primitivas por lo que no dependerá de una clase o de un componente de Angular.


Pero que Angular trate a las señales como variables primitivas no quiere decir que sólo puedas almacenar variables primitivas en una señal, podrás almacenar estructuras más complejas como arrays, objetos...


Angular usa some.js como librer├şa de bajo nivel para implementar la detecci├│n de cambios disparando el rendimiento la aplicaci├│n, pero ┬┐por qu├ę se dispara el rendimiento de la aplicaci├│n?.


Uno de los motivos es porque se eliminan algunas de las API de bajo nivel del navegador como el addEventListener.


Para usar actualmente las señales, tienes que usar Angular 16, pero ten en cuenta que las señales están en development previous, es decir, no se recomiendan para producción ya que la API puede cambiar bastante.

Declarar una se├▒al en Angular

Para declarar una señal se hará simplemente declarándola como una variable y especificando que es un señal usando la función signal() y asignando su primer valor.

Importarás signal desde @angular/core

//Fichero ts
import { Component, inject, signal } from '@angular/core';

public ladoCuadrado = signal<number>(15);

Es obligatorio darle un valor inicial a la se├▒al, igual que ocurre con los BehaviourSubject.


Tipar la se├▒al no es obligatorio, podr├şas haber declarado la se├▒al as├ş:

public ladoCuadrado = signal(15);

Acceder a una se├▒al en Angular

Para ver el valor de la señal en el HTML lo harás igual que si fuera cualquier otra propiedad, interpolando.

//Fichero HTML
<p>Lado del cuadrado: { { ladoCuadrado() } } </p>

Modificar una se├▒al con variable primitiva en Angular

Para modificar la señal que tiene una variable primitiva será tan fácil como hacer:

this.ladoCuadrado.set(50);

Modificar una se├▒al con variable no primitiva en Angular

Para modificar la se├▒al que no tiene una variable primitiva usaremos el m├ętodo mutate.


Imagina que queremos tener una señal de un objeto pedido que tendrá el campo de id y el campo de descripcion y que modificaremos posteriormente.


Lo har├şas as├ş ­čĹç

public myOrder = signal({id:0,descripcion:'Pedido iniciado'});
//Para modificar su valor usamos el m├ętodo mutate
this.myOrder.mutate((order)=>order.descripcion='Pedido procesado');

Si navegamos a la clase signal de @Angular/core veremos que el m├ętodo mutate espera una funci├│n.

Muestra el m├ętodo mutate de la clase signal de @Angular/core

Operando con se├▒ales en Angular

Si quisi├ęramos calcular el ├írea del cuadrado de lado ladoCuadrado crear├şamos una se├▒al computada (se├▒al de s├│lo lectura):

public area = computed(()=>this.ladoCuadrado()^2);

Los efectos en Angular

Los efectos son un mecanismo de disparar un c├│digo basado en algo.


Una de las ventajas de los efectos es que tiene una limpieza automática. Esto quiere decir que cuando se dejan de usar las señales de su interior el efecto se limpia de la memoria automáticamente, al contrario que con RXJS que tenemos que hacerlo manualmente.


Cuando alguna señal interna del efecto cambie se ejecturá dicho efecto.


Imagina que tenemos un buscado basado en una caja de texto, y cada vez que se pulse en un buscar se le har├í una petici├│n a un backend v├şa API.


Con el uso de las señales, sólo se le hará la petición al backend si el valor a buscar es diferente.


Si la se├▒al que usaremos como par├ímetro de b├║squeda fuera parametro_de_busqueda el c├│digo del efecto se ver├şa:

constructor(){
    effect(()=>{
        this.http.get(`url?${parametro_de_busqueda()}`)
}

Ventajas de se├▒ales frente a RXJS en Angular

  • Cada vez que se emita un nuevo valor, el observable emitir├í dicho valor aunque el valor sea el mismo. Esto no ocurre con las se├▒ales, si el valor de la se├▒al no cambia no se emite un nuevo valor.
  • Con RXJS tendr├ís que gestionar las subscripciones, bien usando el operador take(1) tomando el valor del observable para que se cancele la subscripci├│n justo despu├ęs de su lectura, o bien eliminando la subscripci├│n en otro punto, por ejemplo en el OnDestroy. Con las se├▒ales no tienes que gestionar nada.

    ­čÜę Si no gestionas esto de forma adecuada podr├şa provocar fugas de memoria en tu aplicaci├│n.


Hasta luego ­čľľ