Uso de ngFor

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 17

Preguntas 5

Ordenar por:

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

Juan Camilo Salazar Rojas

hace 10 meses

Para que el input quede vacío al momento de agregar una tarea a la lista, solamente se agrega input.value='' en el método changeHandler() '; Quedando así: ![](https://static.platzi.com/media/user_upload/image-cc5a207a-a137-4c72-b9f0-3a5b6036a674.jpg)

Vicente Alberto Benavides Alcivar

hace un año

En mi caso lo hice con splice

  deleteTask(index: number): void {
    this.tasks.update((tasks) => {
      tasks.splice(index, 1);
      return tasks;
    });
  }

christian soto

hace 10 meses

Personalmente prefiero usar nombres más semanticos en las funciones por ejemplo: `onNewTaskInputEvent(event: Event) { ` `const inputField = event.target as HTMLInputElement; const newTask = inputField.value; this.tasks.update((tasks) => [...tasks, newTask]); ` `}`

Jesner Wilian Ramirez Cueva

hace 8 meses

Otra alternativa por si desean... ![](https://static.platzi.com/media/user_upload/image-75dddc97-e90d-4ba4-a6ce-32c1d6058ce3.jpg)

Daniel Bastidas

hace 5 meses

![](https://static.platzi.com/media/user_upload/image-01372936-fc6a-4b78-8d1f-daa1a9ac39ef.jpg)

Gerardo Cordova Alvarez

hace 10 meses

hola, entiendo ala perfeccion el video pero me genero una duda, la cual es ¿por que filter? y funciona con la misma lojica al traer la informacion desde una base de datos? (se que no han tocado temas de bases de datos pero me genero esa duda)

Ricardo Cifuentes Duque

hace 10 meses

Creo que hay un error conceptual al hablar de inmutabilidad ya que al final el estado del array 'Tasks' si está mutando. En este caso no hay diferencia entre utilizar el .update o .set. ```js deleteTask(index: number) { this.tasks.set( this.tasks() .filter((_, position) => position != index)); } ```

emersonvergara

hace un año

Tengo una duda en mi caso para el tema de agregar una nueva tarea de estas formas y ambas funcionaron: this.\_tasks().push(this.createTask(input.value)); this.\_tasks.update((task) => \[...task, this.createTask(input.value)]) La duda es hay alguna problema en este caso this.\_tasks().push(this.createTask(input.value));

josué

hace 4 meses

Cual es la diferencia entre `.update()` y `.set` es decir, esto tambien funciona: `this.tasks.set([...this.tasks(), newTask])`

Cristian palacios

hace 4 meses

amo las clases de este tipo

Daniel Bastidas

hace 5 meses

changeHandler(event: Event) { const input = event.target as HTMLInputElement; const newTask = input.value; this.taskSignal.update((tasksAnte) => \[...tasksAnte, newTask]); };

Johangly Sucre

hace 6 meses

use keyup y keydown para diferenciar los eventos ```js <input class="new-todo" placeholder="Type new todo" [value]="newTodo()" autofocus (keyup)="writingNewTodo($event)" type="text" (keydown.enter)="changeHandler($event)" /> ``` \<input class="new-todo" placeholder="Type new todo" \[value]="newTodo()" autofocus (keyup)="writingNewTodo($event)" type="text" (keydown.enter)="changeHandler($event)" />

daw burgos

hace 6 meses

El método filter recibe una función de callback que puede tener hasta tres parámetros:

Elemento actual: Representa el elemento actual que se está evaluando en el array durante la iteración.
Índice: Representa el índice del elemento actual en el array durante la iteración.
Array original: (Opcional) Representa el array en el que se está iterando.

Juan Camilo Salazar Rojas

hace 10 meses

Para que el input quede vacío al momento de agregar una tarea a la lista, solamente se agrega en la última línea input.value=' en el método changeHandler() '; Quedando así: changeHandler = (event: Event) => { *const* input = event.target *as* HTMLInputElement; *const* newTask = input.value; *this*.tasks.update((tasks) => \[...tasks, newTask]); input.value=''; }

PRUEBA devops

hace 10 meses

excelente tema y bien explicado, gracias por esta actualización a angular 17

Luis Angel Murrugarra Astolingon

hace un año

Entiendo que la forma mas legible de poder agregar un nuevo valor al signal, persistiendo su valor actual, es mediante el método update. Sin embargo, este código también cumple el mismo propósito. Entonces existe alguna consideración importante de, ¿porque utilizar update en vez de set? ```js this.tasks.set([newTask,...this.tasks()]) ```this.tasks.set(\[newTask,...this.tasks()])

ANDRES ALFONSO MIRA MEJIA

hace un año

✅