How to use the rxjs/operators.first function in rxjs

/* Deleting the item in local storage */
            const request = transaction.delete(key);

            /* Merging success (passing true) and error events and autoclosing the observable */
            return (race(this.toSuccessObservable(request), this.toErrorObservable(request, `remover`)) as Observable)
              .pipe(first());

          }));

        }

        /* Passing true if the item does not exist in local storage */
        return of(true);

      }),
      first()
    );

  }

createObservable: async (props: IProps) => {
    const arc = getArc();
    const scheme = arc.scheme(props.schemeId);

    // TODO: this may NOT be the best place to do this - we'd like to do this higher up

    // eslint-disable-next-line @typescript-eslint/camelcase
    await props.daoState.dao.proposals({where: { stage_in: [IProposalStage.Boosted, IProposalStage.QuietEndingPeriod, IProposalStage.Queued, IProposalStage.PreBoosted]}}, { fetchAllData: true }).pipe(first()).toPromise();
    // end cache priming

    return scheme.state();
  },
});

} else if (executionTargets.length > 1) {
    // If there's multiple targets, make a "multiple" version
    return {
      ...vote,
      executionTargetData: {
        address: '0x0000000000000000000000000000000000000000',
        name: 'Multiple',
        iconSrc: currentApp.icon(24),
        identifier: undefined,
      }
    }
  } else {
    // Otherwise, try to find the target from the installed apps
    const [targetAddress] = executionTargets
    return app.installedApps().pipe(
      first(),
      mergeMap(installedApps => from(installedApps)),
      first(
        app => addressesEqual(app.appAddress, targetAddress),
        {
          appAddress: targetAddress,
          name: 'External',
          icon: currentApp.icon,
          identifier: undefined,
        }
      ),
      map(targetApp => ({
        ...vote,
        executionTargetData: {
          address: targetApp.appAddress,
          name: targetApp.name,
          /*

before(async () => {
    const arc = getArc();

    const daos = await arc.daos({ where: { name: "Nectar DAO"}}).pipe(first()).toPromise();
    const dao = daos[0];
    daoAddress = dao.id;

  });

return new Promise((resolve, reject) => {
            this.signals.pipe(first()).subscribe(signalInfo => resolve(signalInfo));
            setTimeout(() => reject('Output signal timeout'), 30000);
        });
    }

public callWithAuth(method: string, params: any[]): Observable {
        const resourceUrl = this.batchExplorer.azureEnvironment;
        return this.accountService.currentAccount.pipe(
            first(),
            tap((account) => {
                if (!(account instanceof ArmBatchAccount)) {
                    throw new ServerError({
                        code: "LocalBatchAccount",
                        message: "Cannot use NCJ with a local batch account",
                        status: 406,
                    });
                }
            }),
            flatMap((account: ArmBatchAccount) => {
                const batchToken = this.adalService.accessTokenFor(account.subscription.tenantId, resourceUrl.batchUrl);
                const armToken = this.adalService.accessTokenFor(account.subscription.tenantId, resourceUrl.armUrl);
                return combineLatest(batchToken, armToken).pipe(
                    first(),
                    flatMap(([batchToken, armToken]) => {
                        const authParam = {

public activate(): void {
        super.activate();
        if (!this.contentLoadStarted) {
            this.contentLoadStarted = true;
            this.http
                .get(this.baseUrl + this.url, { responseType: 'text' })
                .pipe(first())
                .subscribe(res => {
                    this.rawSources = res;
                    const pre = this.elementRef.nativeElement.querySelector('pre');
                    const ext = this.url
                        .substring(this.url.lastIndexOf('.') + 1)
                        .replace('tsfake', 'ts')
                        .toLowerCase();
                    const lang = ext === 'ts' ? 'typescript' : 'html';
                    pre.innerHTML = Prism.highlight(res, Prism.languages[lang]);
                    this.contentReady$.next(true);
                });
        }
    }
    public ngOnChanges(changes: any): void {

          const promise = new Promise(resolve => sidenav.openedChange.pipe(first()).subscribe(resolve));

private persistAlarms(): void {
        this.userService.getUserData().pipe(
            first(),
            mergeMap((user: AppUser) => {
                user.alarms = Array.from(this._alarms.keys()).map(alarm => {
                    delete alarm.aetheryte$;
                    return alarm;
                });
                return this.userService.set(user.$key, user);
            }),
            first()
        ).subscribe();
    }

(hasPermission) => {
                    this.permissionsState[value].hasRole = hasPermission;
                    return hasPermission;
                }))
                    .catch((/**
                 * @return {?}
                 */
                () => false)));
            }));
        }
        /**
         * Return result :
         * true : At least one of neededPermission exists in permission or role service (@see this.permissionsState to get a full detail on wich permission is true/false)
         * false : none of neededPermission exists in  permission or role service
        */
        return from(promises).pipe(mergeAll(), first((/**
         * @param {?} hasPermission
         * @return {?}
         */
        (hasPermission) => {
            return hasPermission === true;
        }), false), map((/**
         * @param {?} hasPermission
         * @return {?}
         */
        (hasPermission) => {
            return hasPermission;
        }))).toPromise().then((/**
         * @param {?} hasPermission
         * @return {?}
         */
        (hasPermission) => {