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

Error message: When using Vue CLI in conjunction with Axios, a TypeError occurs stating that XX

How to activate form autofill in an Angular app

How can we prevent new chips (primeng) from being added, but still allow them to be deleted in Angular 2?

Using SignalR to implement CRUD operations within a Hub or Controller

Every time I try to run my Angular app, it crashes. I've already tried reinstalling Node and rebooting

What is the best way to scroll a specific element within a div container?

The data type 'Observable<{}[]>' cannot be matched with the type 'AngularFireList<any>'

Error in Angular: Trying to access the property 'id' of an undefined value

How to retrieve the displayed text of a selected option in an Angular 7 reactive form dropdown control instead of the option value

Tips for sorting/merging/consolidating data in Angular

Having trouble with sending values to Angular 7 components' HTML pages

Troubleshooting Angular2: SVG Disappearing Upon Page Reload with PathLocationStrategy

Encountering this issue: Unable to access the property 'length' of an undefined variable

Uploading Files with Angular 2 using AJAX and Multipart Requests

Angular form: Choose an option by selecting it and clicking on a button

What is the best way to remove a polygon from an agm-map?

Since transitioning my project from Angular 7.2 to Angular 8, I noticed a significant threefold increase in compile time. How can I go about resolving this issue

Determining function return property type in Typescript by mapping interface argument property

Employ a type as a function in Typescript programming

Ways to ensure the React prop type matches the value provided when using typescript?