rxjs#combineLatest TypeScript Examples

private getFilteredTokens(form: FormControl): Observable<ITokenDescriptor[]> {

        return combineLatest([
            this.sortedTokens$,
            form.valueChanges.pipe(
                startWith('')
            ),
        ]).pipe(
            map((x) => {
                const [tokens, filterText] = x;
                return filterTokens(tokens, filterText);
            })
        );
    }

export function HintBox(
  this: ThemedComponentThis<CodedocTheme>,
  _: any, 
  renderer: any
) {
  const classes = this.theme.classes(HintBoxStyle);
  const target$ = this.expose.in('target', new Subject<HTMLElement | undefined>());
  const active$ = target$.pipe(map(el => !!el));
  const top$ = combineLatest(
      target$
        .pipe(
          map(el => el ? el.getBoundingClientRect().top : undefined)
        ), 
      fromEvent(document, 'mousemove')
        .pipe(
          map(e => (e as MouseEvent).clientY)
        )
    ).pipe(
      map(([top, mouseY]) => (top || mouseY) + 24)
    );
  const left$ = fromEvent(document, 'mousemove').pipe(map(e => (e as MouseEvent).clientX + 24));

  return <div 
      class={rl`${classes.hintbox} ${toggleList({'active': active$.pipe(startWith(false))})}`}
      style={rl`top: ${top$}px;left: ${left$}px`}
    >
    <span class="icon-font outline">wb_incandescent</span>
    {target$.pipe(filter(el => !!el), map(el => el?.getAttribute('data-hint')))}
  </div>;
}

accountWithHorizonQuery$ = selectPersistStateInit()
    .pipe(switchMap(() => {
      const selectedAccount$ = this.walletsAccountsQuery.getSelectedAccount$
        .pipe(filter(account => !!account))
        .pipe(distinctUntilKeyChanged('_id'));

      const selectedHorizonApi$ = this.horizonApisQuery.getSelectedHorizonApi$
        .pipe(filter(horizon => !!horizon))
        .pipe(distinctUntilKeyChanged('_id'));

      return combineLatest([
        selectedAccount$,
        selectedHorizonApi$
      ]);
    }));

/**
   * Fetches all questions from i18n file.
   */
  private fetchQuestions(): void {
    combineLatest([this.route.fragment, this.translateService.stream('faqPage.questions')])
      .pipe(takeUntil(this.destroy$))
      .subscribe(([hash, questions]) => {
        this.anchor = hash;
        this.questions = questions.map((question: Question) => ({
          ...question,
          isActive: hash === question.id,
          id: question.id
        }));
      });
  }

// Combine the streams for the view
  // TODO: Look into why this won't compile if the boolean streams are added here
  vm$ = combineLatest([
    this.filter$,
    this.pageSize$,
    this.currentPage$,
    this.totalResults$,
    this.totalPages$,
    this.products$
  ]).pipe(
    map(([filter, pageSize, currentPage, totalResults, totalPages, products]:
      [string, number, number, number, number, Product[]]) => ({
        filter, pageSize, currentPage, totalResults, totalPages, products
      }))
  );

products$ = combineLatest([
    this.allProducts$,
    this.filterAction$])
    .pipe(
      // Retain the current filter in a string for binding
      tap(([, filter]) => this.listFilter = filter),
      // Perform the filtering
      map(([products, filter]) => this.performFilter(products, filter)),
    );

constructor(
		currentUserService: CurrentUserService,
		private browserSettingService: BrowserSettingService
	) {
		this.timer = browserSettingService
			.partialBrowserSetting$('rng.request-interval')
			.pipe(switchMap(([int, err]) => interval(int)));
		const outer = this;
		this.rst$ = new (class extends NoopAuthFlow {
			public prerequest$ = combineLatest([
				outer.timer,
				currentUserService.currentUserFlow$.getOutput(),
			]).pipe(map(x => x[1]));
		})();
		this.rst$.deploy();

		this.connection$ = new (class extends ConnectionFlow {
			public prerequest$: Observable<CombErr<NoopAuthFlowSupNode>> = outer.rst$.getSupersetOutput();
		})();
		this.connection$.deploy();

		this.listCmd$ = new (class extends ListCmdFlow {
			public prerequest$ = outer.connection$.getSupersetOutput();
		})();
		this.listCmd$.deploy();
	}

afterOptionValuesLoaded({
    packageManagerCode = null,
    projectStatusCode = null,
    outputFormatCode = null,
    deploymentTypeCode = null,
    projectDevelopmentTypeCode = null,
  } = {}) {
    this.setupBreadcrumbs();

    combineLatest([
      this.projectStatusTypeService.entities$,
      this.outputFormatTypeService.entities$,
      this.packageManagerService.entities$,
      this.deploymentTypeService.entities$,
      this.projectDevelopmentTypeService.entities$,
    ])
      .pipe(untilDestroyed(this))
      .subscribe((result) => {
        if (_.every(result, (r) => _.size(r))) {
          this.project.projectStatus = getDefaultValue(result[0], projectStatusCode) as ProjectStatusType;
          this.project.outputFormat = getDefaultValue(result[1], outputFormatCode) as OutputFormatType;
          this.project.packageManager = getDefaultValue(result[2], packageManagerCode) as PackageManager;
          this.project.deploymentType = getDefaultValue(result[3], deploymentTypeCode) as DeploymentType;
          this.project.developmentType = getDefaultValue(
            result[4],
            projectDevelopmentTypeCode,
          ) as ProjectDevelopmentType;
        }
      });
  }

listenToInputChanges() {
    this.boxStyles$ = combineLatest([
      this.boxForm
        .get('size')
        .valueChanges.pipe(startWith(this.sizeOptions[0])),
      this.boxForm
        .get('borderRadius')
        .valueChanges.pipe(startWith(this.borderRadiusOptions[0])),
      this.boxForm
        .get('backgroundColor')
        .valueChanges.pipe(startWith(this.colorOptions[1])),
      this.boxForm
        .get('textColor')
        .valueChanges.pipe(startWith(this.colorOptions[0])),
    ]).pipe(
      map(([size, borderRadius, backgroundColor, textColor]) => {
        return {
          width: `${size}px`,
          height: `${size}px`,
          backgroundColor,
          color: textColor,
          borderRadius: `${borderRadius}px`,
        };
      })
    );
  }

/**
   * Splits this monitor into separate child monitors for breaking down this monitor's work into smaller units.
   *
   * Each child monitor contributes to the overall progress of this monitor. The ratio allows child monitors to be
   * weighted differently, for example, one child monitor can contribute twice as much as another to the overall progress.
   * After all child monitors reported "done", this monitor will also enter "done".
   */
  public split(...ratio: number[]): ProgressMonitor[] {
    if (this._hasSubMonitors) {
      throw Error('[IllegalMonitorStateError] Monitor cannot be split multiple times.');
    }
    this._hasSubMonitors = true;

    const subMonitors = ratio.map(() => new ProgressMonitor());
    combineLatest(subMonitors.map(subMonitor => subMonitor._progress$))
      .pipe(
        computeProgress(ratio),
        takeWhile(progress => progress < 1, true),
        takeUntil(this._done$),
      )
      .subscribe(progress => {
        this._progress$.next(progress);
      });

    return subMonitors;
  }

public agInit(params: ICellRendererParams): void {
    this.params = params;

    this.time$.next(this.params.value as string);

    combineLatest([this._electronService.windowFocused$, timer(0, 30000)])
      .pipe(takeUntil(this._destroy$))
      .subscribe(([focused]) => {
        if (!focused && this.relativeTime$.value.length > 0) {
          return;
        }

        const [fmt, val] = getRelativeDateFormat(this.params.value as string);
        if (!fmt) {
          return this.relativeTime$.next("ERR");
        }
        this.relativeTime$.next(this._translateService.instant(fmt, val) as string);
      });
  }

constructor(private ecMapService: CountryOrdersMapService,
              private theme: NbThemeService) {

    combineLatest([
      this.ecMapService.getCords(),
      this.theme.getJsTheme(),
    ])
      .pipe(takeWhile(() => this.alive))
      .subscribe(([cords, config]: [any, any]) => {
        this.currentTheme = config.variables.countryOrders;
        this.layers = [this.createGeoJsonLayer(cords)];
        this.selectFeature(this.findFeatureLayerByCountryId(this.countryId));
      });
  }

watchLabelsChange() {
    this.depose$$.next();
    const cdr = this.injector.get(ChangeDetectorRef);
    // FIXME: Is there any better way to achieve this?
    combineLatest(
      this.treeItems.map(({ labelChange }) => labelChange).filter(Boolean),
    )
      .pipe(debounceTime(0), takeUntil(this.depose$$))
      .subscribe(() => cdr.markForCheck());
  }

collectLinks() {
    if (this._linksSub) {
      this._linksSub.unsubscribe();
    }

    const contentLinks$ = this.links
      ? this.links.toArray().map((link) =>
          link.hrefUpdated.pipe(
            startWith(link.linkHref),
            map(() => link.linkHref),
            filterNullable()
          )
        )
      : [];

    const link$ = this.link
      ? this.link.hrefUpdated.pipe(
          startWith(this.link.linkHref),
          map(() => this.link.linkHref),
          filterNullable()
        )
      : of('');

    const router$ = this.router.url$.pipe(
      map((path) => this.router.getExternalUrl(path || '/'))
    );

    const observables$ = [router$, link$, ...contentLinks$];

    this._linksSub = combineLatest(observables$)
      .pipe(takeUntil(this._destroy$))
      .subscribe(([path, link, ...links]) => {
        this.checkActive([...links, link], path);
      });
  }

ngOnInit() {

        const courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));

        const course$ = this.coursesService.loadCourseById(courseId)
            .pipe(
                startWith(null)
            );

        const lessons$ = this.coursesService.loadAllCourseLessons(courseId)
            .pipe(
                startWith([])
            );

        this.data$ = combineLatest([course$, lessons$])
            .pipe(
                map(([course, lessons]) => {
                    return {
                        course,
                        lessons
                    }
                }),
                tap(console.log)
            );


  }

limitOrders$ = combineLatest([
  onLogin$,
  oneMinute$,
  limitOrderTrigger$
]).pipe(
  switchMapIgnoreThrow(([currentUser]) => getOrders(currentUser)),
  pluck("orders"),
  map(orders =>
    orders.filter(order => order.metaData.status !== OrderStatus.CANCELLED)
  ),
  filter(orders => orders.length > 0)
)

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return combineLatest([
      this.store.select(fromMembers.selectMembersLoaded),
      this.store.select(fromMembers.selectMembersLoading)
    ]).pipe(
      tap(([ loaded, loading ]) => {
        if (!loaded && !loading) {
          this.store.dispatch(MembersPageActions.loadMembers({ filters: {} }));
        }
      }),
      map(() => true)
    );
  }

protected onInit(): void {
    const { walletService, networkService } = this.services;

    this.addSubscriptions(
      combineLatest([
        walletService.walletAddress$, //
        networkService.chainId$,
      ])
        .pipe(
          map(([address, chainId]) =>
            !address || !chainId
              ? null
              : Account.fromPlain({
                  address,
                  type: AccountTypes.Key,
                  synchronizedAt: null,
                }),
          ),
        )
        .subscribe(this.account$),

      this.accountAddress$.pipe(map(() => null)).subscribe(this.accountMember$),
    );
  }

ionViewWillEnter() {
    this.erpt$.pipe(filter((erpt) => !!erpt)).subscribe((erpt) => {
      this.reportDetails = {
        'Report Name': erpt.rp_purpose,
        Owner: erpt.us_full_name,
        'Report Number': erpt.rp_claim_number,
        'Created On': this.datePipe.transform(erpt.rp_created_at, 'MMM d, y'),
      };
      this.reportCurrency = erpt.rp_currency;

      if (this.view === ExpenseView.team) {
        this.createEmployeeDetails(erpt);
      }
    });

    const orgSettings$ = this.offlineService.getOrgSettings();
    combineLatest([this.etxns$, this.erpt$, orgSettings$]).subscribe(([etxns, erpt, orgSettings]) => {
      const paymentModeWiseData: PaymentMode = this.transactionService.getPaymentModeWiseSummary(etxns);
      this.amountComponentWiseDetails = {
        'Total Amount': erpt.rp_amount,
        Reimbursable: paymentModeWiseData.reimbursable?.amount || 0,
      };
      if (orgSettings) {
        this.getCCCAdvanceSummary(paymentModeWiseData, orgSettings);
      }
    });

    this.etxns$.subscribe((etxns) => {
      this.amountCurrencyWiseDetails = this.transactionService.getCurrenyWiseSummary(etxns);
      this.isForeignCurrency = etxns.some((etxn) => !!etxn.tx_orig_currency);
    });
  }

tableData$ = combineLatest([
    this.compatibleDataLinks$,
    this.selectedLinkIndex$.pipe(distinctUntilChanged()),
  ]).pipe(
    map(([links, index]) => links[index]),
    switchMap((link) => {
      this.loading = true
      this.error = null
      return link
        ? this.fetchData(link).pipe(
            catchError((error) => {
              this.error = error.message
              return of([])
            }),
            finalize(() => {
              this.loading = false
            })
          )
        : of([])
    }),
    shareReplay(1)
  )

private readonly _context$: Observable<APIContext> = combineLatest(
		this.host$,
		this.useEncryption$,
		this.authToken$,
	).pipe(
		map(([host, useEncryption, authToken]) => ({
			host,
			useEncryption,
			authToken,
			fetch: this._initialOptions.fetch ?? fetch,
		})),
		distinctUntilChanged((a, b) => isEqual(a, b)),
		shareReplay(1),
	);

filteredData$ = combineLatest([
    this.originData$,
    this.searchValue$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(value => (this.searchValue = value))
    )
    // @ts-ignore
  ]).pipe(map(([data, value]) => (value ? this.filterTreeData(data as TreeNode[], value) : new FilteredTreeResult(data as TreeNode[]))));