Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

1 D铆as
4 Hrs
30 Min
9 Seg

Calculando el total con ngOnChanges

45/70
Recursos

Aportes 12

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Wooow hasta el momento el curso esta excelente. Me encanta que hayan mostrando ejemplos pr谩cticos con ngOnDestroy() ngViewAfterInit(), constructor(), ngOnInit() y ahora ngOnChanges, sin duda el curso esta de lo mejor 馃挌

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.
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;` ` }`
Hey les comparto una experiencia interesante de ngOnChange que nos puede evitar varios bugs en el futuro. Es su funcionamiento cuando usamos datos primitivos vs complejos en Javascript. Ver谩n... cuando utilizamos datos primitivos (strings, numeros, booleanos) que se **pasan por valor**, el funcionamiento es exactamente el que esperamos; cambiamos el valor en el componente padre y se dispara el ngOnChange hook en el componente hijo. Sin embargo, cuando pasamos datos complejos o no primitivos (functions, arrays, objects ) a trav茅s de un input y cambiamos sus datos en el padre鈥 algo as铆: ```js const motoBrands = "['Ducati', 'BMW', 'Honda']" motoBrands[0] = 'Yamaha' motoBrands.push('Suzuki') ``` Estos cambios no disparar谩n el ngOnChange hook del componente hijo. 驴Por qu茅 sucede esto, si a priori estamos cambiando el objeto? Esto se debe a que ngOnChange est谩 programado para dispararse solo cuando cambie el valor de la referencia en memoria. La siguiente forma de a帽adir items al carrito asegura un cambio de referencia en memoria, por ende, la ejecuci贸n del ngOnChange hook en componentes hijos. ```js addNewItem(item: Product) { const newCart = [...this.shoppingCart.value, item] this.shoppingCart.set(newCart); } ``` Los invito a ver m谩s al respecto en las siguiente clases: <https://platzi.com/new-home/clases/8617-javascript-fundamentos/66439-tipos-de-datos-mutabilidad-e-inmutabilidad/> <https://platzi.com/new-home/clases/8617-javascript-fundamentos/66440-paso-por-valor/> <https://platzi.com/new-home/clases/8617-javascript-fundamentos/66441-paso-por-referencia/> Espero sea de utilidad, happy coding!
Hey les comparto una experiencia interesante de ngOnChange que nos puede evitar varios bugs en el futuro. Se trata de su funcionamiento cuando usamos datos primitivos vs complejos en Javascript. Ver谩n... cuando utilizamos datos primitivos (strings, numeros, booleanos) que se **pasan por valor**, el funcionamiento es exactamente el que esperamos; cambiamos el valor en el componente padre y se dispara el ngOnChange hook en el componente hijo. Sin embargo, cuando pasamos **datos complejos o no primitivos (functions, arrays, objects )** a trav茅s de un input y cambiamos sus datos en el padre鈥 algo as铆: ```js const motoBrands = "['Ducati', 'BMW', 'Honda']" motoBrands[0] = 'Yamaha' motoBrands.push('Suzuki') ```Estos cambios no disparar谩n el ngOnChange hook del componente hijo. 驴Por qu茅 sucede esto, si a priori estamos cambiando el objeto? Esto se debe a que ngOnChange est谩 programado para dispararse solo cuando cambie el **valor de la referencia en memoria.** La siguiente forma de a帽adir items al carrito asegura un cambio de referencia en memoria, por ende, la ejecuci贸n del ngOnChange hook en componentes hijos. ```js addNewItem(item: Product) { const newCart = [...this.shoppingCart.value, item] this.shoppingCart.set(newCart); } ```Los invito a ver m谩s al respecto en las siguiente clases: <https://platzi.com/new-home/clases/8617-javascript-fundamentos/66439-tipos-de-datos-mutabilidad-e-inmutabilidad/> <https://platzi.com/new-home/clases/8617-javascript-fundamentos/66440-paso-por-valor/> [https://platzi.com/new-home/clases/8617-javascript-fundamentos/66441-paso-por-referencia/ Espero les sea de utilidad, happy coding! ](https://platzi.com/new-home/clases/8617-javascript-fundamentos/66441-paso-por-referencia/)
Mi soluci贸n la realice de la siguiente forma, agregando tambien la funcionalida de eliminar el producto } ```js totalProducts(products:Array<Product>){ return products.reduce((totalValue,ProductValue:Product) => totalValue + ProductValue.price,0); } ngOnChanges(changes:SimpleChanges){ try{ if (!Object.hasOwn(changes,"cart")) { throw `No existe "cart" en el compoente Header` } const {cart} = changes this.total.set(this.totalProducts(cart.currentValue)) }catch(error){ console.error(error); } } ```
Esta es la soluci贸n que plateo, no se si esta bien jeje ![](https://static.platzi.com/media/user_upload/image-d20b8a98-b8d2-4965-8bd2-c1f2f26d4fca.jpg) Y aca el resultado: ![](https://static.platzi.com/media/user_upload/image-b1b22a20-6278-41a4-9298-416ae52a924e.jpg) Cualquier sugerencia ser谩 muy bien recibida jeje
As铆 voy: ![](https://static.platzi.com/media/user_upload/image-bab717ac-7562-423e-838a-39ca97cb9968.jpg)![]()
soluci贸n al reto ```js

Products on the cart


@for (cart of cart; track $index) {

Producto: {{cart.title}}

Precio: ${{cart.price}}

}
```