Angular 16: Troubleshooting RxJs Problem with Updating Total in Header Component

Question

Angular 16: Troubleshooting RxJs Problem with Updating Total in Header Component

Hello, I'm facing an issue with my Observable and need some guidance.

Currently, I have a functional cart and checkout system that works well when adding items to the cart. It successfully manages total items and costs. These components are located as siblings within the shopping-cart folder structure. However, I am experiencing an inconsistency where the total is only updated correctly after reloading the page. There is an image next to the shopping cart which fails to update the total number of items until a reload is performed.

Here is a visual representation: https://i.sstatic.net/f5yCi2S6.png

The problematic area lies in the header component which resides in a separate folder named UI in the hierarchy. Despite attempting various solutions, the issue persists. Understanding this will not only help me resolve the current problem but also assist in implementing other updates in the header component such as displaying user login information without requiring a page reload. Any advice on how to rectify this through subscription handling would be highly appreciated. Below is the code snippet for the header component:

header.component.ts

   Component({
     providers:[NgbModal, NgbModalConfig, ProductItemComponent, ProductListComponent, 
     CartItemComponent, EventEmitter, CartComponent, WishlistListComponent], 
     //NgbModal is a service for modal 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)

   {

   //Attempted this approach without success      
    // 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')
    
  }

}

Only the relevant parts of the code were shared. If anyone could provide insights into what might be missing or causing the issue, it would be greatly appreciated. Thank you in advance.

angular typescript rxjs5

Answer 1

Answer №1

To enable data sharing between components, it is recommended to utilize a dedicated service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Cartitems } from './cartitems.interface'; // Make sure the interface is defined correctly

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cartItemsSource = new BehaviorSubject<Cartitems[]>([]);
  currentCartItems = this.cartItemsSource.asObservable();

  constructor() { }

  updateCartItems(cartItems: Cartitems[]) {
    this.cartItemsSource.next(cartItems);
  }
}

It's advisable to keep services for data sharing separate from those handling API requests to retrieve data from a database.

The following service is responsible for fetching saved items from the db:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

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

  constructor(private http: HttpClient, private dataService: DataService) { }

  getCartItems() {
    this.http.get<Cartitems[]>(this.rootUrl + '/getProducts/cartitems').subscribe(
      data => {
        this.dataService.updateCartItems(data);
      },
      error => {
        console.error('Error fetching cart items', error);
      }
    );
  }
}

The service that retrieves data from the db can rely on the data-sharing service so that fetched data can be published through the sharedata service.

The next component handles the request for carts from the backend. It serves as the main page where product retrieval occurs, or it could even function as a cart component. Any section requiring cart item retrieval different from the header component should use this component. If there are items you intend to add to your cart within this component, after adding them, utilize the dataService to update and publish the cart items. This ensures the header reflects the updates as well.

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    this.cartService.getCartItems();
  }
}

This illustrates how to subscribe to the DataService in the HeaderComponent to facilitate shared data communication among components. Whenever another component in your Angular application updates the DataService, all subscribers will receive notifications.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  cartItems: Cartitems[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.currentCartItems.subscribe(
      cartItems => {
        this.cartItems = cartItems;
      },
      error => {
        console.error('Error getting cart items', error);
      }
    );
  }
}

Answer 2

To enable data sharing between components, it is recommended to utilize a dedicated service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Cartitems } from './cartitems.interface'; // Make sure the interface is defined correctly

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cartItemsSource = new BehaviorSubject<Cartitems[]>([]);
  currentCartItems = this.cartItemsSource.asObservable();

  constructor() { }

  updateCartItems(cartItems: Cartitems[]) {
    this.cartItemsSource.next(cartItems);
  }
}

It's advisable to keep services for data sharing separate from those handling API requests to retrieve data from a database.

The following service is responsible for fetching saved items from the db:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

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

  constructor(private http: HttpClient, private dataService: DataService) { }

  getCartItems() {
    this.http.get<Cartitems[]>(this.rootUrl + '/getProducts/cartitems').subscribe(
      data => {
        this.dataService.updateCartItems(data);
      },
      error => {
        console.error('Error fetching cart items', error);
      }
    );
  }
}

The service that retrieves data from the db can rely on the data-sharing service so that fetched data can be published through the sharedata service.

The next component handles the request for carts from the backend. It serves as the main page where product retrieval occurs, or it could even function as a cart component. Any section requiring cart item retrieval different from the header component should use this component. If there are items you intend to add to your cart within this component, after adding them, utilize the dataService to update and publish the cart items. This ensures the header reflects the updates as well.

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    this.cartService.getCartItems();
  }
}

This illustrates how to subscribe to the DataService in the HeaderComponent to facilitate shared data communication among components. Whenever another component in your Angular application updates the DataService, all subscribers will receive notifications.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Cartitems } from './cartitems.interface';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  cartItems: Cartitems[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.currentCartItems.subscribe(
      cartItems => {
        this.cartItems = cartItems;
      },
      error => {
        console.error('Error getting cart items', error);
      }
    );
  }
}

Answer 3

Answer №2

Big shoutout to Tomescu for shedding light on shared services! Even though it didn't quite fit my situation, it could be the perfect solution for someone else. I was too deep into the structure of my code to make the necessary adjustments. However, I did discover a cool trick to refresh totals from the header icon using Reactive Angular with RXJs auto refresh using a subject. Instead of modifying my own code, I decided to share a video link because every codebase is unique. I've received valuable guidance multiple times in this developer forum and want to pay it forward by sharing knowledge. Hopefully, this link will benefit many others as well. Link: Check out the video here

Answer 4

Big shoutout to Tomescu for shedding light on shared services! Even though it didn't quite fit my situation, it could be the perfect solution for someone else. I was too deep into the structure of my code to make the necessary adjustments. However, I did discover a cool trick to refresh totals from the header icon using Reactive Angular with RXJs auto refresh using a subject. Instead of modifying my own code, I decided to share a video link because every codebase is unique. I've received valuable guidance multiple times in this developer forum and want to pay it forward by sharing knowledge. Hopefully, this link will benefit many others as well. Link: Check out the video here

Angular 16: Troubleshooting RxJs Problem with Updating Total in Header Component

Answer №1

Answer №2

Similar questions

Tips for enabling the TypeScript compiler to locate bokeh's "*.d.ts" files

Can you explain the execution process of this Http.post method and provide details about the code path it follows

Ensure Angular Reactive Forms do not include empty fields when submitting the form

Transmit the timestamp information to Supabase using Next.js

The async and await functions do not necessarily wait for one another

What is the process for importing Angular Material into a project?

Issue with Angular 2 in Visual Studio 2013: Pressing Ctrl+K+D causes formatting to change to lowercase

Restricted inclusive collection utilizing embedded identifier

In Express, the async middleware is bypassed, allowing the next route to be executed seamlessly

Typescript's Class-method concept

Ways to mimic an object and confirm that a specific parameter was passed to the mimic

Getting an error message with npm and Typescript that says: "Import statement cannot be used outside

What steps should I take to troubleshoot an error with accessing 'request.body' within an async function that is returning a 'ReadableStream' object instead of the data I was expecting?

Error: Undefined object trying to access 'vibrate' property

Tips for stopping TypeScript from halting Webpack compilation due to undefined variables stated in Webpack's ProvidePlugin

The file node_modules/@types/node/index.d.ts encountered an error with code TS1084, indicating that the 'reference' directive syntax used is invalid

Angular automatically scrolls to the top of the page when clicking on any part of the bottom

Encountering a TypeScript error while calling a Vue lifecycle hook method

Can you explain the purpose of the .json() function in Angular2?

What is the best way to preserve all props while typing a styled component in Typescript?