CODEWITHSUNDEEP
angularrxjsrxjs6
user11314257
user11314257

Reputation:

How to create some timers and show result from them?

I have create timer using RXJS:

let timer1value = null;
let timeFinish =  30;
let finishDate = new Date();

return timer(1000)
      .pipe(
        takeWhile(() => new Date() < finishDate),
        finalize(() => {
          timeFinish = finishDate;
        })
      )
      .subscribe((t) => {
      timer1value = t;
});

I need to create some timers and show result on the page: 

{{timer1value}}

So, I have added observer to array this.timers:

this.timers.push(timer(1000)
      .pipe(
        takeWhile(() => new Date() < finishDate),
        finalize(() => {
          timeFinish = finishDate;
        })
      ));

Then how to get in template actual value of each timers in subscription?


{{timer2value}}

{{timerNvalue}}```

Upvotes: 0

Views: 53

Answers (2)

Adrian Brand
Adrian Brand

Reputation: 21638

You loop over the timers array with ngFor and then unwrap the value of the observable with the async pipe

<ng-container *ngFor="let timer of timers; let i = index;">
  Timer {{ index }} is {{ timer | async }}<br>
</ng-container>

Upvotes: 0

Peter Bagyinszki
Peter Bagyinszki

Reputation: 1079

In Angular you can use the AsyncPipe to show the latest value emitted by Observables.

To show the latest value of the first timer in the array you can write:

{{timers[0] | async}}

Upvotes: 1

Related Questions