Estados compuestos

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 20

Preguntas 2

Ordenar por:

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

Mario Josué Tavarez Mendoza

hace un año

Me gusta mas la solución usando enums, te dan mayor flexibilidad a la hora de condicionar ya que con los enums podríamos crear un mapa de opciones para retornar por cada condición. A su vez al usar mapas se pueden ejecutar funciones dinámicas por cada opción ![](https://static.platzi.com/media/user_upload/image-6bb190b7-2691-44be-b5e3-72db7a5201c2.jpg) ![](https://static.platzi.com/media/user_upload/image-eb4d1fb9-1af9-46c9-b624-e979560aae21.jpg)

Julian Franco

hace un año

Si han seguido el curso hasta aqui, no olviden cambiar en los metodos el index por el id, al igual que el parametro que envian por task.id Porque como anteriormente se enviaba el index; si le dan completed a la tarea que se encuentra en el index 1 y luego filtran por completed y le dan eliminar, este va eliminar el indice 0 eliminando asi un elemento diferente. deleteTask(*id*: number){ this.tasks.update((*tasks*) => *tasks*.filter((*task*) => *task*.id !== *id*)) } ```js <button class="destroy" (click)="deleteTask(task.id)"></button> deleteTask(id: number){ this.tasks.update((tasks) => tasks.filter((task) => task.id !== id)) } ```

Cristian Romero

hace un año

Para no complicarme mucho con la parte de un Enum, utilicé un type de la siguiente manera: ![](https://static.platzi.com/media/user_upload/image-a4222774-1e1a-4462-8d37-8f0c9400a732.jpg)

Joseph Christoffer Condori Murga

hace 9 meses

mi solución sería esta: ![](https://static.platzi.com/media/user_upload/image-5e5ed72d-9c3a-4edf-bd7a-019cda976c8d.jpg)

Luis Alvarez Ollarvez

hace 8 meses

Acá m solución al reto de la clase. Saludos! ![](https://static.platzi.com/media/user_upload/image-206f8079-49b6-4949-b97a-982258bd39bf.jpg)

Mario Josué Tavarez Mendoza

hace un año

Esto la función computed me recuerda un poco a useMemo de react. Adicional los computed signals son evaluadas de manera perezosa y memorizadas, estas solo calculan su valor al ser accedidas por primera vez y lo almacenan para usos futuros. Cuando sus dependencias cambian, invalidan la caché, recalculando el valor solo cuando son accedidas de nuevo.

emersonvergara

hace un año

Creo el estado de los filtro: ![](https://static.platzi.com/media/user_upload/image-d32b7ecb-98e4-4ac0-bc98-5cc98a3b3953.jpg) Estados computados ![](https://static.platzi.com/media/user_upload/image-c210393a-bf74-4574-bb54-66bf81cd0cf5.jpg) el handler ![](https://static.platzi.com/media/user_upload/image-9507d196-0011-4527-bd07-47133daeaeab.jpg) Cambios en el template ![](https://static.platzi.com/media/user_upload/image-3770e00d-9a4b-4710-83d8-0e42e6ec6ca5.jpg) retos: ![](https://static.platzi.com/media/user_upload/image-86228f23-f6b6-4d65-acc6-86d5bda786c0.jpg) ![](https://static.platzi.com/media/user_upload/image-edb3ca3c-390a-4ba3-ae23-12edb9aef87c.jpg)

Alejandro Vazquez Vazquez

hace 3 meses

Yo no se si tome la ruta fácil pero se me ocurrió usar el Signal filter para hacer lo de la clase dinámica aun creo que si tuviera muchos tipos de filtre seria tedioso cambiarlos todos![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-09-02%20a%20la%28s%29%2011.22.52p.m.-3adcca9a-234c-4868-bf70-791579e70139.jpg)

Eugenio Condori

hace 6 meses

Aquí mi solución ![](https://static.platzi.com/media/user_upload/image-b1659281-7f73-4eab-8d4a-8e35091dbaa8.jpg) ![](https://static.platzi.com/media/user_upload/image-6b0aac90-066b-4cad-93de-73ad280a073c.jpg)

Raycris Maldonado

hace 6 meses

esta es la solución para que la cantidad de items cambie de acuerdo a los filtros, en mi caso estoy utilizando players porque lo cambié por task, en dado caso solo deben de cambiar players por task. ```js {{ playersByFilter().length }} Player <ng-template #elseBlock> Players </ng-template> ```\ \{{ playersByFilter().length }}\ \Player\</span > \<ng-template #elseBlock> Players \</ng-template> \ Aquí esta la solucion al cambio de los campos, con ayuda de los comentarios: ```js

All
Pending
Completed

```

JHONATAN AGUILERA GARCIA

hace 7 meses

La solución a mi reto fue el siguiente ```ts <footer class="footer"> {{ taskByFilter().length }} items <ng-template #elseBlock> item </ng-template>

All
Pending
Completed

<button class="clear-completed">Clear completed</button> </footer> ```

Hernan David Cortes Sierra

hace 8 meses

En mi caso solucione el tema del footer de la siguiente forma: ![](https://static.platzi.com/media/user_upload/image-3a3ed0b3-7413-4b14-b511-24be87a23843.jpg)![](https://static.platzi.com/media/user_upload/image-3221aaf9-4b0a-41d4-a4cc-bb19894ad02a.jpg) me funcionó, pero a la hora de las buenas practicas de programación no se si esta bien aplicado, me gustaria mucho que dejarán sus opiniones, graciasss :D

marinapinasco80

hace 8 meses

Hola. Porqué los recursos sólo tienen hasta el branch step-18? Gracias.

Guillermo Altair Santos Aguilar

hace 10 meses

![](https://static.platzi.com/media/user_upload/image-90f0dec6-43de-48d0-b2fc-0d31da4cfd15.jpg)

Héctor Villavicencio

hace 10 meses

Con esto se podria usar el patron de diseño estrategy no? Cuando termine esta parte del curso vere si puedo haerlo todo por objetos al back jeje

Angel Eduardo Ramos Mena

hace 10 meses

Aquí está mi aporte (Quedo atento a cualquier sugerencia): \ \{{tasksLength}}\ items \ \<ng-template #justItem> \ \{{tasksLength}}\ item\ \</ng-template> ***Home.component.ts*** ```js tasksLength = this.tasks().length; if(filter === 'pending'){ this.tasksLength = tasks.filter(task => !task.completed ).length; return tasks.filter(task => !task.completed ) } if(filter === 'completed'){ this.tasksLength = tasks.filter(task => task.completed ).length; return tasks.filter(task => task.completed ) } this.tasksLength = this.tasks().length; return tasks; ```Home.component.html ```js {{tasksLength}} items <ng-template #justItem> {{tasksLength}} item </ng-template> ```

Alex Gallardo

hace un año

Porque hay que usar computed?, me funciona sin usarlo. ```js taskByFilter=(()=>{ const filter=this.filter(); const tasks= this.tasks(); if (filter==="pending"){ return tasks.filter(task=>!task.completed); } if (filter==="completed"){ return tasks.filter(task=>task.completed); } return tasks; }); ```

ANDRES ALFONSO MIRA MEJIA

hace un año

✅

Juan R Rossano

hace un año

Como la opcion selecionada de los filtros debe ser una sola y estar marcada ¿no es mejor un radio button o un combo? En ese caso ¿no podria usarse el texto de la opcion seleccionada? Ya no habria que validar el texto porque no se ingresaria a mano

Brandon Lee Aguero Fernandez

hace un año

Por aquí dejo mi solución al reto 😄
Este sería para la cantidad de tareas, en base a cada filtro.

<strong>{{ tasksByFilter().length }}</strong>

Y este sería para mostrar el los estilos de la clase ‘selected’ en base al filtro en donde se encuentra

<a [class.selected]="filter() === 'all'" (click)="changeFilter('all')"
  >All</a
>