Angular - variable not updated in view once its value is changed in subscribe

Question

If I do something like this:

component.html

<input type="button" (click)="emit()">Click to start emitting!</input>
{{decimalNumber | number:'1.1-1'}}

component.ts

ngOnInit(): void {
 this.myService.decimalNumberEmitter$.subscribe(value => {
   console.log('New value is', value);
   this.decimalNumber = value;
 });
}
emit(){
   this.myService.startEmitting();
}

myService.service.ts

decimalNumberEmitter$ = new BehaviorSubject<number>(0.0);
startEmitting() {
   for (let index = 1; index < 11; index++) {
    this.decimalNumberEmitter$.next(index / 10);
   }
}

Once the previous code is executed console logs:

New value is 0

New value is 0.1

...

New value is 1

However variable (decimalNumber) is not getting updated at all. Its value is 0.0.

I've tried doing something like following in my component html but with no luck:

{{this.myService.decimalNumberEmitter$ | async }}

Also I tried manually detecting the change but with no luck as well - something like following:

constructor(private cd: ChangeDetectorRef) {}
...
... .subscribe( () => {
       [my code]
       this.cd.markForCheck();
    }

Anyone can shed some light on this?? Thanks in advance for any help!

@MichaelD I changed it as you suggested and now its working just fine! I guess I'll have to learn a bit more about ChangeDetection in Angular. Thank you so much I really appreciate it !! — Exerlol
– Exerlol, Commented May 26, 2020 at 19:29

Quentin Grisel · Accepted Answer · 2020-05-26 17:54:02Z

1

On my repro on stackblitz it works fine, but i cannot see what's different haha.

Here is the code just in case.

service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class MyServiceService {
  decimalNumberEmitter$ = new BehaviorSubject<number>(0.0);

  startEmitting() {
    for (let index = 1; index < 11; index++) {
      this.decimalNumberEmitter$.next(index / 10);
    }
  }
}

component.ts:

import { Component, OnInit } from "@angular/core";
import { MyServiceService } from "./my-service.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  decimalNumber;
  constructor(private _myService: MyServiceService) {}

  ngOnInit() {
    this._myService.decimalNumberEmitter$.subscribe(val => {
      this.decimalNumber = val;
      console.log("decimalNumber = ", this.decimalNumber);
    });
  }

  emit() {
    this._myService.startEmitting();
  }
}

component.html:

<input type="button" (click)="emit()" value="Click to start emitting!">
{{decimalNumber | number:'1.1-1'}}

I just changed the input to take a value (could make it like <button..></button> as well).

answered May 26, 2020 at 17:54

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Exerlol Over a year ago

Hmmm that's wierd, as I answered in comment above, I couldn't get this to work until I used changeDetection: ChangeDetectionStrategy.OnPush as Michael suggested. After that change it started working for me. But thanks for your effort and help anyways, cheers!

Quentin Grisel Over a year ago

There must be something different in your code. I didn't change the strategy on the repro. Maybe you can add more of your code in your question so we can check it ? Because changing the strategy looks more like a dirty fix than a real answer to your problem

satanTime · Accepted Answer · 2020-05-27 08:02:19Z

0

try to use the stream in the template, then you don't need ngOnInit with this.myService.decimalNumberEmitter$.subscribe at all.

<input type="button" (click)="emit()">Click to start emitting!</input>
<ng-container *ngIf="myService.decimalNumberEmitter$ | async as decimalNumber">
  {{decimalNumber | number:'1.1-1'}}
</ng-container>

answered May 27, 2020 at 8:02

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

Collectives™ on Stack Overflow

Angular - variable not updated in view once its value is changed in subscribe

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related