Sign up for notifications about updates to a variable within an Angular service

Question

Sign up for notifications about updates to a variable within an Angular service

Is there a way to track changes in the value of a variable within an Angular service?

I've been searching for a solution, but haven't been able to find one yet.

In my layout's header component, I have a counter that displays the number of items in the cart. This count is linked to the variable simsInCartLength.

Within my service, I manage adding and removing items from the cart. There's a variable called noSims that stores the current length of the cart item array.

How can I receive notifications when the service variable noSims changes?

Component Code:

simsInCartLength = this.cartService.noSims;

Service Code (the variable updates whenever items are added or removed):

this.noSims = this.simsInCart.length;

Appreciate any help!

angular typescript rxjs

Answer 1

Answer №1

To improve the functionality of your service, consider implementing BehaviorSubject in the following way:

private cartItemCount = new BehaviorSubject<number>(0);
cartItem = [];

getCartItemCount(){
   return this.cartItemCount.asObservable();
}

addToCart(obj: any){
   this.cartItem.push(obj);
   // Implement necessary operations to add item to cart and then use next() method of the observable to emit the new value event
   this.cartItemCount.next(this.cartItem.length)
}

// Implement similar code for removeFromCart()

Furthermore, ensure that you subscribe to this event in your component:


ngOnInit(){
  this.cartService.getCartItemCount().subscribe(len => {
     console.log(len) // New length of your cart will be displayed here
     this.simsInCartLength  = len;
  })
}

Answer 2

To improve the functionality of your service, consider implementing BehaviorSubject in the following way:

private cartItemCount = new BehaviorSubject<number>(0);
cartItem = [];

getCartItemCount(){
   return this.cartItemCount.asObservable();
}

addToCart(obj: any){
   this.cartItem.push(obj);
   // Implement necessary operations to add item to cart and then use next() method of the observable to emit the new value event
   this.cartItemCount.next(this.cartItem.length)
}

// Implement similar code for removeFromCart()

Furthermore, ensure that you subscribe to this event in your component:


ngOnInit(){
  this.cartService.getCartItemCount().subscribe(len => {
     console.log(len) // New length of your cart will be displayed here
     this.simsInCartLength  = len;
  })
}

Sign up for notifications about updates to a variable within an Angular service

Answer №1

Similar questions

Determine whether the ng bootstrap modal has already been opened

Iterate through the Ionic3/Angular4 object using a loop

A guide on retrieving bytecode from a specific PDF using Angular

Tips for troubleshooting a React Native project built with Expo and utilizing TypeScript

Having trouble with passing data using @Input in Angular 5

NPM Package: Accessing resources from within the package

Having trouble importing a TypeScript module from the global node_modules directory

Build a Node.js application using TypeScript and all necessary dependencies

How can I populate dropdown options from an API in a react JS project using typescript and react saga?

Typescript: Why Lines Are Not Rendering on Canvas When Using a For-Loop

Adding a tooltip to an Angular Material stepper step is a great way to provide

Angular application automatically adding 'localhost' before the backend API endpoint

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

Firebase data not appearing on screen despite using the async pipe for observables

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

Navigating to specific rows in a primeng virtualscroll table using the scrollToIndex

Why is my Typescript event preventDefault function ineffective?

Unable to retrieve rxjs resource

Using constant variables as arguments in functions in TypeScript

Set an array to a JSON object as a fresh entity