Calculando el total con ngOnChanges

La preocupación presentada en el curso es válida. Llamar a funciones directamente desde el template en Angular puede ser una mala práctica si esas funciones realizan cálculos o procesamientos pesados y son llamadas frecuentemente, como cada vez que se ejecuta la detección de cambios de Angular. Esto puede llevar a problemas de rendimiento, especialmente si la función se encuentra en una parte del template que se actualiza con mucha frecuencia. En el código que has compartido, se está utilizando el `ngOnChanges` lifecycle hook para actualizar el valor de `total` cuando cambia el `cart`. Este enfoque es una buena práctica porque `ngOnChanges` se llama solo cuando el valor de una propiedad `@Input()` cambia, lo que significa que `calcTotal()` no se ejecutará en cada ciclo de detección de cambios, sino solo cuando sea necesario. El uso de `ngOnChanges` es una forma de asegurarse de que los cálculos solo se realicen cuando los datos relevantes se actualicen, en lugar de hacerlo cada vez que se detectan cambios, lo que podría ser mucho más frecuente. Para explicar el código que has subido: * `ngOnChanges` es un hook del ciclo de vida de un componente Angular que se activa cuando Angular establece o restablece los datos de propiedades vinculadas a datos. Específicamente, se llama antes de `ngOnInit()` y cada vez que hay cambios en las propiedades de `@Input()` del componente. * `calcTotal()` es un método en tu componente que calcula la suma total de los precios en el carrito. * `this.total.set(this.calcTotal())` actualiza el valor de `total` usando el método `set` de una señal reactiva (probablemente parte de una biblioteca de manejo de estado que estás utilizando). En resumen, estás siguiendo una buena práctica al calcular el total en `ngOnChanges`, ya que esto asegura que la suma solo se recalcula cuando es necesario, y no en cada ciclo de detección de cambios que podría afectar al rendimiento. Esto se alinea con las prácticas recomendadas en Angular para evitar realizar trabajos innecesarios en el template y en los hooks del ciclo de vida.

Estaría bueno que se explicara más a profundidad por qué ejecutar funciones en el template trae concecuencias negativas en el redimiento de la aplicación.

Así voy: ![]()

Esta es la solución que plateo, no se si esta bien jeje  Y aca el resultado:  Cualquier sugerencia será muy bien recibida jeje

En el caso de que hayas colocado el header en el AppComponent. el diagrama crece aún más pero es lo ideal. Creo yo que debió colocarse allí desde el inicio para asegurar la escalabilidad

Algo que haría para evitar el ngOnChanges, es el `SetInput` <https://dev.to/mezagini/setinput-5gjj> ```js @Input() set changeProduct(cart: Product[]) { this.cart = cart; } ````@Input()` ` set changePerson(newPerson: Person) {` ` this.person = newPerson;` ` }`

Utilice estos estilos y la conversion a moneda de price y total, por si alguien lo necesita ``` \ \ \