Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Clase 64 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Cómo aplicar el pipe de moneda en Angular?

En el desarrollo web, es crucial ofrecer una interfaz limpia y comprensible para los usuarios. Al mostrar precios, por ejemplo, podemos mejorar la experiencia del usuario formateando los valores monetarios. Angular facilita esta tarea a través del pipe de currency. En este contexto, usar el pipe de currency permite que los precios se muestren de manera estandarizada y acorde con el formato monetario deseado:

<span>{{ producto.precio | currency:'USD':true:'1.2-2' }}</span>

¿Cómo agregar productos al carrito con un servicio Angular?

Integrar un servicio de carrito de compras en Angular es esencial para manejar el estado de los productos seleccionados por los usuarios. Esto garantiza que los productos sean almacenados y gestionados de manera efectiva.

Inyección de dependencias: Primero, asegúrate de inyectar el CartService en el componente deseado, típico de Angular para acceder a las funcionalidades del servicio.
```
import { CartService } from './cart.service';

constructor(private cartService: CartService) {}
```
Crear el método para añadir al carrito: Asígnale un nombre intuitivo como addToCart, el cual interactuará directamente con el CartService.
```
addToCart() {
  if (this.producto) {
    this.cartService.addProduct(this.producto);
  }
}
```
Este método verifica que el producto no sea nulo antes de enviarlo al servicio del carrito.
Conectar el método al botón: Enlaza la función al evento de clic en el botón "Add to Cart".
```
<button (click)="addToCart()">Add to Cart</button>
```
Persistencia del estado: Gracias a la naturaleza reactiva del servicio, el estado del carrito persiste incluso cuando se navega a otras partes del sitio.

¿Cómo resaltar la imagen seleccionada en una galería?

Añadir una indicación visual para la imagen activa en una galería puede mejorar la navegación y la usabilidad.

Identificar la imagen seleccionada: A través de una clase dinámica en Angular, podemos cambiar el estilo de la imagen activa.
```
<img *ngFor="let imagen of imagenes" [class.selected]="imagen === imagenActiva" [src]="imagen">
```
Definir estilos CSS: Implementa un borde distintivo a la imagen que tenga la clase .selected.
```
.selected {
  border: 2px solid red;
}
```
Interactividad de la selección: Al hacer clic en una imagen, actualiza imagenActiva a la imagen seleccionada, recalculando así la clase dinámica.
```
setImagenActiva(imagen) {
  this.imagenActiva = imagen;
}
```

Estas mejoras no sólo enriquecen la experiencia del usuario, sino que también demuestran buenas prácticas en el desarrollo front-end con Angular. Implementa estas técnicas y verás cómo avanzas en la creación de interfaces de usuario efectivas y eficientes. ¡Sigue explorando y desarrollando tus habilidades en Angular para llevar tus proyectos al siguiente nivel!