how to update value from one component to another? - angular7

Question

I am developing a shopping cart module using angular on front-end. I have two component. One is NavBar Component and other is ProductCard Component. I want to update total quantity in NavBar Component when click add to cart button in ProductCard Component.But total quantity is not updating in NavBar Component when click on add to cart on ProductCard Component.Total quantity is only updated when i refresh the page.
I am using BehaviourSubject to communicate between component. but no result.
shopping-cart.services.ts
#Injectable()
export class ShoppingCartService {
qtyInCarts = new BehaviorSubject(this.countTotalQuantity());
getTotalCartQty = this.qtyInCarts.asObservable();
constructor(private globalService: GlobalService,
private http: HttpClient) {}
setTotalCartQty(qty: number) {
this.qtyInCarts.next(qty);
}
countTotalQuantity() {
const cartId = JSON.parse(localStorage.getItem('cartId'));
let totalQty = 0;
if (cartId) {
this.getCarts()
.subscribe(shopping_cart => {
const carts = shopping_cart['carts'];
for (let i = 0; i < carts.length; i++) {
totalQty += carts[i].qty;
}
this.setTotalCartQty(totalQty);
return totalQty;
});
}
return totalQty;
}
}
bs-navbar.component.ts
export class BsNavbarComponent implements OnInit {
totalQtyInCarts: number;
constructor(private shoppingCartService: ShoppingCartService) {}
ngOnInit() {
this.shoppingCartService.getTotalCartQty
.subscribe((qty) => {
this.totalQtyInCarts = qty;
console.log(this.totalQtyInCarts);
});
}
}
product-card.component.ts
constructor(private cartService: ShoppingCartService) {}
ngOnInit() {
this.cartService.getTotalCartQty
.subscribe((qty) => {
this.totalQtyInCarts = qty;
});
}
addToCart() {
this.cartService.addProductToCart(this.product);
this.totalQtyInCarts += 1;
this.cartService.setTotalCartQty(this.totalQtyInCarts);
console.log(this.totalQtyInCarts);
}
I expect the navBar qty will be updated when i click the button add to cart on ProductCardComponent.