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

Estados compuestos con computed

20/70
Recursos

Aportes 16

Preguntas 2

Ordenar por:

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

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)
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)) } ```
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)
mi soluci贸n ser铆a esta: ![](https://static.platzi.com/media/user_upload/image-5e5ed72d-9c3a-4edf-bd7a-019cda976c8d.jpg)
Ac谩 m soluci贸n al reto de la clase. Saludos! ![](https://static.platzi.com/media/user_upload/image-206f8079-49b6-4949-b97a-982258bd39bf.jpg)
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.
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)
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
Hola. Porqu茅 los recursos s贸lo tienen hasta el branch step-18? Gracias.
![](https://static.platzi.com/media/user_upload/image-90f0dec6-43de-48d0-b2fc-0d31da4cfd15.jpg)
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
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> ```
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; }); ```

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

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 鈥榮elected鈥 en base al filtro en donde se encuentra

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