Angular 16 RxJs Issue Updating Total on Header Component

Hello I have an question regarding my Observable.

I have a cart as well as checkout that works fine when I add a another items to cart it handles total items as well as total cost. These components are siblings within the shopping-cart folder hierarchy , I mention this because I'm not sure if this is the reason I only get correct total after reload. I have a image next to the shopping cart which is not updating the total items when I add to cart only when I reload.

Like so:

This is located in the header component which is in a totally different the folder called UI in the hierarchy. The things I have tried thus far isn't solving my issue, I'm close but not on the money. Understanding this will help me figure out other updates in the header component such has as user login name with out doing a reload. Pointing me in the right direction with the subscribe would be greatly appreciated. Code snippet for header component included:

header.component.ts

   Component({
     providers:[NgbModal, NgbModalConfig, ProductItemComponent, ProductListComponent, 
     CartItemComponent, EventEmitter, CartComponent, WishlistListComponent], 
     //NgbModal is a service for mpodal dialog
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
  })

     constructor( private msg: MessengerService, private 
     cartService:CartService,private accountService: AccountService, private 
     modalService: NgbModal, private config: NgbModalConfig,
     private searchService:SearchService, private auth:AuthService, public 
     prodcomp:ProductItemComponent,
     private _imageService:ImageService, private formBuilder: 
     UntypedFormBuilder,private alertService: AlertService,  private _ 
     wishlistitemService: WishlistItemService)

   {

   //Tried to do something like this with no luck      
    // this.cartService.itemTotals$.subscribe((v: any) => (this.itemTotal$ = v));
        
   }

     ngOnInit(): void {
       this.loadCartItems();
    }


     loadCartItems(){
      this.cartService.getCartItems().subscribe((item) => {
      this.cartitems$ = item;
      // alert("A cart item" + item);
      this.calNumberOfItems();
     })
   }



   calNumberOfItems(){;
     for(this.qty=0; this.qty < this.cartitems$.length; this.qty++){
      this.qty
   }
      this.itemTotal$ = this.qty; 

  }

header.html

 </span><span ><i class="fas fa-circle" aria-hidden="true" style="font-size: 25px; 
 margin-top: -20px; cursor:none; color:#1D004F;"><strong style="color:#ffffff; margin- 
 left: -18px; padding-top: 0; font-size:10px; text-align: center; line-height: 20px;"> 
 {{itemTotal$}}</strong></i></span></a>            

cart.service.ts

  export interface Cartitems{
  _id: string,
  name: string,
  size: string,
  qty: number,
  price: number,
  imageUrl:string
}



  @Injectable({
  providedIn: 'root'

 })

export class CartService {

  
 rootUrl = 'api';    

 cartitems$= new BehaviorSubject<Cartitems[]>([]);   //this works
  //itemTotals$  = new BehaviorSubject<Cartitems[]>([]);



  getCartItems(): Observable<Cartitems[]> {
   return this.http.get<Cartitems[]>(this.rootUrl + '/getProducts/cartitems')
    
  }

}

I only added relevant code if someone could explain to me what I'm missing I would greatly appreciated Thanking you advance

I want to thank Tomescu for explaining to me about shared services, although this didn't work for me but it doesn't mean it won't work for some one else. I was to invested in the way my code was structured to make all the nectary changes that was needed. I do wanted to share this. there is a way to refresh my totals from the header where that icon resides. It is called Reactive Angular with RXJs auto refresh using a subject. Rather than update my code I would rather share video link, as I stated everyone's code is different. This forum is to help developers, I know I have been pointed(helped) in the right direction a number of times. I hope this linked helps many. Link: enter link description here