Skip to main content

mergeMapSingleObservablePipe

Alternatives: mergeMapS$$$, switchMapObservablePipe, switchMap$$$

Inlined: mergeMapSingleObservable, mergeMapSingle$$, mergeMapS$$, switchMapObservable, switchMap$$

Types​

function mergeMapSingleObservablePipe<GIn, GOut>(
  mapFunction: IMapFunction<GIn, IObservable<GOut>>,
): IObservablePipe<GIn, GOut>

Definition​

This is one of the most used @lirx/core ObservablePipe. It maps the incoming values of an Observable to another one.

This function is a shortcut and optimized version of mergeMapObservablePipe(mapFunction, 1).

See mergeMapObservablePipe.

The RxJS equivalent is switchMap.

Example​

When a user clicks on an element, listen to its size​

const subscribe = pipe$$(fromEventTarget(window, 'click'), [
  map$$$((event: MouseEvent): HTMLElement => event.target as HTMLElement),
  switchMap$$$((element: HTMLElement): IObservable<DOMRectReadOnly> => {
    return merge([
      reference((): DOMRectReadOnly => element.getBoundingClientRect()),
      map$$(fromResizeObserver(event.target), ({ contentRect }) => contentRect),
    ]);
  }),
]);

subscribe(({ width, height }) => {
  console.log(width, height);
});

Output:

// user clicks on an element
// element size change
240, 120
// element size change
350, 120
// user clicks on another element
// stops listening to the first element's size
// new element size change
80, 60
// new element size change
120, 60
// ...