Usando effect para localStorage

Curso de Angular 17: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Aprende Angular 17

Creando tu primer proyecto en Angular

Implementando estilos

Mostrando elementos

Property Binding en Angular

Event Binding: click y doble click

Event binding: keydown

Modelo de reactividad con Signals

Creando un Signal en Angular

Estructuras de control en Angular

Directivas de control

Uso de ngFor

ngFor para objetos

Update Tasks

Uso de ngIf

Uso de ngSwitch y ngSwitchDefault

Controlando un input

Manejo de formularios en Angular

Alistando tu aplicación para producción

Estilos al modo Angular

Clases en Angular

Editing mode

Estados compuestos con computed

Usando effect para localStorage

Uso de ngbuild

Despliegue con Firebase Hosting

Nueva sintaxis en Angular

Directivas @For, @switch

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicación

Construyendo un e-commerce en Angular

Componentes en Angular

Mostrando los componentes

Angular DevTools

Uso de Inputs en Angular

Uso de Outputs en Angular

Componentes para Producto

Ciclo de vida de los componentes

Ciclo de vida de componentes

Ciclo de vida de componentes: ngOnChanges

Ciclo de vida de componentes: ngOnInit

Detectando cambios en los inputs

Evitando memory leaks con ngDestroy

Audio player con ngAfterViewInit

Creando la página "about us" o "conócenos"

Mejorando la interfaz del producto

Creando componente de productos

Creando el Header

Creando el carrito de compras

Comunicación padre e hijo

Calculando el total con ngOnChanges

El problema del prop drilling

Reactividad con signals en servicios

Entendiendo la inyección de dependencias

Integración y Datos

Obteniendo datos una REST API

Importaciones cortas en Typescript

Pipes en Angular

Construyendo tu propio pipe

Utilizando librerías de JavaScript en Angular

Conociendo las directivas

Deployando un proyecto en Vercel

Enrutamiento y Navegación

Ruta 404

Uso del RouterLink

Vistas anidadas

Uso del RouterLinkActive

Detalle de cada producto

Obteniendo datos del producto

Galería de imagenes

Detalle de la galería

Perfeccionando tu e-commerce

Mostrando categorias desde la API

Url Params

LazyLoading y Code Splitting

Aplicando LazyLoading

Prefetching

Usando la nueva sintaxis de Angular 17

Lanzando tu aplicación a producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

José Jorge Zuñiga Gómez

hace 10 meses

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..

Luis Felipe Moreno Rondon

hace un año

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())); }); }

jose zuñiga

hace 9 meses

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.

Jhon_B

hace 10 meses

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)) } }`

Vicente Alberto Benavides Alcivar

hace un año

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.

José Jorge Zuñiga Gómez

hace 10 meses

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

Julian Franco

hace un año

No entiendo bien que hacen estas lineas. injector = inject(Injector) {injector: this.injector}

Luis Felipe Moreno Rondon

hace un año

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())); }); }

Juan Guillermo Perez Cardozo

hace 2 meses

tampoco tuve necesidad de usar el inject

Oscar Esteban Vera Marulanda

hace 7 meses

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(); } ```

Diego Bustos Kehdy

hace 8 meses

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)

Brandon Lee Aguero Fernandez

hace un año

Opté por colocar la lógica de ‘effect’ en el constructor en lugar de ngOnInit porque ‘effect’ 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 🤖

ANDRES ALFONSO MIRA MEJIA

hace un año

✅

Oscar Bravo

hace un año

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.