La idea es ir sumando la cantidad de productos que hay en el carrito de compras. Para esto tengo mi servicio cart.service.ts
con la siguiente funcion:
private bookArray: Book[] = [];
public cart = new BehaviorSubject<Book[]>([]);
public cart$ = this.cart.asObservable();
constructor() { }
addCart(book: Book){
this.bookArray = [...this.bookArray, book];
this.cart.next(this.bookArray);
}
Ahora muestro el total de productos que hay en el carrito desde el component.uno.ts
de la siguiente manera:
total$: Observable<number>;
constructor(
private breakpointObserver: BreakpointObserver,
private cartService: CartService
) {
this.total$ = this.cartService.cart$
.pipe(
map(libros => libros.length)
);
}
ngOnInit(): void {
}
Aca muestro el resultado en la view component.uno.html
<a class="btn-carrito" mat-raised-button color="warn" [matBadge]="total$ | async" matBadgeColor="warn">
<mat-icon class="icon-shopping-cart">shopping_cart</mat-icon>
Carrito
</a>
Esto funciona, pero si se refresca la página, los datos del total de productos en el carrito se pierden.
Una forma de evitar esto seria usando por ejemplo localStorage
, pero tengo entendido o mal entendido, que con la programación reactiva no seria necesario.