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,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
11 DÃas
7 Hrs
38 Min
14 Seg
Directivas de control
10/71Recursos
Aportes 16
Preguntas 5
Ordenar por:
**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:
` `
no me imprime la lista
Utilizando la nueva sintaxis de Angular
```js
-
@for(task of tasks(); track task){
- {{$index + 1}} {{task}} }
- Â @for(task of tasks(); track task){Â Â \
- {{$index + 1}} Â {{task}}\ Â }\
Buenas sumercé!
Les traigo atajitos de VSCode que ojalá les guste:
* Subraya y ctrl + K + C para comentar en cualquier lenguaje.
* Subraya y ctrl + K + U para descomentar en cualquier lenguaje.
* Subraya y shift + alt + Down para duplicar una lÃnea de código justo abajo de la original (Re útil en HTML).
* Ctrl + B para mostrar o ocultar el explorador de archivos de VSCode.
Espero les guste parceritos, ya les traeré más cuando me encuentre más.
Saludos!
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
Despues de que hagan todo y quieran darle formato al codigo o el espacio correcto, pueden usar = shift + alt + f
con eso les tabula de forma correcta todo el codigo, incluyendo espacios.
También podemos utilizar los atajos Ctrl+k+c para las lÃneas o lÃnea de código seleccionadas y Ctrl+k+u para descomentar, en vscode.
Hola, como seria esto en angular 17:
 @Input() set tooltipPlacement(newValue: `${NgxFloatUiPlacements}`) {  this.placement = newValue as NgxFloatUiPlacements; }
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
Componente:
Creo que usando getter se ve más natural el código en el template
✅
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?