Q:

Using 2 observables with 1 output observable

How can I have these 2 observables streamA$ and streamB$ run concurrently with click events?
The code I've got doesn't work properly: if I click A, then B while A is still in progress, B cancels A and vice versa. How can I have the 2 in parallel so if I click B while A is in progress, A continues and the result is assigned to images$ then if B finishes after, it replaces images$ so 2 results would appear in sequence. Then I could use waitUntil, filters etc to managae the 2 streams.
  ngOnInit() {
    this.streamA$ = this.streamService.getStream(1);
    this.streamB$ = this.streamService.getSlowStream(2);
  }

  clickA() {
    this.images$ = this.streamA$;
  }

  clickB() {
    this.images$ = this.streamB$;
  }

Template, subscribes to images$ with async
<div class="section">
    {{images$ | async}}
</div>

A:

You can setup a queue subject and concatMap you stream, it'll process in sequence and never miss any click.
private queue = new Subject()
public images$ = queue.pipe(concatMap(res => res))

clickA(){
  this.queue.next(this.streamA$)
}

clickB(){
  this.queue.next(this.streamB$)
}

https://stackblitz.com/edit/angular-z4zmd6

