rxjs subscription issue while updating the component UI

Issue

This Content is from Stack Overflow. Question asked by Ketan Bhavsar

I am currently working on understanding the rxjs Observable, Observer and Subscription.
To understand the same I wrote a sample code for updating UI with the random numbers with the interval of 1 second. My goal is to work on updating the multiple components from a single observable. But I stuck at the point where a component variable is not updating with the subscription’s next observer. My code is as below,

https://stackblitz.com/edit/angular-ivy-z11va4?file=src/app/app.component.ts

when I enable this.updateNumber(num) it says method is not available. I believe issue is with this key word. How to reference class variable and methods from next()?

this.number1 = 0;

clickSix() {
        this.number1 = 1;
    
        const randomGeneratorOnIntervalObservable = new Observable(
          this.obsCheckService.randomGeneratorOnIntervalSubscription
        );
    
        randomGeneratorOnIntervalObservable.subscribe({
          next(num) {
            console.log(num);
            // this.updateNumber(num);
            this.number1 = num;
          },
          complete() {
            console.log('Finished sequence');
          },
        });
        this.number1 = 2;
      }
    
      updateNumber(num: number) {
        this.number1 = num;
      }



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?