How to loop through an array indefinitely and display the value in Angular?

Question

I have an array of words and my goal is to display each one of them in an HTML template every few seconds. The result should be something like this: https://bootstrapmade.com/demo/iPortfolio/

I know it is possible to do so by using the following JavaScript Code:

  const typed = select('.typed')
  if (typed) {
    let typed_strings = typed.getAttribute('data-typed-items')
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }

I tried to replicate the same effect using typescript and I wrote the following code instead:

export class HeroComponent implements OnInit {

  words: string[] = ['marco', 'polo'];
  word: string = "";
  constructor() { }

  ngOnInit(): void {
    setTimeout(() => {
    while(true){
      for (let i=0; i < this.words.length; i++) {
        setTimeout(() => {
        this.word = this.words[i];
        console.log(this.word)
      }, 4000)
      };
    }}, 4000);
  }
}

However once I run the website it says that it runs out of memory.

Would you be able to suggest a smart and elegant way to achieve the effect linked in the website above?

Chris Hamilton · Accepted Answer · 2022-04-26 05:12:09Z

3

This would be the way to do it:

import { map, timer } from 'rxjs';

@Component({
  ...
})
export class HeroComponent {
  words = ['marco', 'polo'];
  word = timer(0, 4000).pipe(
    map((num) => {
      const index = num % this.words.length;
      const word = this.words[index];
      console.log(word);
      return word;
    })
  );
}

Then use the async pipe in html:

<p>{{ word | async }}</p>

Example: https://stackblitz.com/edit/angular-ivy-7xbuft?file=src/app/app.component.ts

timer from RxJS emits integers in increasing order (0, 1, 2, 3, ...) starting at the first parameter (0ms) and then once every interval given by the second parameter (4000ms).

pipe lets us perform a series of actions on any emitted value before returning.

map takes the emitted value and returns a different value, in this case we use the integer to calculate the index of the array, then return the word at that index.

The async pipe will subscribe to the observable and unsubscribe when the component is destroyed, stopping the execution. Unsubscribing is important to prevent memory leaks.

edited Apr 26, 2022 at 5:12

answered Apr 26, 2022 at 5:00

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

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

2 Comments

Drenai Over a year ago

Nice use of remainder % operator

Chris Hamilton Over a year ago

@Drenai thanks, aka the modulus operator, good for keeping integers in a certain range. For example 12 hour clock runs in mod 12.

Collectives™ on Stack Overflow

How to loop through an array indefinitely and display the value in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related