How get initial value from an Observable Angular 8+

Question

I have a page form with values already setted, previous and next button elements.

At ngOnInit, I'm getting a List with 3 items from an observable , as initial value - sometimes I get 4 items .

Before I go to the next page I have to click, necessarily , on a button that will call the function calculate() that will make a request and my observable List will have 4 items.

So, when I click on next button onNextButton() I would like to use the initial value to compare with the current, if they are the same, or check if this list had any changes (any incrementing).

The way that I'm doing, I'm not manage to keep/store the first value. On next button click, i'm getting the updated value, instead the previous.

My code:

export class PageComponent implements OnInit {

   questions$: Observable<any[]>;
   hasChange: boolean;

   ngOnInit() {

     // GETTING INITIAL VALUE
     this.questions$.subscribe((quest: any[]) => {
        this.hasChange = quest.length > 3 ? true : false
     });
   }

   calculate() {
      // calling a request
      // at this point, my observable will update and will have 4 items.
   }

   onNextButton() {
      if (hasChange) {
         // submit()
      } else {
         // navigate()
      }
   }
}

So, in this scenario the initial value should be a list w/ 3 items, but i'm getting 4 and its breaking my logic...

How do I get the previous value of Observable and store it in a variable? Or, how can I detect any changes?

I tried behavioursubject and pairwise from RxJS, but I'm not sure how to apply it.

Thank you!!!

Answer 1

As you stated, you must use ReplaySubject or BehaviourSubject, since Observable does not have that "memory" for retrieve last emitted value. ReplaySubject and BehaviourSubject are similar, both send last emitted value on subscription, but ReplaySubject only emits last emitted value on subscription and BehaviourSubject stores a list of last emitted values (configurable size). I'll be using BehavoiurSubject since is a bit more complete.

Just replace the Observable you were using with the BehaviourSubject, and keep in mind that you must definde that memory size when you instance the class. For example, you could create a method that returns a BehaviourSubject with last boolean stored like this:

private fooBehaviourSubject;

function ngOnInit: void{
    this.fooBehaviourSubject = new BehaviorSubject<boolean>(1); // 1 is the "stack" size
    this.fooBehaviourSubject.next(true); // <- First value emitted here
}

function getValue: BehaviourSubject<boolean> {
    return this.fooBehaviourSubject;
}

When you subscribe like this:

getValue().subscribe(e => console.log(e))

the last stored value (true) automatically will be retrieved and shown in console, but ensure you at least have emitted one first, or you wont execute the subscription until one next method is called. After that, every update of the value will trigger that console.log with the updated value.

---

Applied to your code, you could create the BehaviourSubject in the ngOnInit, subscribe to it also in the ngOnInit to define the callback event, and call the next method of the BehaviourSubject once the list must be updated.

Answer 2

export class PageComponent implements OnInit {

    questions$: Observable<any[]>
    hasChange: boolean

    ngOnInit() {

        // GETTING INITIAL VALUE
        let hasSome = false

        this.questions$
            .subscribe((quest: any[]) => {
               
               // ### This is works for me!
               hasSome = quest.some(item => item.id === 'whatever')
               
               // ### This is the way that I was trying to do. 
               // ### Is's not wrong but didn't work for me =( 
               // this.hasChange = quest.some(item => item.id === 'whatever')
        )
        this.hasChange = hasSome
    }

    calculate() {
        // calling a request
        // at this point, my observable will update and will have 4 items.
    }

    onNextButton() {
        // ### Now this.hasChange is assigned once and where I want, OnInit.
        if (this.hasChange) {
            // submit()
        } else {
            // navigate()
        }
    }
}