CODEWITHSUNDEEP
angularcount
Ali Ghassan
Ali Ghassan

Reputation: 1180

count from 10 to 1 using angular

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

Answers (2)

Md Rafee
Md Rafee

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

Md Rafee
Md Rafee

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

Related Questions