1) Signals vs RxJS: Crear una variable Signal desde cero en Angular 16 y compararla con un Observable.

Con un ejemplo donde tenemos un menú de barra lateral y un menú superior, cada vez que presionamos un botón, el menú superior le indicará al menú de la barra lateral que se colapse:

Con RxJS:

Esta comunicación se realiza en un servicio utilizando un sujeto y un observable, donde cada vez que hacemos clic en el botón, se llama a un siguiente, que pasa el valor emitido al observable suscrito. El componente del menú de la barra lateral simplemente estará suscrito y utilizará esta propiedad en el HTML. Primero, creamos el Asunto en el servicio, luego creamos el observable a partir de él y llamamos a continuación para pasar el valor emitido:

Con señales:

Esto se puede hacer simplemente con Signals. Las señales se crearon en Angular para lograr un mejor rendimiento en ciertos casos más simples. Se importan de @angular/core.

Debes declarar una señal, y cada vez que actualizamos esa señal, llamamos a configurarla. En el componente del menú de la barra lateral, solo tenemos que hacer referencia a esa propiedad y, para usar la señal en HTML, debemos ponerla entre paréntesis para obtener su valor, ya que así es como se usan las señales.

También podemos realizar una actualización, que tiene el beneficio adicional de decirnos el valor anterior. Para ello especificamos que reciba el valor anterior y su tipo, y con una función de flecha le indicamos el nuevo valor, que es el nuevo valor negado:

También hay formas de convertir observables en señales y señales en observables:

No es que las señales reemplacen a los sujetos, ya que ambas, junto con los observables, son mucho más poderosas y tienen muchas más características, como los operadores RxJS (tenemos mucho más control con RxJS). Sin embargo, las señales proporcionan una forma sencilla de trabajar y son comunes con otras bibliotecas y marcos.

RxJS es una biblioteca de Microsoft, no Angular. Por el contrario, Signals es una biblioteca de Angular, que proporciona mayor control y rendimiento, ya que permite a Angular saber exactamente qué parte ha cambiado cuando cambia un estado. Esto evita tener que volver a renderizar todo el componente, centrándose solo en esa parte específica.

2) Nueva forma simplificada de cancelar la suscripción con takeUntilDestroyed desde RxJS en Angular 16.

En Angular, es importante cancelar la suscripción a los observables. Por ejemplo, en OnInit almacenamos una suscripción y en OnDestroy cancelamos la suscripción.

La forma antigua era almacenar una variable con la suscripción, y al momento de suscribirse, guardarla en esa variable y destruir esa suscripción en OnDestroy:

Explicación detallada: Se crea una propiedad de tipo Suscripción (de RxJS). Esta propiedad se inicializa en ngOnInit, asignándole la referencia de la suscripción cuando se realiza. Luego, en ngOnDestroy, se cancela la suscripción. Si el componente no tiene definida la variable de suscripción, es necesario manejar el error, ya sea usando un signo de interrogación para verificar si está definida o mediante un condicional.

Ahora, esto se puede hacer de forma más sencilla, sin crear OnDestroy o una variable de suscripción, utilizando el operador RxJS takeUntilDestroyed. Esto lo que hace es cancelar automáticamente la suscripción cuando el componente está a punto de ser destruido. Es importante inyectar el servicio DestroyRef y pasarlo, para que sepa cuándo se destruye el componente:

Explicación detallada: Ahora, en el caso de que no nos demos de baja, agregamos una canalización RxJS y le enviamos un takeUntilDestroyed(), un operador NUEVO, que requiere que pasemos una referencia destruida, que es un servicio (de @angular /core) que podemos inyectar en el constructor.

Ejemplo: en un servicio de barra lateral, escucha el clic de un botón en el componente de la barra de navegación. Con takeUntilDestroyed(), se da de baja solo cuando se destruye el componente, evitando suscripciones múltiples. En este caso siempre queremos escuchar si el botón ha sido presionado o no; por lo tanto, solo queremos cancelar la suscripción si el componente se destruye.

Es importante hacer esto, ya que de lo contrario, estará escuchando incluso si estamos en otros componentes, y solo cancelará la suscripción si cerramos la aplicación ya que el componente está destruido. Esto es crucial porque si siempre está activo, al navegar por los componentes de la página, por ejemplo, en la primera navegación se suscribe, luego navegamos a otra página, y cuando volvemos a la primera página, sería una segunda suscripción, resultando en dos suscripciones activas. Por ello, es importante darse de baja.

Nota importante: cuando nos suscribimos a una solicitud HTTP, no es necesario cancelar la suscripción, ya que esto se hace automáticamente.

3) Efecto de una Señal en Angular. Escuchando cambios en una señal.

En un ejemplo, tenemos una señal que devuelve un valor booleano y, en el método siguiente, se actualiza con una actualización:

Imagina que quieres recibir una alerta cada vez que cambia la señal, pero cambia desde muchos lugares, no solo desde este método. Si queremos hacer algo cada vez que cambia, podemos hacerlo con un efecto. Esta función toma una señal y verifica si cambia para ejecutar automáticamente el método dentro del efecto:

Con esto, por ejemplo, en lugar de un registro de consola, podemos guardar el valor en el almacenamiento local y crear una instancia con ese valor. Esto es especialmente útil cuando trabajamos con código que no conocemos y no estamos seguros de desde cuántos lugares se modifica.

— Notas basadas en el curso Angular de EfisioDev —