Conversión de Observables a Signals en Angular con toSignal

Contenido del curso

Configuración Inicial

Gestión de Entornos

Nuevas Funcionalidades en Angular

Server-Side Rendering (SSR) y Navegación

Optimización de Rendimiento

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:07

Conversión de Observables a Signals en Angular con toSignal

Curso de Angular Avanzado

Clase 16 de 36

Clase 16 / 36

Comentarios (2)2 comentarios

Kevin Fiorentino

Hace un año

Algo que personalmente no me gusta. En este caso, el endpoint al que le pega this.categoryService.getAll() devuelve directamente un array de categorías. No me gusta esto, un buen endpoint tendría que devolver un objeto con una propiedad categories con el array, y tal vez un total para construir un paginador. Tendría que tener más lógica y no poder setear directamente el signal con la respuesta de la API.

Daniel Felipe Torres Vanegas

Hace 8 meses

Excelente punto. Precisamente por mi experiencia en ambos lados (Front y Back), trato de implementar los getAll() con soporte opcional para paginación vía query params. Esto permite que sea flexible según la necesidad del componente:

Si el componente requiere control total (ej. una tabla): GET /categories?page=1&limit=10 ➡️ Response: { data: [...], total: 400 }
Si es para un uso simple (ej. un dropdown): GET /categories ➡️ Response: [ ... ] (array directo)

Así evitamos complicar el Front con lógica innecesaria en casos simples, pero mantenemos la robustez para escenarios complejos.

Kevin Fiorentino

Hace 8 meses

Me encanta! Contratado, Daniel!

Pablo Conejos Chirivella

Hace 2 años

¿Que diferencia hay entre importar el servicio con inject y declararlo en el constructor?

Emilio Nicolás Mendoza Patti

Hace 2 años

si no me equivoco inject es la nueva manera de hacer inyecccion de dependencias que tiene angular, recuerdo que cuando trabaje en la v14 lo unica forma era declararlo en el constructor.

Miguel Angel Coy Triana

Hace un año

La principal ventaja aparte de disminuir el boilerplate es poder usar inject y por ende la inyección de dependencias por fuera de las clases, por ejemplo, en funciones que pueden ser usadas como factories o funciones reutilizables (composables).

export function useErrorHandler() {

const notifier = inject(NotificationService);

return (error: any) => {

notifier.showError('Ocurrió un error: ' + error.message);

};

}

Recursos

La integración de RxJS con Angular Signals representa un avance significativo en el manejo de datos reactivos en aplicaciones Angular. Esta combinación permite aprovechar lo mejor de ambos mundos: la potencia de los observables de RxJS y la simplicidad y rendimiento de las signals. Veamos cómo implementar esta integración de manera efectiva en proyectos reales.

¿Cómo convertir observables a signals con toSignal?

La función toSignal nos permite transformar observables de RxJS en signals de Angular, simplificando enormemente nuestro código. Esta función es especialmente útil cuando trabajamos con servicios que utilizan HttpClient, ya que estos generalmente devuelven observables.

Para implementar esta conversión, necesitamos seguir estos pasos:

Importar la función toSignal desde @angular/core.
Aplicar esta función al observable que queremos convertir.
Proporcionar un valor inicial si el observable no tiene uno.

Veamos un ejemplo práctico:

// Antes
export class ListProductComponent implements OnInit {
  private productService = inject(ProductService);
  
  categories = signal<Category[]>([]);
  
  ngOnInit() {
    this.productService.getAll().subscribe(categories => {
      this.categories.set(categories);
    });
  }
}

// Después
export class ListProductComponent {
  private productService = inject(ProductService);
  
  categories = toSignal(this.productService.getAll(), { initialValue: [] });
}

Como podemos observar, el código se reduce significativamente. Ya no necesitamos:

Implementar la interfaz OnInit
Definir el método ngOnInit()
Manejar manualmente la suscripción
Llamar al método set() del signal

Todo esto lo hace automáticamente toSignal, lo que resulta en un código más limpio y declarativo.

¿Cuándo usar el valor inicial en toSignal?

Es importante proporcionar un valor inicial cuando trabajamos con observables que no emiten inmediatamente, como es el caso de las peticiones HTTP. En nuestro ejemplo, utilizamos un array vacío como valor inicial:

categories = toSignal(this.productService.getAll(), { initialValue: [] });

Este valor se utilizará mientras se resuelve la petición HTTP, evitando errores de renderizado cuando intentamos acceder a propiedades de un valor que aún no existe.

Limitaciones al usar toSignal

Aunque toSignal simplifica enormemente nuestro código, presenta algunas limitaciones importantes que debemos considerar:

No se puede modificar manualmente el valor

Una restricción significativa es que no podemos usar el método set() en un signal creado con toSignal. Por ejemplo:

// Esto NO funcionará
categories = toSignal(this.productService.getAll(), { initialValue: [] });
categories.set([]); // Error: Property 'set' does not exist

Esto puede ser problemático si necesitamos reiniciar o modificar manualmente el valor del signal en algún momento.

Falta de estados derivados

Otra limitación es que toSignal no proporciona estados derivados como "loading" o "error". Si necesitamos estos estados, tendríamos que crear signals adicionales:

loadingProducts = signal(false);

ngOnInit() {
  this.loadingProducts.set(true);
  this.productService.getAll().subscribe({
    next: (products) => {
      this.products.set(products);
      this.loadingProducts.set(false);
    },
    error: () => this.loadingProducts.set(false)
  });
}

Esto puede llevar a un código más verboso y difícil de mantener, especialmente cuando tenemos múltiples peticiones HTTP.

Buenas prácticas al trabajar con toSignal

Para aprovechar al máximo esta función, considera las siguientes recomendaciones:

Mantén el orden correcto de las inyecciones: Coloca siempre las inyecciones de dependencias al principio de la clase, antes de declarar los signals.

export class ListProductComponent {
  private productService = inject(ProductService); // Primero las inyecciones
  
  categories = toSignal(this.productService.getAll(), { initialValue: [] }); // Luego los signals
}

Proporciona siempre un valor inicial adecuado: Elige un valor inicial que sea compatible con la estructura de datos esperada para evitar errores en el template.
Considera las limitaciones: Si necesitas modificar manualmente el valor o manejar estados como loading o error, evalúa si toSignal es la mejor opción o si deberías usar un enfoque más tradicional.

La función toSignal representa un puente elegante entre el mundo de RxJS y las nuevas signals de Angular, permitiéndonos aprovechar la infraestructura existente basada en observables mientras adoptamos el nuevo paradigma de signals. Sin embargo, es importante entender sus limitaciones para decidir cuándo utilizarla.

En la próxima clase, exploraremos soluciones a estas limitaciones para crear una experiencia más completa al trabajar con datos asincrónicos en Angular.

¿Has experimentado con la conversión de observables a signals en tus proyectos? Comparte tus experiencias en los comentarios.

Resumen

¿Cómo convertir observables a signals con toSignal?

Para implementar esta conversión, necesitamos seguir estos pasos:

Importar la función toSignal desde @angular/core.
Aplicar esta función al observable que queremos convertir.
Proporcionar un valor inicial si el observable no tiene uno.

Veamos un ejemplo práctico:

// Antes
export class ListProductComponent implements OnInit {
  private productService = inject(ProductService);
  
  categories = signal<Category[]>([]);
  
  ngOnInit() {
    this.productService.getAll().subscribe(categories => {
      this.categories.set(categories);
    });
  }
}

// Después
export class ListProductComponent {
  private productService = inject(ProductService);
  
  categories = toSignal(this.productService.getAll(), { initialValue: [] });
}

Como podemos observar, el código se reduce significativamente. Ya no necesitamos:

Implementar la interfaz OnInit
Definir el método ngOnInit()
Manejar manualmente la suscripción
Llamar al método set() del signal

Todo esto lo hace automáticamente toSignal, lo que resulta en un código más limpio y declarativo.

¿Cuándo usar el valor inicial en toSignal?

categories = toSignal(this.productService.getAll(), { initialValue: [] });

Este valor se utilizará mientras se resuelve la petición HTTP, evitando errores de renderizado cuando intentamos acceder a propiedades de un valor que aún no existe.

Limitaciones al usar toSignal

Aunque toSignal simplifica enormemente nuestro código, presenta algunas limitaciones importantes que debemos considerar:

No se puede modificar manualmente el valor

Una restricción significativa es que no podemos usar el método set() en un signal creado con toSignal. Por ejemplo:

// Esto NO funcionará
categories = toSignal(this.productService.getAll(), { initialValue: [] });
categories.set([]); // Error: Property 'set' does not exist

Esto puede ser problemático si necesitamos reiniciar o modificar manualmente el valor del signal en algún momento.

Falta de estados derivados

Otra limitación es que toSignal no proporciona estados derivados como "loading" o "error". Si necesitamos estos estados, tendríamos que crear signals adicionales:

loadingProducts = signal(false);

ngOnInit() {
  this.loadingProducts.set(true);
  this.productService.getAll().subscribe({
    next: (products) => {
      this.products.set(products);
      this.loadingProducts.set(false);
    },
    error: () => this.loadingProducts.set(false)
  });
}

Esto puede llevar a un código más verboso y difícil de mantener, especialmente cuando tenemos múltiples peticiones HTTP.

Buenas prácticas al trabajar con toSignal

Para aprovechar al máximo esta función, considera las siguientes recomendaciones:

Mantén el orden correcto de las inyecciones: Coloca siempre las inyecciones de dependencias al principio de la clase, antes de declarar los signals.

export class ListProductComponent {
  private productService = inject(ProductService); // Primero las inyecciones
  
  categories = toSignal(this.productService.getAll(), { initialValue: [] }); // Luego los signals
}

Proporciona siempre un valor inicial adecuado: Elige un valor inicial que sea compatible con la estructura de datos esperada para evitar errores en el template.
Considera las limitaciones: Si necesitas modificar manualmente el valor o manejar estados como loading o error, evalúa si toSignal es la mejor opción o si deberías usar un enfoque más tradicional.

En la próxima clase, exploraremos soluciones a estas limitaciones para crear una experiencia más completa al trabajar con datos asincrónicos en Angular.

¿Has experimentado con la conversión de observables a signals en tus proyectos? Comparte tus experiencias en los comentarios.

Configuración Inicial

Curso Avanzado de Desarrollo con Angular para eCommerce

Clona y explora el proyecto base de Angular

Configuración de ESLint y Prettier en proyectos Angular

Prettier y ESLint sin conflictos en Angular

Gestión de Entornos

Manejo de environments en Angular

Ambiente de staging en Angular paso a paso

Nuevas Funcionalidades en Angular

Variables locales con @let en Angular

Lazy loading de imágenes con ngSrc en Angular

URLs amigables para SEO en Angular

"Reactividad en Angular: Migración a Input Signals"

Migración automática de @Input a signals en Angular

Migración de Outputs en Angular: De Decoradores a Funciones

linkedSignal en Angular: computed con set

Sincronización de Componentes en Angular con Model y Signals

toSignal: Observables de RxJS como Signals

Conversión de Observables a Signals en Angular con toSignal

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers

Manejo de Parámetros Reactivos con RX Resource en Angular

Manejo de Promesas y Fetch en Angular sin RXJS

Reactividad en Angular: Uso de Signals para Consultas DOM

Configuración de Prettier para HTML en Angular

Server-Side Rendering (SSR) y Navegación

Migración al Application Builder de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO

afterNextRender: código seguro solo en el browser

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas

Pre-rendering en Angular con ng build

Desplegando Angular SSR en Firebase

Optimización de Rendimiento

Generación de Meta Tags Dinámicos con Angular y Open Graph

Creación de MetaTags Dinámicos en Angular

Proceso de Hydration y Event Replay en Angular

Productos relacionados con RxResource en Angular

Carga diferida de componentes en Angular para mejorar rendimiento

Optimización de Incremental Hydration en Angular

Configuración de Server Routing en Angular

Aplicaciones Sin Zone.js: Migración a Signals en Angular

Cierre del curso avanzado de Angular

Conversión de Observables a Signals en Angular con toSignal