Set Interval on an array in angular project

Question

I'm trying to use the setInterval() function in order to change text to the user every 3 seconds.

I tried looping with for loop but that doesn't work - I see the 'test 03' and that's it.

I can't find a solution.

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private interval;

  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.items.length; i++) {
      this.interval = setInterval(() => {
        this.currentItem = this.items[i];
      }, 3000);
    }
  }
}

{{ currentItem }}

Appreciate any help!

user6749601 · Accepted Answer · 2019-01-31 20:29:26Z

3

Try it this way instead.

pointer points to the current content you want to display. With each interval pointer gets increased by 1 until it has a value > 2. Then it starts with 0 again.

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private pointer: number = 0;

  constructor() {}

  ngOnInit() {
      this.interval = setInterval(() => {
        this.currentItem = this.items[this.pointer];
        this.pointer++;
        if (this.pointer > 2) { this.pointer = 0 };
      }, 3000);
  }

}

answered Jan 31, 2019 at 20:29

user6749601

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

3 Comments

user6749601 Over a year ago

Why was this answer voted down? May the person who did this please state the nature of his or her problem with my answer.

rio Over a year ago

thanks a lot! how can i make the change be more smooth? like fade effect or something like that? @Lynx 242

user6749601 Over a year ago

You're welcome. To achieve fading effects plain interpolation won't work. This is usually done with CSS using, for example, 2 overlapping labels. And while the one label fades out the other fades in. But I have no example at hand I could give you. Sorry.

Guerric P · Accepted Answer · 2019-01-31 20:33:47Z

1

Try this:

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private interval;

  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.items.length; i++) {
      this.interval = setInterval(() => {
        this.currentItem = this.items[i];
      }, 3000 * i);
    }
  }
}

{{ currentItem }}

answered Jan 31, 2019 at 20:33

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Comments

ABOS · Accepted Answer · 2019-01-31 20:58:38Z

1

If you are happy with rxjs,

import { timer } from 'rxjs';
import { tap } from 'rxjs/operators';

ngOnInit() {
  timer(0, 3000)
    .pipe(
      tap(v => {
        this.currentItem = this.items[v%3]
      })
    )
    .subscribe(console.log);
}

less code, no loop, no fancy logic involved :)

You can do even better with

export class MessagesComponent implements OnInit {
  private timer$ = timer(0, 3000);
  ngOnInit() {
    // for loop can be completely removed
  } 
}

and in html, use

{{ items[(timer$ | async) % 3] }}

so you literally just use 1 line of code to do the same thing by leveraging async pipe and rxjs, and forget about the ugly for-loop.

demo https://stackblitz.com/edit/angular-m5prrk?file=src%2Fapp%2Fapp.component.ts

edited Jan 31, 2019 at 20:58

answered Jan 31, 2019 at 20:40

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Set Interval on an array in angular project

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related