rxjs takeUntil do not execute finalize

Question

I have the following countdown:

userClick=new Subject()

resetCountdown(){this.userClick.next()}

setCountDown() {
    let counter = 5;
    let tick = 1000;
    this.countDown = timer(0, tick)
    .pipe(
      take(counter),
      map(() => --counter),
      takeUntil(this.userClick),
      finalize(() => {
        if (this.currentQuestionNumber < this.questionsToAsk)
          this.showNextQuestion();
        else {
          this.endQuiz();
        }

      })
    );
}

When takeUntil(this.userClick) occurs, I do not want finalize to be executed. Is there any possibility to achieve that? I only want finalize to be executed when the countdown has reached 0 and was not interrupted before by takeUntil

Try use flat arrow: takeUntil(()=>this.userClick) -I don't know if work, it's only a suggest — Eliseo, Feb 28 '19 at 12:05

kos · Accepted Answer · 2019-02-28T12:30:01.837

1

You can use tap to check if the value has reached your target and execute sideeffects.
Something like

function setCountDown() {
    let counter = 5;
    let tick = 1000;
    this.countDown = timer(0, tick)
      .pipe(
        take(counter + 1),
        map(value => counter - value),
        tap(value => {
          if (value === 0) {
            console.log('OUT OF TIME');
          }
        }),
        takeUntil(userClick)
      )
}

See this example

edited Feb 28 '19 at 12:30

answered Feb 28 '19 at 11:40

kos

5,044
1
17
35

Thanks, one thing: the solution counts up, but I want it to count down? – farahm Feb 28 '19 at 12:26

rxjs takeUntil do not execute finalize

1 Answers1