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

.subscribe((state) => {
        if (!loading(state)) {
          pendingCreate.next(true);
          pendingCreate.complete();
          this.creatingToken = false;
          if (state === EntityStatus.loadingSuccess) {
            this.closeCreateModal();
            this.router.navigate(['/settings', 'tokens', tok.id]);
          }
          if (state === EntityStatus.loadingFailure) {
            const pendingCreateError = new Subject();
            this.store.pipe(
              select(saveError),
              filter(identity),
              takeUntil(pendingCreateError))
              .subscribe((error) => {
                pendingCreateError.next(true);
                pendingCreateError.complete();
                if (error.status === HttpStatus.CONFLICT) {
                  this.conflictErrorEvent.emit(true);
                // Close the modal on any error other than conflict and display in banner.
                } else {
                  this.closeCreateModal();
                }
            });
          }
        }
      });
  }

ngOnChanges() {
    if (_.isNil(this.table)) {
      return;
    }

    this.rowBuilder = new InlineCreateRowBuilder(this.injector, this.table);
    this.timelineBuilder = new TimelineRowBuilder(this.injector, this.table);

    // Mirror the row height in timeline
    const container = jQuery(this.table.timelineBody);
    container.addClass('-inline-create-mirror');

    // Remove temporary rows on creation of new work package
    this.wpCreate.onNewWorkPackage()
      .pipe(
        takeUntil(componentDestroyed(this))
      )
      .subscribe((wp:WorkPackageResource) => {
        if (this.currentWorkPackage && this.currentWorkPackage === wp) {
          // Add next row
          this.removeWorkPackageRow();
          this.addWorkPackageRow();

          // Focus on the last inserted id
          if (!this.table.configuration.isEmbedded) {
            this.wpTableFocus.updateFocus(wp.id);
          }
        } else {
          // Remove current row
          this.table.editing.stopEditing('new');
          this.removeWorkPackageRow();
          this.showRow();

const bookId = params.get('id')

              if (bookId === null) {
                throw new Error('Cannot access Book without any selected one')
              }

              // subscribe to the book Observable
              this.bookService
                .book
                .subscribe((res: Book) => this.book = res)

              // then do the main call
              this.bookService
                .get(parseInt(bookId, 10))
                .pipe(
                  takeUntil(this.ngUnsubscribe)
                )
                .subscribe((res: Book) => {
                  this.isLoading = false
                })
            })
    }

export function installMouseDispatcher(targetWindow: Window, targetOrigin: string, options?: Options): SciMouseDispatcher {
  const destroy$ = new Subject();

  // Dispatch native mouse events to the target window
  const mousemoveThrottleTime = options && options.mousemoveThrottleTime || 20;
  merge(
    fromEvent(document, 'mousemove').pipe(filter(event => event.buttons === PRIMARY_MOUSE_BUTTON), auditTime(mousemoveThrottleTime)),
    fromEvent(document, 'mouseup'),
  )
    .pipe(takeUntil(destroy$))
    .subscribe((event: MouseEvent) => {
      targetWindow.postMessage({
        type: `sci-${event.type}`,
        screenX: event.screenX,
        screenY: event.screenY,
      }, targetOrigin);
    });

  // Dispatch synthetic mouse events to the target window (unless emitted itself)
  merge(
    fromEvent(document, 'sci-mousemove'),
    fromEvent(document, 'sci-mouseup'),
  )
    .pipe(
      filter((event: SciMouseEvent) => event.source !== targetWindow),
      takeUntil(destroy$),

const control: AbstractControl = this.formGroup.get(key);
      control.valueChanges.pipe(
          startWith(control.value),
          takeUntil(this._updateSubject.asObservable())
        ).subscribe(value => {
          if (!this._stateSubjects.hasOwnProperty(key)) {
            this._stateSubjects[key] = new Subject();
          }
          this._stateSubjects[key].next(value);
        });
    });

    // Group level changes
    this.formGroup.valueChanges.pipe(
        startWith(this.getFormStateSnapshot()),
        takeUntil(this._updateSubject.asObservable())
      ).subscribe(() => {
        this._stateSubject.next(this.getFormStateSnapshot());
      });
  }

ngOnInit() {
    this.t
      .time$('CompAliveObs')
      .pipe(takeUntil(CompStillAlive(this)))
      .subscribe(
        time => (this.time = time),
        err => console.error(err),
        () => console.log('completed')
      );
  }
  ngOnDestroy(): void {

getDetails(putCode): void {
        if(this.publicView === "true"){
            this.peerReviewService.getPublicPeerReviewById(putCode)
            .pipe(    
                takeUntil(this.ngUnsubscribe)
            )
            .subscribe(
                data => {
                    //this.peerReviewService.removeBadExternalIdentifiers(data);
                    this.peerReviewService.details[putCode] = data;   
                },
                error => {
                    console.log('getDetailsError', error);
                } 
            );
        } else {
            this.peerReviewService.getPeerReviewById(putCode)
            .pipe(    
                takeUntil(this.ngUnsubscribe)
            )
            .subscribe(

public get blocks() {
    return this.editorService.lastChange({ holder: this.holder }).pipe(
      pluck('blocks'),
      takeUntil(this.onDestroy$)
    );
  }

private fetchCurrentVote() {
    if (!this.currentWallet) { return; }

    this.arkApiProvider.client.getWalletVotes(this.currentWallet.address)
      .pipe(
        takeUntil(this.unsubscriber$)
      )
      .subscribe((data) => {
        if (data.success && data.delegates.length > 0) {
          this.walletVote = data.delegates[0];
        }
      }, () => {
        this.toastProvider.error('DELEGATES_PAGE.VOTE_FETCH_ERROR');
      });
  }

constructor(public view: WorkbenchView) {
    view.active$
      .pipe(takeUntil(this._destroy$))
      .subscribe(active => this.activated = active);
  }