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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
8 Hrs
9 Min
37 Seg

Directivas de control

9/70
Recursos

Aportes 11

Preguntas 3

Ordenar por:

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

no me imprime la lista
**Soluci贸n al Error de Uso de** `*ngFor` **en Angular.** Quiero compartir con ustedes c贸mo resolv铆 un error com煤n al utilizar la directiva `*ngFor` en Angular, esperando que pueda ayudar a cualquiera que se encuentre con el mismo problema. Al intentar iterar sobre un arreglo en mi plantilla Angular utilizando `*ngFor`, me encontr茅 con un error de compilaci贸n que indicaba que ni `NgFor` ni `CommonModule` hab铆an sido importados correctamente, a pesar de que `CommonModule` estaba presente en mis importaciones. El c贸digo problem谩tico era el siguiente: `
  • ` Despu茅s de revisar mi c贸digo y buscar en la documentaci贸n de Angular, me di cuenta de que el problema no estaba relacionado con la importaci贸n de m贸dulos, sino con la sintaxis utilizada en la directiva `*ngFor`. Espec铆ficamente, estaba tratando de llamar a una funci贸n (`toDo()`) en lugar de referenciar una propiedad o variable del componente. Adem谩s, hab铆a utilizado incorrectamente el operador `as` en lugar de `of` para iterar sobre los elementos del arreglo. La soluci贸n fue simplemente corregir la sintaxis de la directiva `*ngFor` en mi plantilla, cambiando el operador `as` por `of` y asegur谩ndome de referenciar una propiedad del componente en lugar de llamar a una funci贸n. Aqu铆 est谩 el c贸digo corregido: `
  • `
  • Si son como yo que la lista no le imprima, deben de tener en cuenta lo siguiente: 1- las importaciones estes bien en este caso que commonModule este importado 2- si tienen todo como el profesor y no les aparece, lo que me funcion贸 fue escribir la linea del \*ngfor de forma manual Espero que sea de ayuda
    porque teniendo el mismo codigo que el profesor y las importaciones 驴no me imprime el \*ngfor?
    Ami tampoco me imprime la lista, le agregu茅 el CommonModule y nada. No s茅 que ser谩.
    No me imprime la lista, he agregado lo que comento Brenda, importar el CommonModule, pero aun asi no se imprime. me da como error en la consola esto: "labs.component.html:5 NG0303: Can't bind to 'NgForOf' since it isn't a known property of 'li' (used in the '\_LabsComponent' component template). 1\. If 'li' is an Angular component and it has the 'NgForOf' input, then verify that it is included in the '@Component.imports' of this component. 2\. To allow any property add 'NO\_ERRORS\_SCHEMA' to the '@Component.schemas' of this component." He intentado en vez de usar \
      \
    • un \
      y nada, importe el NgModule y nada... he intentado par de cosas m谩s y nada. No se que mas hacer. si alguien sabe algo y me puede ayudar, muchas gracias.
    Esta buen铆simo Angular!!!
    Esto est谩 muy cool !!!
    Yo anteriormente habia utilizado angular para algunos proyectos pero veia que angular al menos en la parte de la logica utilizaba mucho el tipado pero ya no veo que se haga dentro de este curso
    ![](https://static.platzi.com/media/user_upload/image-0159dff8-698b-4cc1-8151-4078aba36e61.jpg) ![](https://static.platzi.com/media/user_upload/image-267272fd-0bbc-4166-84e0-6797e39a8b9e.jpg) ![](https://static.platzi.com/media/user_upload/image-19a46d76-80ce-441e-9702-9160d86c984a.jpg)![](https://static.platzi.com/media/user_upload/image-671c8cc9-0596-424b-ac45-d90aaf3cabf0.jpg) Componente: ![](https://static.platzi.com/media/user_upload/image-a10b0d36-309b-4818-b43b-ced18a256757.jpg)![](https://static.platzi.com/media/user_upload/image-34a7be98-92fd-45ee-aed7-e46b29cbceb4.jpg) Creo que usando getter se ve m谩s natural el c贸digo en el template