Curso de Angular: 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

Recursos

Aportes 21

Preguntas 1

Ordenar por:

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

Juan Esteban Silva Morales

hace 8 meses

Para los que estén teniendo este error: ▲ \[WARNING] NG8103: The `\*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported. Use Angular's built-in control flow @for or make sure that either the `NgFor` directive or the `CommonModule` is inc es porque aunque en el video no lo explica, el profesor tiene en el app.component.ts un import a CommonModule, la solución sería agregarlo en el imports que está adentro del @Component: imports: \[RouterOutlet, CommonModule],

Raúl Adolfo Sánchez Rodríguez

hace 8 meses

✅ Imprimiendo un array con Angular ![](https://static.platzi.com/media/user_upload/clase2-1-92074a76-47a0-48a0-ac66-8dfa1d76e6e1.jpg) ![](https://static.platzi.com/media/user_upload/clase2-2-95a66b4c-f583-4b75-a428-02396cd52594.jpg) ![](https://static.platzi.com/media/user_upload/clase2-3-10c89280-7482-44b0-b55d-74dd8a3ca1c5.jpg) ![](https://static.platzi.com/media/user_upload/clase2-4-706cf756-f21c-4992-81fb-c566fc7467fa.jpg) ![](https://static.platzi.com/media/user_upload/clase2-5-ec5bbb25-9ba2-42a4-89a0-c65cfa8f84dc.jpg)

Kengya Moncada

hace 4 meses

![](https://static.platzi.com/media/user_upload/image-6826f4ef-79e7-4a83-a0de-1363326d184c.jpg) Nota: "Para los que estan iniciando , es importante importar router y el common ya que sin esas importaciones, les arrojara errores en html como me paso a mi"

José Francisco Durand Aguilar

hace 8 meses

Esto va demasiado rápido para alguien que no ha tocado nunca angular...

Luis Olave Carvajal

hace 7 meses

pague platzi, pensando que era angular 18. gg

Jherom Chacon

hace 2 meses

Un preprocesador de CSS es una herramienta que extiende las capacidades del CSS tradicional, permitiendo usar características como variables, anidamiento de selectores y funciones. Ejemplos populares son Sass, LESS y Stylus. Estos preprocesadores compilan el código escrito en su sintaxis a CSS estándar, facilitando la gestión de estilos en proyectos grandes y mejorando la productividad del desarrollo web. Su uso puede hacer que el código sea más mantenible y modular.

Jherom Chacon

hace 2 meses

Una directiva en Angular es una clase que permite modificar el comportamiento o la apariencia de elementos del DOM. Existen tres tipos de directivas: las estructurales, que alteran la estructura del DOM (ej. *ngIf, *ngFor); las de atributos, que cambian la apariencia o el comportamiento de un elemento (ej. ngClass, ngStyle); y las de componentes, que son directivas con una plantilla asociada. Las directivas son clave para crear aplicaciones dinámicas y reutilizables en Angular.

Jherom Chacon

hace 2 meses

Al iniciar un proyecto de Angular, se pregunta sobre Server Side Rendering (SSR) para determinar si se desea que el contenido de la aplicación se renderice en el servidor en lugar de en el cliente. SSR mejora el rendimiento y la indexación en motores de búsqueda, ya que entrega HTML pre-renderizado al navegador. Esto significa que el usuario ve el contenido más rápidamente, lo que mejora la experiencia de usuario. Optar por SSR puede ser beneficioso para aplicaciones que requieren una carga inicial más rápida y mejor SEO.

Heydi García Sánchez

hace 5 meses

Para los que quieren aprender angular la ultima version, es super mas sencilla y pueden hacerlo desde el tutorial de su pagina, es super sencillo empezar desde ahi, haran una pagina de casas desde el principio, lo entendi super bien con este tutorial: <https://angular.dev/tutorials/first-app>

Jhorman Andres Salazar Quiroz

hace 3 meses

Con el comando "ng serve -o" se abrirá automáticamente el puerto en una nueva ventana, en tu navegador predeterminado. ES muy útil!

Jesús Alberto López Galindo

hace 6 meses

### Cambio en las versiones recientes (Angular 14+) A partir de Angular 14, con la introducción de las **Standalone Components** (Componentes Autónomos), puedes optar por no utilizar módulos, lo que te da más flexibilidad. Sin embargo, esto también significa que ahora es necesario que importes explícitamente los módulos o directivas que tu componente necesite, como el `CommonModule`, si estás trabajando sin módulos.

Kenet Andrés Chungandro Montenegro

hace 8 meses

![](https://static.platzi.com/media/user_upload/image-648b83e2-2735-4dc8-8d72-ea862554f58b.jpg)

Walter Eliseo Apaza Avila

hace 8 meses

ahora la creacion de componentes agrega un archivo adicional "app.component.spec.ts", comienza a ser algo engorroso tener 4 archivos por componente

Rody Josue Ccoyllo Cule

hace 8 meses

Para poder usar el \*ngFor es necesario importar el "CommonModule"

Max Andy Diaz Neyra

hace 14 días

Aqui les dejo el enlace para el angular 17: <https://v17.angular.io/guide/setup-local> el comando global seria: `npm install -g @angular/cli@17`

David Castro

hace 2 meses

Para acceder a la terminal en Windows (para los que no saben), solo tienes que abrir el panel Inicio (o tocar el botón Win del teclado) y escribir "cmd". Se va a abrir una pequeña ventana negra, esa es la terminal y ahí debes escribir los comandos de esta clase.

Jherom Chacon

hace 2 meses

Instalar un paquete de Angular de manera global no sobrescribirá la versión de ese paquete que tengas instalada en un proyecto específico. Cada proyecto puede tener sus propias dependencias y versiones definidas en su archivo `package.json`. Las instalaciones globales son independientes y generalmente se utilizan para herramientas de línea de comandos. Para gestionar versiones específicas de paquetes en proyectos, es recomendable usar el gestor de paquetes de tu proyecto (npm o yarn) para asegurar que cada proyecto tenga las dependencias correctas.