Ionic 2 Slider: Start timer when slider is on timer view

Ionic Framework ionic-v3
1

I am using the ionic 2 slider and I want to add a countdown on it.

My template looks like this:

<ion-slide>
....
</ion-slide>

<ion-slide>
    60 seconds pause

    timer 
</ion-slide>

And the script:

onSecondSlideChanged() {
        let currentIndex = this.slider.getActiveIndex();
        console.log("Current index is", currentIndex);
    }

If the contains a timer i want to start it automatic.

Is there a good timer directive out there or a smart way how to solve it?

I absolutely have no idea where to start :frowning:

Thanks a lot!

2

Your question is not descriptive enough

3

Ok. I try it again:

TLDR: I want to start a countdown from 60 to 0 on each slide. :slight_smile:

4

If I get you correctly, you want to count down to zero from 60 sec and then change the slide right?

6

Use an observable for that:

this could be the code of a function in your service

return Observable
  .interval(1000 /* ms */)
  .timeInterval()
  .take(60);

So this will inform you 60 times if 1 second is over :smiley:

in your component

  timer = 60; 
  ...

  this.intervalService.startTimer().subscribe(() => {
    this.timer--;
  }, () => {
    // error
  }, () => {
    // after 60 seconds --> everything is complete
  });

no this.timer counts down from 60 to 0 every seconds. and you get informed if it has finished.
Do not to unsubscribe/reset your timer :wink:

keep in mind you have to import the special observable methods and operators from ‘rxjs’

7

Allright, looks awesome i try that.

One more problem:

I attached the timer value as a data-attribute to the

This is my code:

<ion-slide [attr.data-timer]="exercise.sets[setNumber].pause">
                        {{timer}}
                    </ion-slide>

Whats the best way to get the value there? Or is there a better way maybe?

8

If i want to countdown minutes, hours and days then how can do it?