ionic 3 angular animation on number counter

user_135982 0
Viewed 2314

I am showing a number in my UI. nothing hifi just a regular 

<ion-label>{{myCount}}</ion-label>

There is a button next to it called reset. On hitting the button counter becomes 0. This super basic thing and works fine by a function call on button as

reset(){
 this.myCount = 0;
}

However, for a nicer user experience I want to roll it down to 0 visually reducing 8 to 0. Applying a for loop like

  for(let num = currentCount; num >= 0; num --)
       this.myCount = num;

probably goes too fast that it doesn't show it happening. any advise to make use of some animation coming from ionic 3 or angular or if none then some other way

ionic3 angular typescript animation
1 Answers

Just use interval:

let interval = setInterval(()=>{
  this.myCount--;
  if(this.myCount == 0) clearInterval(interval);
},200)
user_42546810
Related