@for (product of cart; track product.id) {
}
```Total: {{ getTotalPrice() | currency }}
Introducción a Angular y Fundamentos
Desarrollo de Aplicaciones Modernas con Angular
Creando tu primer proyecto en Angular
Creación de componentes y rutas en Angular para gestión de tareas
String Interpolation en Angular: Transmisión de Datos a Templates
Modificación de Propiedades HTML con Angular: Property Binding
Eventos en Angular: click, doble click y cambio de input
Eventos de Teclado en JavaScript: Uso de KeyDown y Change
Reactividad Granular con Signals en Angular
Reactividad en HTML: Implementación de Signals en JavaScript
Estructuras de control en Angular
Estructuras de Control y Renderizado Dinámico en Angular
Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
Actualización de tareas con Angular y programación inmutable
Uso de ngIf y ngFor para control de flujos en Angular
Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
Manejo Avanzado de Formularios Reactivos en Angular
Validaciones de Inputs en Formularios Reactivos con Angular
Alistando tu aplicación para producción
Validación de formularios y estilos dinámicos en Angular
Activación dinámica de clases en Angular con validaciones
Edición de Tareas Dinámicas en Aplicaciones Web
Estados Computados en Programación Reactiva con Signals
Persistencia de Tareas con LocalStorage en Angular
Compilación y Optimización de Aplicaciones Angular para Producción
Lanzamiento de Aplicaciones con Fiverr Hosting y Angular
Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
Sintaxis y rendimiento de for y switch en JavaScript moderno
Migración Automática a Nueva Sintaxis de Angular
Componentes Reutilizables y Comunicación
Creación de Tienda en Línea con Angular y Tailwind CSS
Creación y Organización de Componentes en Angular
Componentes Reutilizables en Angular: Creación y Maquetado de Productos
Uso de Angular DevTools para Debugging en Angular
Inputs en Angular: Comunicación de Datos entre Componentes
Outputs en Angular: Comunicación del Hijo al Padre
Maquetación de Galería de Productos con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes en Angular
Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
Ciclo de Vida de Componentes en Angular: Eventos Clave
Detección de Cambios en Inputs con ngOnChange en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular
Creación de un Reproductor de Audio con WaveSurfer.js en Angular
Mejoras de la página About en e-commerce: audio y contador dinámico
Mejorando la interfaz del producto
Componentización y Manejo de Datos en Angular
Creación de Headers en Páginas Web con Angular
Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
Implementación de Reactividad en Carrito de Compras con Angular
Gestión de Carrito de Compras en Angular con ngOnChanges
Gestión de Estado en Angular: Solución al InputDrilling
Gestión de Estado Global en Angular con Servicios y Señales
Inyección de Dependencias en Angular: Conceptos y Prácticas
Integración y Datos
Conexión de Angular a REST API usando Fake Store API de Platzi
Creación de Alias para Imports Cortos en Proyectos JavaScript
Transformación de Datos con Pipes en Angular
Creación y uso de pipes personalizados en Angular
Manipulación de Fechas en Angular con Date Functions
Manipulación del DOM con Directivas en Angular
Deployment de Aplicaciones Angular en Vercel
Enrutamiento y Navegación
Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
Implementación de Router Link en Angular para SPA eficiente
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
Uso de RouterLinkActive en Angular para Navegación Activa
Routing en Angular: Creación de Páginas de Detalle de Producto
Consulta dinámica de detalles de producto con Angular y REST API
Galería de Productos Dinámica con Angular y TypeScript
Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en E-commerce
Filtros de Productos con Query Params en Angular
Optimización de Aplicaciones con Lazy Loading y Code Splitting
Optimización de JavaScript en Angular con Lazy Loading
Optimización de Carga de Chunks con Preloading en Angular
Migración de Angular a Nueva Sintaxis con ng generate
Despliegue de Aplicaciones con Verzal en Entornos Productivos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Implementación de Reactividad en Carrito de Compras con Angular
45/71Recursos
¿Cómo añadir productos al carrito de compras?
Cuando un usuario navega por una tienda en línea, es imprescindible poder añadir productos a su carrito de compras. Este proceso requiere una comunicación fluida entre los diferentes componentes de la aplicación, especialmente entre el componente de la lista (donde se muestran los productos) y el componente del carrito de compras. Exploraremos cómo implementar esta funcionalidad utilizando reactividad y comunicación entre componentes padre e hijo.
¿Cómo identificar el componente donde se hace el render de productos?
El componente list component es el encargado de renderizar la lista de productos. Aquí es donde los usuarios podrán ver y seleccionar los elementos que desean añadir a su carrito. Este componente también tiene acceso a otros componentes como AppHeader, que gestiona la interfaz del encabezado.
¿Qué proceso utilizar para almacenar productos seleccionados?
Para almacenar los productos seleccionados, necesitamos crear una señal que funcione como una lista receptora. Esta lista se llenará conforme el usuario seleccione distintos artículos. Además, se manejará un evento add to cart en el que utilizaremos reactividad para actualizar el estado del carrito.
// Actualización de la señal del carrito de compras
function actualizarCarrito(eventoProducto) {
carrito.update(estadoPrevio => [...estadoPrevio, eventoProducto]);
}
¿Cómo suscribirse al estado del carrito de compras?
Para poder mostrar la cantidad de productos en el carrito, es posible suscribirse al estado de dicha estructura de datos. De esta manera, podemos saber cuántos elementos hay en el carrito en cualquier momento.
<h3>Cantidad en el carrito: {{carrito.length}}</h3>
¿Cómo comunicar el estado del carrito al encabezado?
El encabezado o AppHeader es responsable de mostrar el número de productos en el carrito y detalla su contenido. Para enviar el estado del carrito desde el list component al AppHeader, se utiliza un input que permite recibir parámetros desde un componente padre.
<Input()
@required
carrito: Producto[] = [];
¿Cómo renderizar el contenido del carrito en el menú?
En el componente de encabezado, se puede utilizar una directiva como ngFor para renderizar dinámicamente el contenido del carrito en el menú de la aplicación.
<div *ngFor="let product of carrito">
<p>{{product.title}} - {{product.price}}</p>
</div>
¿Cómo añadir un contador al botón del carrito de compras?
Para mejorar la visualización, es útil añadir un contador sobre el botón del carrito. Este mostrará cuántos artículos hay dentro.
¿Cómo personalizar el diseño del contador?
Utilizando estilos CSS, puedes personalizar cómo se ve el contador. Aquí un ejemplo básico:
<button>
<svg><!-- Icono carrito --></svg>
<div class="contador">{{carrito.length}}</div>
</button>
.contador {
position: absolute;
top: 2px;
left: 2px;
background: #000;
color: #FFF;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
font-size: 10px;
}
Reto para mejorar la aplicación
Además de mostrar el número de elementos en el carrito, puedes mejorar la visualización detalla de los productos incluidos. ¡Sé creativo! Añade las imágenes o precios de los productos y calcula el total de todos los elementos del carrito. Este tipo de características no solo mejorarán la experiencia del usuario sino también tu habilidad para manejar datos dinámicos en interfaces.
¡Ánimo! Con estas mejoras, tu aplicación de compras online será mucho más interactiva y funcional.
Aportes 24
Preguntas 5
Ordenar por:
Aquí dejo mi solución, tomé de flowbite un estilo de card para hacer el carrito y cree un método en el componente para calcular el total:
Ts:
```js
getTotalPrice() {
return this.cart.reduce((total, product) => total + product.price, 0);
}
```
HTML:
```html
Aqui les dejo como va quedando el maquetado de mi shopping cart :) 
El codigo que utilice para sumar el total de precios es el siguiente :
`return this.cart.reduce((total, product) => total + product.price, 0);`
Excelente curso, saludos
asi quedo mi carrito :D
Así quedó el mío:
Aquí dejo mi solución usando las características más recientes de Angular
```js
totalPrice = computed(() => this.cart().reduce((total, product) => total + product.price, 0))
```
todos unos masters y yo aun no puedo hacer que el aumente el carrito.
yo lo hice de esta manera :
```js
![Product Image]()
```\
{{ product.title }}
{{ product.price }}
Total: {{totalPrice}}
\
\![Product Image]()
\
\ \
\{{ product.title }}\
\ \
\{{ product.price }}\
\ \
Total: {{totalPrice}}\
\
```js
-
@for(product of cart; track product;){
-
{{product.title}}
${{product.price}}
}
En que momento: this.cart.update((prev) => \[...prev, event]);
se convirtio en una señan?? de donde??
interesante!!
el contador no me funciona
Mi solución
MI solución
Dejo mi solución usando las nuevas características de Angular
```js
totalPrice = computed(() => this.cart().reduce((total, product) => total + product.price, 0))
```
Aquí dejo mi solución usando las características más recientes de Angular
```ts
totalPrice = computed(() => this.cart().reduce((total, product) => total + product.price, 0))
```
Aquí dejo mi solución usando las características más recientes de Angular
totalPrice = computed(() => *this*.cart().reduce((*total*, *product*) => *total* + *product*.price, 0))
Aquí dejo mi solución usando las características más recientes de Angular
`totalPrice = computed(() => ``this``.cart().reduce((``total``, ``product``) => ``total`` + ``product``.price, 0))`
Al momento se ve asi! :XD
Yo hice un getter para obtener el valor de los productos.
```js
get total(): number {
return this.cartProdcuts.reduce((accumulator, product) => {
return accumulator + product.price;
}, 0)
}
```
yo hice un getter para obtener el valor total de los productos
`get total(): number { `
`return this.cartProdcuts.reduce((accumulator, product) => { `
`return accumulator + product.price; `
`}, 0) `
`}`
Cual seria la solucion para agregar el header desde app-component, pero que reciba desde la lista de productos, un producto y agregarlo al carrito de compras?
Si agrego el header en el componente de listado no hay problemas para enviar al input del header, siendo este hijo del componente list.component.
![]()
```tx
getTotalPrice() {
return this.productsInCart.reduce((total, product) => total + product.price, 0);
}
clearCart() {
this.productsInCart = \[];
}
deleteItem(product: Product) {
this.productsInCart = this.productsInCart.filter(item => item.id !== product.id);
}
```
```html
\
@for (product of productsInCart; track $index) {
\
}
@if (productsInCart.length > 0) {
\
```
\
\<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Checkout
\</button>
\\
\<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
(click)="clearCart()">
Clear
\</button>
}
\Total\
\{{ getTotalPrice() }}\
\
Dejo mi solucion
.ts
```js
getTotalPrice() {
return this.cart.reduce((total, product) => total + product.price, 0);
}
```getTotalPrice() { return this.cart.reduce((total, product) => total + product.price, 0); }
View
```js
```\
Total: {{ getTotalPrice() | currency }}
\ \
Total: {{ getTotalPrice() | currency }}\
\
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?