how to get current index repeater using angular

Question

I am working on angular project , In this code below is for animation satellite meteorological images .

 TOTAL = 20; // total number of images
  currentIndex = 1;

  constructor() {

  }

  ngOnInit() {

  }

  play() {

    setInterval(() => {
      console.log(this.currentIndex)

      if (this.currentIndex + 1 > this.TOTAL) this.currentIndex = 1;
      else this.currentIndex++
    }, 400)

  }

  stop() {


  }

html

<img src="/gulf_ksa1/{{currentIndex}}.jpg" name="animation" style="width:auto;" class="img-responsive">

<ion-button size="large" (click)="play()">تشغيل</ion-button>
<ion-button size="large" (click)="stop()">ايقاف</ion-button>

My code above is working fine with animating images , but what l want to do When user click on function stop , i want to get current Index even stop animating .

any idea please ?

you can use iterator pattern for that github.com/torokmark/design_patterns_in_typescript/tree/master/… — Alex Cheremisin
– Alex Cheremisin, Commented Aug 13, 2019 at 14:08

Chetan Naik · Accepted Answer · 2019-08-13 14:10:36Z

2

Update the code to following,

TOTAL = 20; // total number of images
currentIndex = 1;
timeID = null;
clearIntv;

   constructor() {

   }

   ngOnInit() {

   }

   play() {

    this.clearIntv = setInterval(() => {
      console.log(this.currentIndex)

      if (this.currentIndex + 1 > this.TOTAL) this.currentIndex = 1;
      else this.currentIndex++
    }, 400)

   }

   stop() {
    console.log(this.currentIndex);  // Get Current Index
    clearInterval(this.clearIntv); // Stop animation

   }

edited Aug 13, 2019 at 14:10

answered Aug 13, 2019 at 14:06

Chetan Naik

6433 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali Ghassan Over a year ago

Thank you for answering . i got error on click on fun stop ERROR TypeError: Cannot read property 'clearInterval' of undefined

Ali Ghassan Over a year ago

I have question . How can i add lazy loading while satellite images load ? l mean l want show loading image gif if satellite images are still under loading !

Alex Cheremisin · Accepted Answer · 2019-08-13 14:16:54Z

1

You need to use clearInterval to stop the timer and then you can get your current index

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
TOTAL = 20; // total number of images
currentIndex = 1;

private interval;

constructor() {

}

ngOnInit() {

}

play() {

  this.interval = setInterval(() => {
    console.log(this.currentIndex)

    if (this.currentIndex + 1 > this.TOTAL) this.currentIndex = 1;
    else this.currentIndex++
  }, 400)

}

stop() {
  if (this.interval) {
    clearInterval(this.interval);
    console.log(this.currentIndex);
  }

 }
}

answered Aug 13, 2019 at 14:16

Alex Cheremisin

2482 silver badges10 bronze badges

2 Comments

Ali Ghassan Over a year ago

I have question . How can i add lazy loading while satellite images load ? l mean l want show loading image gif if satellite images are still under loading !

Alex Cheremisin Over a year ago

I created a snippet for you - jsfiddle.net/fycwbns8/19. Alternatively you can create an element with absolute positioning and hide this element on img 'onload' event

Collectives™ on Stack Overflow

how to get current index repeater using angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related