Reputation: 1180
I am working on angular project , In my code below is counting loop from 1 to 10 , but I want to make the count loop from 10 to 1 .
My code :
TOTAL = 10; // total number of images
currentIndex = 1;
private interval;
play() {
this.interval = setInterval(() => {
console.log(this.currentIndex)
if (this.currentIndex + 1 > this.TOTAL) this.currentIndex =1;
else this.currentIndex++
}, 600)
this.presentToast()
}
stop() {
if (this.interval) {
clearInterval(this.interval);
console.log(this.currentIndex);
}
html
<img src="index={{currentIndex}}&false=True&lat=33&lon=44" name="animation"
class="img-fluid center-block" />
<br>
<ion-button (click)="play()">تشغيل</ion-button>
<ion-button (click)="stop()">ايقاف</ion-button>
Any idea please ?
Upvotes: 1
Views: 934
Reputation: 5550
You can use another variable for looping which is reverse than your currentIndex. Then use this variable to your html like below:
<img src="index={{reversedIndex}}&false=True&lat=33&lon=44" name="animation"
class="img-fluid center-block" />
<br>
<ion-button (click)="play()">تشغيل</ion-button>
<ion-button (click)="stop()">ايقاف</ion-button>
Working Example: Stackblitz
Upvotes: 1
Reputation: 5550
You can use timer() function from rxjs which emits after 1 seconds interval by the following code.
timer(0,1000)
As you want to reversely, you need to decrease the counter by 1 by mapping and as you want to finish the counter when the value is 0, we use take(x) which take first x values and completes.
Live Example: Stackblitz
Upvotes: 0