Gestión de Carrito de Compras en Angular con ngOnChanges

¿Cómo funciona la arquitectura actual de componentes en Angular?

Para dominar Angular, es fundamental entender cómo los componentes se comunican entre sí. En este caso, la arquitectura consta de tres nodos base, con ListComponent funcionando como un nodo maestro. Este nodo maestro gestiona la comunicación entre componentes a través de inputs y outputs.

1. Renderización de múltiples productos: ListComponent usa ng-for para renderizar múltiples productos.
2. Comunicación entre componentes:
   • Cada vez que un usuario añade un producto al carrito, ProductComponent envía una notificación a ListComponent por medio de un output.
   • ListComponent no solo mantiene una referencia de los productos en el carrito, sino que además notifica a HeaderComponent de los cambios por medio de un input.
   • HeaderComponent actualiza el carrito de compras en el side menu de la aplicación.

Este flujo asegura una interacción reactiva y eficiente entre los componentes. Un reto adicional ha sido mejorar el aspecto visual y calcular el total de la lista del carrito.

¿Cómo mejorar el aspecto visual y cálculo del total?

Para una mejor presentación visual, se usaron mejoras sencillas utilizando flex para organizar la imagen, título y precio del producto en un formato más ordenado y claro. Sin embargo, el objetivo final importante es mostrar el total de los productos en el carrito. Esto se puede lograr siguiendo estos pasos:

¿Cómo calcular el total de los productos?

Proponiendo un método dentro de HeaderComponent llamado CalcularTotal, se logra acumular el precio de todos los productos en el carrito. Una forma eficiente de hacerlo es usando el método reduce en JavaScript.

calcularTotal() {
  return this.carrito.reduce((total, producto) => total + producto.price, 0);
}

• Acumulador: Inicializado en cero y actualizándose con el precio de cada producto.
• Retorno del total: Este método devuelve directamente el total acumulado.

¿Por qué evitar funciones en el template?

Aunque string interpolation en Angular permite llamar funciones directamente en el template, hacerlo puede afectar el rendimiento de la aplicación, a menos que la función sea un signAll. Para evitar problemas de rendimiento:

1. Mantener los datos procesados en el template: Ya preprocesados para evitar ejecución directa.
2. Uso de señales o computed signals: Aunque card no es una señal y no se puede usar directamente como computed, es importante gestionar cómo se recalcula el total con nuevos datos.

¿Cuál es una solución más eficiente?

Adoptar prácticas recomendadas usando ngOnChanges para recalcular el total cuando hay cambios en el input:

1. Crear una variable total como señal:

total = signAll(0);

2. Uso de ngOnChanges: Verifica cambios en el input.

ngOnChanges(changes: SimpleChanges) {
  if (changes.carrito) {
    this.total.set(this.calcularTotal());
  }
}

• Propagación: Cada cambio en carrito recalcula el total.
• Mejor rendimiento: Sin ejecutar funciones en el template directamente, quedando optimizado mediante señales.

Con este enfoque, Angular optimiza la interacción de componentes y mejora el rendimiento al evitar funciones directas dentro del template. Además, fomentar estas prácticas avanzadas asegura un código limpio, eficiente y escalable. Recuerda que la programación es un mundo vasto y siempre hay nuevas técnicas y estrategias por aprender. ¡Sigue explorando y ampliando tus habilidades!