Ionic / Angular 2 Countdown timer solutions

2.5k Views Asked by At

I am looking to build a simple Angular 2 (4) / Ionic 2 Countdown timer for my application, but I can't seem to find any open-source solutions available, so I wanted to see what suggestions you guys had.

Here's an example of what I'm looking for:

IOS CountdownTimer Example

Now the best 'solution' that i've found is: MobiScroll CountdownTimer

But the catch with MobiScroll is that it has a pretty hefty licensing fee associated with it (almost $200). Which isn't really feasible considering I'm just trying to make something for fun right now.

So I was wondering if there were any open-source solutions out there, that I could utilize, or if i'll have to implement a custom solution, what animation / libraries you think I should start looking at?

I've searched the StackOverflow questions for a solution, but I have yet to find a solid source yet, so I apologize if this is a duplicate, but I don't think that it is.

1

There are 1 best solutions below

0
Eaves12 On

it would be much easier "in my opinion" and less time consuming to create your own very easily.

you can go here : https://ionicframework.com/docs/api/components/datetime/DateTime/

to use the datetime picker from ionic, which will give your picker a native look, and simply use typescript to count down to zero from the time the user inputs.

Example:

private timer;
private maxTime = //get this from user input in the ionic time picker and convert it to seconds maybe.
StartTimer() {
    this.timer = setTimeout(x => 
       {
           if(maxTime <= 0) { alert("timer done";}
           maxTime -= 1;
           StartTimer();

       }, 1000);