CODEWITHSUNDEEP
javascriptangularrxjsobservable
Vatsal
Vatsal

Reputation: 2128

Trigger RXJS Stream only on certain condition

I have two tabs on my UI.

First tab (default), there is one input textbox and when user submits it, a http call is sent to server

Second tab - Same input textbox + list of checkboxes out of which at least one has to be selected. Then on submit http call is sent.

Both of these cases work fine by themselves.

Now, the problem is - I want my stream to trigger only when form is submitted and not on tab switch. However, I do want the value of tab clicked. However, currently after the form is submitted once, its being triggered on every tab switch as well ( probably because then it has both selected tab & account available).

Below is the code snippet.

I am not sure what i am missing. Any suggestions are highly appreciated.

detailsByAccount$: Observable<MyType> = this.selectedTab$.pipe(
switchMap((tab) => {
   //account$ = account submitted through form
  return this.account$.pipe(
    switchMap((account) => {
      alert(`${account} -------- ${tab}`);
      // Server Http call to get the response
      if (tab === 'X') {
        return this.myService.getDetails(account)  
      }
      return this.myService.getOtherDetails(account);
    })
  );
}),
);

Upvotes: 3

Views: 1085

Answers (2)

bryan60
bryan60

Reputation: 29355

i would do it like this:

  detailsByAccount$: Observable<MyType> = this.account$.pipe(
    withLatestFrom(this.selectedTab$),
    switchMap(([account, tab]) => {
      alert(`${account} -------- ${tab}`);
      // Server Http call to get the response
      if (tab === 'X') {
        return this.myService.getDetails(account)  
      }
      return this.myService.getOtherDetails(account);
    })
  );

the withLatestFrom operator will not trigger the stream but when account$ is triggered, it will grab the latest value from selectedTab$ and pass it along. It will not trigger though if selectedTab$ has not emitted at least once.

Upvotes: 1

Vatsal
Vatsal

Reputation: 2128

So for this scenario, turns out I had to use BehaviorSubject and it made things little tricky. Below is the answer that I ended up using. Any improvements/optimizations are always appreciated.

Premise of Question - Two tabs – Input form. Input form with a list of checkboxes.

There is a different validator for different tabs. Whenever the form validation passes, form submit is enabled.

Two important things to consider are – Tab has to be selected and the stream should be triggered only after form is submitted.

My first approach was mentioned in the question. However, the issue was http call was being made on every tab switch.

Now, to fix it what I did was – I refactored it so it’s triggered always on account submitted rather than tab selected and then I used take(1) in the inner stream, so it completes itself every time. After I did this this issue got resolved.

detailsByAccount$: Observable<MyType> = this.account$.pipe(
  switchMap((account) => {
    return this.selectedTab$.pipe(
      switchMap((tab) => {
        alert(`${account} -------- ${tab}`);
        // Server Http call to get the response
        if (tab === 'X') {
          return this.myService.getDetails(account);
        }
        return this.myService.getOtherDetails(account);
      }),
  take(1)
 );
})
);

Hope this helps someone. If anyone has any better suggestions, please let me know.

Happy Learning

Vatsal

Upvotes: 0

Related Questions