Angular BehaviorSubject pass value to a component

I am in need of some help and assistance with BehaviorSubject in Angular. I have an app that has a footer component in which I would like to display the number of products in cart.

I get the amount of products in cart and other cart data over API. Here is how the cart data from API looks like:

shopping-cart.ts:

export interface ShoppingCart {
total_products: number;
totals: number;
notes: string;
shipping_method: string;
}


Here is the API call to get all the cart data:

cart.service.ts:

getCart() {
return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
switchMap(token => {
const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
return this.httpClient.get<ShoppingCart>(`${environment.apiUrl}cart`, {headers, observe: 'response'});
}),
catchError(err => {
console.log(err.status);
if (err.status === 400) {
console.log(err.error.message);
}
if (err.status === 401) {
this.authService.logout();
this.router.navigateByUrl('/login', {replaceUrl: true});
}
return EMPTY;
}),
);
}


Here is the code in cart.page.ts where I am getting the cart data:

getCart() {
this.getCartSubscription = this.cartService.getCart().subscribe(
(data: any) => {
const productsData = data.body.products;
const totalProducts = data.body.total_products;
const totalCartPrice = data.body.totals;
this.products = productsData.map(products => products);
this.totalProducts = totalProducts;
this.totalCartPrice = totalCartPrice;
console.log('Products in cart:', data.body);
},
error => {
console.log('Error', error);
});
}


Here is how I was attempting to send data to my footer component: in the cart.service.ts file I have added this code:

shopingCartData: ShoppingCart;

private cartQtySource = new BehaviorSubject(this.shopingCartData);
currentValue = this.shopingCartData.total_products;

constructor(
...some other code...
) { }

getCartQty(qty: number) {
this.cartQtySource.next(qty);
}


How do I send the data of number of products in the cart from cart page to the footer component so I always get the current amount?

Continue reading...