How to use the rxjs.merge function in rxjs

private _updateChangeSubscription(): void {
    const sortChange: Observable = this._sort
      ? merge(this._sort.sortChange, this._sort._initialized)
      : of(null);

    const pageChange: Observable = this
      ._pagination
      ? merge(
          this._pagination._initialized,
          this._internalPageChanges,
          this._pagination.changed,
        )
      : of(null);

    const dataStream = this._data;

    // Watch for base data or filter changes to provide a filtered set of data.
    const filteredData = combineLatest([dataStream, this._filter]).pipe(
      map(([data]) => this._filterData(data)),
    );

    // Watch for filtered data or sort changes to provide a sorted set of data.
    const sortedData = combineLatest([filteredData, sortChange]).pipe(
      map(([data]) => this._sortData(data)),

selectedItem: null,
        }

        this.subscriptions = new Subscription()

        this.subscriptions.add(
            fromEvent(this.props.textBoxRef, 'keydown').subscribe(e =>
                this.handleKeyboadNavigationEvents(e)
            )
        )

        /**
         * Emits the current text content and the location of the user's caret inside of
         * the GitHubPR comment box.
         */
        const textBoxStateUpdates: Observable = merge(
            fromEvent(this.props.textBoxRef, 'keyup'),
            fromEvent(this.props.textBoxRef, 'input')
        ).pipe(
            map(() => ({
                contents: this.props.textBoxRef.value,
                caretPosition: this.props.textBoxRef.selectionStart,
            })),
            debounceTime(50),
            distinctUntilChanged((a, b) => isEqual(a, b))
        )

        // Reset the hidden state whenever the user types anything
        this.subscriptions.add(textBoxStateUpdates.subscribe(() => this.setState({ hidden: false })))

        this.selectedSymbolUpdates = new Subject()

export function createLicenseUpdate(
  trigger$: Observable,
  stop$: Observable,
  fetcher: () => Promise,
  initialValues?: ILicense
) {
  const triggerRefresh$ = trigger$.pipe(switchMap(fetcher));
  const manuallyFetched$ = new Subject();

  const fetched$ = merge(triggerRefresh$, manuallyFetched$).pipe(
    takeUntil(stop$),
    publishReplay(1)
    // have to cast manually as pipe operator cannot return ConnectableObservable
    // https://github.com/ReactiveX/rxjs/issues/2972
  ) as ConnectableObservable;

  const fetchSubscription = fetched$.connect();
  stop$.subscribe({ complete: () => fetchSubscription.unsubscribe() });

  const initialValues$ = initialValues ? from([undefined, initialValues]) : from([undefined]);

  const license$: Observable = merge(initialValues$, fetched$).pipe(
    pairwise(),
    filter(([previous, next]) => hasLicenseInfoChanged(previous, next!)),
    map(([, next]) => next!)
  );

this.overlayRef!.attach(new TemplatePortal(
        this.template!,
        this.viewContainerRef,
        {$implicit: this.context}));

    // We have to defer trapping focus, because doing so too early can cause the form inside
    // the overlay to be submitted immediately if it was opened on an Enter keydown event.
    this.services.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.focusTrap!.focusInitialElement();
      });
    });

    // Update the size of the popup initially and on subsequent changes to
    // scroll position and viewport size.
    merge(this.services.scrollDispatcher.scrolled(), this.services.viewportRuler.change())
        .pipe(
            startWith(null),
            takeUntil(this.overlayRef!.detachments()),
            takeUntil(this.destroyed),
            )
        .subscribe(() => {
          this._updateOverlaySize();
        });
  }

private initContext() {
    const stop$ = merge(this.ngDestroy, this.contextChanged).pipe(
      first(),
      share()
    );

    const state$ = this.mapperService.state$.pipe(
      catchError(err => {
        console.error(err);
        throw err;
      }),
      takeUntil(stop$),
      share()
    );

    state$
      .pipe(
        selectCurrentNode,

function generateClock(videoElement : HTMLMediaElement) : Observable {
  const seeking$ = onSeeking$(videoElement);
  const seeked$ = onSeeked$(videoElement);
  const ended$ = onEnded$(videoElement);

  const manualRefresh$ = observableMerge(seeked$, ended$);
  const autoRefresh$ = observableInterval(MAXIMUM_HTML_TEXT_TRACK_UPDATE_INTERVAL)
    .pipe(startWith(null));

  return manualRefresh$.pipe(
    startWith(null),
    switchMapTo(
      observableConcat(
        autoRefresh$
          .pipe(mapTo(true), takeUntil(seeking$)),
        observableOf(false)
      )
    )
  );
}

getCurrentSite(): Observable {
        return merge(
            this.selectedSite ? of(this.selectedSite) : this.requestCurrentSite(),
            this.switchSite$
        );
    }

        flatMap(() => merge(this.listOfNzThComponent.changes, ...this.listOfNzThComponent.map(th => th.nzWidthChange$))),
        takeUntil(this.destroy$)

map((response: DataQueryResponse) => {
              return {
                ...response,
                data: response.data || [],
                state: runningSubRequests === 0 ? LoadingState.Done : LoadingState.Loading,
                key: `mixed-${i}-${response.key || ''}`,
              } as DataQueryResponse;
            })
          );
        })
      );

      observables.push(observable);
    }

    return merge(...observables);
  }

onAnnotationCalculationNeeded(scrollDebounced$, moved$, annotationAdded$, annotationSet$) {
    return merge(
      scrollDebounced$,
      moved$,
      annotationAdded$,
      annotationSet$.pipe(tap(() => AnnotationStore.invalidateCalculations())),
    ).subscribe(() => {
      const contentIndexes = Connector.content.getContentsInScreen();

      const annotationsInScreen = AnnotationStore.annotations
        .filter(({ contentIndex: aci }) => contentIndexes.includes(aci));
      const calculationTargets = annotationsInScreen
        .filter(({ id }) => !AnnotationStore.calculations.has(id) || AnnotationStore.calculations.get(id).rects === null);

      AnnotationStore.setCalculations(
        calculationTargets.map(({ id, contentIndex, serializedRange }) => ({
          id,
          contentIndex,