CODEWITHSUNDEEP
angularrxjs
Chanwoo Park
Chanwoo Park

Reputation: 246

How to run tap operator when any given observables emits value?

const annotationEvent = event1$.pipe(
      filter(({ type }) => type === DemoEvent.select || type === DemoEvent.unselect),
      delay(100),
      throttleTime(50),
      tap(_ => doSomething())
    );
    const imageApplicationEvent = event2$.pipe(
      filter(({ type }) => type === TestEvent.selectItem || type === TestEvent.unselectItem),
      delay(100),
      throttleTime(50),
      tap(_ => doSomething())
    );
forkJoin([annotationEvent, imageApplicationEvent]).subscribe();

Above code, event1$ and event2 is a long live Observable that is returned by behaviorSubject.asObservable. As you can see, after filtering the type of emitted value, there are duplicated code written. Im trying to run doSomething method when any given Observables(in this scenario it would be event1$ and event2$) emits value. I assumed that piping the forkJoin operator tap operator would do the same thing with more simpler code. like this

const annotationEvent = event1$.pipe(
      filter(({ type }) => type === DemoEvent.select || type === DemoEvent.unselect)
    );
    const imageApplicationEvent = event2$.pipe(
      filter(({ type }) => type === TestEvent.selectItem || type === TestEvent.unselectItem)
    );
forkJoin([annotationEvent, imageApplicationEvent]).pipe(
      delay(100),
      throttleTime(50),
      tap(_ => doSomething())).subscribe();

But it seems it's not working as I expected and I assume that forkJoin emit the last emitted value only when all given observable completes, and since event1$ and event2$ does not completes it did not run as I expected. I tried zip and combineLatest or etc operators that groups observable but non of them achieves what I want to do.

conclusion, are there any possible ways to run a code when any given of observables emits value?

Upvotes: 1

Views: 225

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

I think that you are looking for the 'merge' operator, e.g.

const annotationEvent = event1$.pipe(
      filter(({ type }) => type === DemoEvent.select || type === DemoEvent.unselect)
    );

const imageApplicationEvent = event2$.pipe(
      filter(({ type }) => type === TestEvent.selectItem || type === TestEvent.unselectItem)
    );

merge(annotationEvent, imageApplicationEvent).pipe(
      delay(100),
      throttleTime(50),
      tap(_ => doSomething())).subscribe();

Upvotes: 1

Related Questions