“Correcto refresco de valores utilizando rxjs en Angular”

Me pregunto cómo actualizar los datos en el componente si se produce alguna actualización.
En mi panel principal tengo una pestaña de carrito que muestra el número actual de productos en el carrito.
Esto se obtiene mediante un endpoint del backend.

Mi componente de navegación del carrito:

@Component({
  selector: 'navigation-cart',
  templateUrl: './navigation-cart.component.html',
  styleUrls: ['./navigation-cart.component.scss']
})
export class NavigationCartComponent extends implements OnInit {

private cartItemCount$: Observable<number>;

public cartItemsCount: number;

constructor(
    public eventbus: EventBusService,
    public cartService: CartService
    ) {
    this.eventbus.on('refreshCartCount', (state: any) => {
      console.log('tal vez aquí debería actualizar')

});


}
  ngOnInit() {
    this.cartItemCount$ = this.cartService.cartItemCount();
    this.cartItemCount$.subscribe(cartCount => {
      console.log(cartCount['productsCount'])
      this.cartItemsCount = cartCount['productsCount']
    }
    )
  }
}

La propiedad cartItemsCount es el número actual de elementos en el carrito del backend.

Servicio de carrito:

@Injectable({
  providedIn: 'root'
})
export class CartService {

public cartItemCount(): Observable<number> {
    console.log('cartItemCount')
    return this.http.get<any>(http://localhost:8000/basket/count);
  }

}

Si agrego un producto al carrito en otro componente, ¿cómo actualizo el número de elementos en el carrito?
Al agregar un producto al carrito, ¿debo emitir un evento que atrapo en mi componente? ¿Cómo debe ser esta emisión?
Usando Ngrx para almacenar el estado actual del carrito:

ngOnInit(){
store.dispatch(new cartCount());
}

y actualizo este valor en cada actualización.

Apenas estoy empezando con Angular. ¿Cómo debería hacerse correctamente?