rxjs/operators#takeUntil TypeScript Examples

ngOnInit(): void {
    this.router.queryParams
      .pipe(takeUntil(this.destroySub))
      .subscribe((params) => {
        this.title = params.name as string;
      });
    // setting debounce subscription

    this.router.params.pipe(takeUntil(this.destroySub)).subscribe((params) => {
      this.projectId = params.id;
      try {
        this.dashboardService
          .listLHProjectBranches(this.projectId)
          .valueChanges.pipe(takeUntil(this.destroySub))
          .subscribe(({ data }) => {
            const { rows } = data.listLHProjectBranches;
            this.branches = this.handlePriorityOrderBranch(rows);
            this.isPageLoading = false;
            if (this.branches.length > 0) {
              this.selectedBranch = this.branches[0];
              this.fetchBranchScore(this.branches[0]);
            }
          });
      } catch (error) {
        window.OpNotification.danger({
          subject: 'Error on fetching branches',
          body: error.message,
        });
      }
    });
  }

constructor(
    private character: GridCharacter,
    private gridTilemap: GridTilemap,
    private charToFollow: GridCharacter,
    private numberOfDirections: NumberOfDirections = NumberOfDirections.FOUR,
    private distance = 0,
    private noPathFoundStrategy: NoPathFoundStrategy = NoPathFoundStrategy.STOP
  ) {
    this.character = character;
    this.updateTarget(
      this.charToFollow.getTilePos().position,
      this.charToFollow.getTilePos().layer
    );
    this.charToFollow
      .positionChangeStarted()
      .pipe(
        takeUntil(
          this.character
            .autoMovementSet()
            .pipe(filter((movement) => movement !== this))
        )
      )
      .subscribe(({ enterTile, enterLayer }) => {
        this.updateTarget(enterTile, enterLayer);
      });
  }

constructor(
    private artichokeApi: ArtichokeApi,
    private callFactory: CallFactory,
    private roomFactory: RoomFactory,
    private loggerService: LoggerService,
    private heartbeatTimeoutMultiplier: number,
    private fallbackReconnectDelayMs: number,
  ) {
    // Do not move this as a property accessor, it must be only one object to make rx `share` operator work.
    this.connection = merge(
      this.artichokeApi.connection$.pipe(
        filter(serverEvents.OutputHeartbeat.is),
        tap((ev: serverEvents.OutputHeartbeat) => this.handleHeartbeatEvent(ev)),
        ignoreElements(),
      ),
      this.artichokeApi.connection$.pipe(
        filter(serverEvents.Hello.is),
        tap(ev => this.handleHelloEvent(ev)),
      ),
    ).pipe(
      finalize(() => this.handleDisconnect()),
      // On WebSocket error
      retryWhen(errors => this.delayReconnect(errors)),
      takeUntil(this.serverUnreachableEvent),
      // On WebSocket gracefull close
      repeatWhen(attempts => this.delayReconnect(attempts)),
      // IMPORTANT
      // Share the observable, so the internal logic would behave like one consistent stream
      // Without this operator, if client subscribes two times, we would have
      // two heartbeats answers and reconnections logic
      share(),
    );
  }

horizonValueChanged: Subscription = this.horizonSelectControl
    .valueChanges
    .pipe(withLatestFrom(this.selectedWalletAccount$))
    .pipe(takeUntil(this.componentDestroyed$))
    .subscribe(([horizonId, walletAccount]) => {
      this.horizonApisService.selectHorizonApi(horizonId);

      this.walletsService.selectAccount({
        walletId: walletAccount.walletId,
        publicKey: walletAccount.publicKey,
      });

      this.nzMessageService.success('Horizon selected');
    });

ngAfterViewInit(): void {
    this.walletConnectorService.networkChange$.pipe(takeUntil(this.destroy$)).subscribe(network => {
      this.currentBlockchain = network;
      this.cdr.markForCheck();
    });
    this.walletConnectorService.addressChange$.pipe(takeUntil(this.destroy$)).subscribe(address => {
      this.authService.setCurrentUser(address);
      this.cdr.markForCheck();
    });
  }

ngOnInit() {
    this.translate
      .get('notice')
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.i18nValues = this.translate.instant('notice');
        this.tabTitles = {
          notice: this.i18nValues['notificationTabName'],
          message: this.i18nValues['messageTabName'],
          todo: this.i18nValues['todoTabName'],
        };
      });

    this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
      this.i18nValues = this.translate.instant('notice');
      this.tabTitles = {
        notice: this.i18nValues['notificationTabName'],
        message: this.i18nValues['messageTabName'],
        todo: this.i18nValues['todoTabName'],
      };
    });
    this.noticeService.getNotifications().subscribe((notifications) => {
      this.notifications = notifications;
    });
    this.noticeService.getMessages().subscribe((messages) => {
      this.messages = messages;
    });
    this.noticeService.getTodos().subscribe((todos) => {
      this.todos = todos;
    });
    setTimeout(() => {
      this.countEvent.emit(this.notifications.length + this.messages.length + this.todos.length);
    });
  }

private getLatestPosts() {
    this.latestPosts = this.posts.getWhereFn(ref => {
      let query: any = ref;
      // Filter by lang
      if (this.postsLanguage !== '*') {
        query = query.where('lang', '==', this.postsLanguage);
      }
      // orderBy & limit requires a database index to work with the where condition above
      // as a workaround, they were replaced with client side sort/slice functions below
      // query = query.orderBy('createdAt', 'desc');
      // query = query.limit(5);
      return query;
    }, true).pipe(
      map((posts: Post[]) => {
        // console.log(posts);
        return posts.sort((a: Post, b: Post) => b.createdAt - a.createdAt).slice(0, 5);
      }),
      takeUntil(this.postsLanguageChange)
    );
  }

setAutoPlayInterval(): void {
    this.pausableTimer$ = defer(() => {
      return interval(this.autoPlayDelay).pipe(
        takeUntil(this.unsubscribe),
        withLatestFrom(this.pause),
        filter(([ , paused ]) => !paused),
        map(() => this.nextCarouselItem()),
      );
    });

    this.pausableTimer$.subscribe();
    this.cd.detectChanges();
  }

takePhoto() {
    forkJoin([this.createEmptyRecord(), this.photoService.create()])
      .pipe(
        map(([record, byteString]) => {
          record.fields.find(field => field.type === RecordFieldType.photo).value = byteString;
          return record;
        }),
        tap(record => this.record.next(record)),
        takeUntil(this.destroy$),
      ).subscribe();
  }