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

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

7 D铆as
17 Hrs
57 Min
59 Seg

Usando effect para localStorage

21/70
Recursos

Aportes 13

Preguntas 2

Ordenar por:

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

mejor el footer as铆: \<footer class="footer" \*ngIf="tasks().length > 0"> esto evita que desaparazca cuanto tengo cero completados y de casualidad voy al filtro de completados..
a mi me funciona bien sin necesidad del inyector, por favor 驴algui茅n que me pueda decir el por que? ```js ngOnInit() { const storageTasks = localStorage.getItem('tasks'); if(storageTasks) { const tasks: Task[] = JSON.parse(storageTasks); this.tasks.set(tasks); } } constructor() { effect(() => { localStorage.setItem('tasks', JSON.stringify(this.tasks())); }); } ```ngOnInit() { const storageTasks = localStorage.getItem('tasks'); if(storageTasks) { const tasks: Task\[] = JSON.parse(storageTasks); this.tasks.set(tasks); } } constructor() { effect(() => { localStorage.setItem('tasks', JSON.stringify(this.tasks())); }); }
De esta manera no toco agregar nada mas: `聽 constructor() {聽 聽 effect(() => {聽 聽 聽 localStorage.setItem('tasks', JSON.stringify(this.tasks()))聽 聽 })聽 }` `聽 ngOnInit() {聽 聽 const storage = localStorage.getItem('tasks');聽 聽 if (storage) {聽 聽 聽 this.tasks.set(JSON.parse(storage))聽 聽 }聽 }`
No entiendo bien que hacen estas lineas. injector = inject(Injector) {injector: this.injector}
a mi me funciona bien sin necesidad del inyector, por favor 驴algui茅n que me pueda decir el por que? ```js export class HomeComponent implements OnInit { ngOnInit() { const storageTasks = localStorage.getItem('tasks'); if(storageTasks) { const tasks: Task[] = JSON.parse(storageTasks); this.tasks.set(tasks); } } constructor() { effect(() => { localStorage.setItem('tasks', JSON.stringify(this.tasks())); }); } ```export class HomeComponent implements OnInit { ngOnInit() { const storageTasks = localStorage.getItem('tasks'); if(storageTasks) { const tasks: Task\[] = JSON.parse(storageTasks); this.tasks.set(tasks); } } constructor() { effect(() => { localStorage.setItem('tasks', JSON.stringify(this.tasks())); }); }

Fuente: ChatGPT.
En Angular 17, usar { injector: this.injector } en la funci贸n effect asegura que el efecto tenga el contexto correcto del inyector de dependencias del componente. Esto es necesario para resolver correctamente las dependencias y servicios usados en el efecto, y para gestionar de manera adecuada el 谩mbito y ciclo de vida del efecto en relaci贸n con el componente. Es una pr谩ctica recomendada para mantener la integridad y coherencia del manejo de estados y dependencias en el componente.

Tuve un error en consola: "Error parsing tasks from localStorage: SyntaxError: "undefined" is not valid JSON at JSON.parse (\<anonymous>)" As铆 es como lo solucion茅: ```ts ngOnInit() { const storage = localStorage.getItem('tasks'); if (storage && storage !== 'undefined') { try { const tasks = JSON.parse(storage); this.tasks.set(tasks); } catch (error) { console.error('Error parsing tasks from localStorage:', error); } } this.trackTasks(); } ```
Por alguna raz贸n no me funcionaba el ngOnInit() cuando recargaba la p谩gina, solo cuando corrr铆a el npm run start. Lo Solucione quitando el cache en la ventana de networking ![](https://static.platzi.com/media/user_upload/image-247deb57-f4d7-46c6-a210-95806fb649f4.jpg) Tambien no me funcionaba el c贸digo del profe porque empezaba con un localstorage que me entregaba null. Lo resolv铆 de la siguiente manera `injector = inject(Injector);` `聽 ngOnInit() {聽 聽 console.log('ng om init');` `聽 聽 const storage = localStorage.getItem('tasks');聽 聽 console.log(storage)聽 聽 if ( storage !== null ) {聽 聽 聽 const tasks = JSON.parse(storage);聽 聽 聽 this.tasks.set(tasks);聽 聽 }聽 聽 this.trackTasks();聽 }` `聽 trackTasks() {聽 聽 console.log("Setting up trackTasks effect");聽 聽 effect(() => {聽 聽 聽 const tasks = this.tasks();聽 聽 聽 console.log(tasks);聽 聽 聽 localStorage.setItem('tasks', JSON.stringify(tasks));聽 聽 聽 console.log(localStorage.getItem('tasks'));` `聽 聽 }, { injector: this.injector });聽 }` ![](https://static.platzi.com/media/user_upload/image-3ace170f-0f88-4e89-9077-51dd410d7888.jpg)
Para entender la inyecci贸n de dependencias tengan en cuenta que en angular una dependencia es un servicio, un valor, una funci贸n o cualquier parte l贸gica que una clase/componente necesita para funcionar correctamente. * Por defecto, debemos instanciar o declarar estas dependencias en el constructor. En el ciclo de vida de angular primero se ejecuta el constructor y despu茅s el onInit. Por lo tanto el effect guarda el valor inicial de las tareas que es un array vac铆o. * Para cambiar el orden de renderizado de una dependecia angular tiene los inject que te da la libertad de inyectar/agregar una funcionalidad a tu c贸digo en alg煤n punto que tu desees. * Para hacer traking de un estado angular requiere que declaremos el effect en el constructor de esta manera estar谩 escuchando todo el tiempo que el componente este activo el estado de esa variable. * Si no lo inyectamos en el constructor el effect no estar谩 en modo de escucha y no puede detectar cambios en la variable objetivo. * Para declararlo fuera del constructor debemos inyectar todas las dependencias que requiera al momento de declararlo, eso es lo que indica este par谩metro 聽{injector: this.injector} * De manera breve lo que se hace es crear el effect fuera del constructor y despu茅s agregarle todas las librer铆as, l贸gica y dem谩s al memento de crearlo para que funcione de manera adecuada. * Esta librer铆a esta en construcci贸n supongo que la van a modificar para hacerla mas entendible en proximas versiones, algo mas parecida al useEffect de react que es mas simple de 煤tilizar y cumple la misma funci贸n.
mi constructor estaba justo despues del inicio de la clase.. y nunca tuve problemas ... no me toc贸 hacer nada mas para que no se borraran los datos

Opt茅 por colocar la l贸gica de 鈥榚ffect鈥 en el constructor en lugar de ngOnInit porque 鈥榚ffect鈥 es una funci贸n sincr贸nica. En Angular, el constructor es un buen lugar para inicializar propiedades y ejecutar l贸gica que no depende de servicios externos o datos as铆ncronos. Adem谩s, reservo ngOnInit para actividades que involucran operaciones as铆ncronas o dependencias externas.

constructor() {
  const storage = window.localStorage.getItem('tasks');
  if (storage) {
    const tasks = JSON.parse(storage);
    this.tasks.set(tasks);
  }
  this.updateLocalStorage();
}

Cr茅ditos a ChatGPT 馃

Muy buen curso. Gracias profesor Nicol谩s. ngrx/store es un tema que me ha costado dominar. Esto del efect es similar a ngrx/store? Puede reemplazr a ngrx/store? O definitivamente es lo mismo pero en menor escala? Agradezco sus aclaraciones.