Angular NgFor Loop Through Array Object with Delay for Each Item

Question

I am working on the UI with clouds moving horizontally across the screen.

I have an array of items to be displayed on the clouds, each item of the array is a cloud. The component has css display absolute position so my current approach creates a stack of components on top of each other. My goal is instead of load the array's item one time, I want to load each one with a 4000ms of delay. I know we may need setTimeout() or setInterval() in the clouds.component.ts or the html template *ngFor.

I tried *ngFor="let setTimeout(() => item, 4000) of items" but does not seem right.

Below is the structure of my components

cloud.component.ts

export class CloudComponent {
 @Input('cloud') public element: {
  ....
  // not important
 }
}

clouds.component.html

<app-cloud *ngFor="let item of items" [cloud]="item"></app-cloud>

clouds.component.ts

export class CloudsComponent {    
 public clouds: Cloud[] = [item,item,item,item,item]
 // service call
}

rhavelka · Accepted Answer · 2018-08-09T22:05:34.520

0

You could set everything up in your component, then use a setInterval() to load them and then kill then destroy the setInterval() when it ends.

dummyItems=[];
index = 1;
public clouds: Cloud[] = [item,item,item,item,item]

ngOnInit() {
  if( this.coulds[0]) { 
      this.dummyItems.push(this.clouds[0]);
  }
  this.timer = setInterval(() => {
      if (this.index < this.coulds.length) {
         this.dummyItems.push(this.clouds[index]);
         this.index++;
      } else { 
         clearInterval(this.timer); // this is optional but good practice
      }
   }, 4000)
}

edited Aug 09 '18 at 22:05

answered Aug 09 '18 at 21:42

rhavelka

2,283
3
22
36

You solution works, but the 1st cloud also delayed for 4000ms – Huy Le Aug 09 '18 at 21:56
edited. you just need to push the first cloud before the interval, and start your index at 1. – rhavelka Aug 09 '18 at 22:05

Helping hand · Answer 2 · 2018-08-09T21:44:27.680

-1

You have to feed your current array into dummy array with a timeout of 4000ms.

this.dummyItems=[]  
for(let i = 0; i < this.items.length; i++){
     let item = this.items[i];
     setTimeout(() => {
         this.dummyItems.push(item);
     }, 4000*(i+1));
 }

In Template,

<app-cloud *ngFor="let item of dummyItems" [cloud]="item"></app-cloud>

edited Aug 09 '18 at 21:44

answered Aug 09 '18 at 21:16

Helping hand

2,800
2
19
31

Do you need to put the for loop into the constructor or ngOnInit() ? – Huy Le Aug 09 '18 at 21:28
`ngOnInit()` would be fine – Helping hand Aug 09 '18 at 21:29
I don't think this will work. I think it will wait 4 seconds, then load all of them at once because the for loop is still looping even after it calls the timeout – rhavelka Aug 09 '18 at 21:36
The dummyItems array is empty when i try to put the for loop inside ngOnInit() – Huy Le Aug 09 '18 at 21:37
@rhavelka no it wont, i checked in the console. `let` is something which executes async in order inside loop – Helping hand Aug 09 '18 at 21:39
@HuyLe try running in constructor – Helping hand Aug 09 '18 at 21:39
also its `this.items` instead of `items` in the code. – Helping hand Aug 09 '18 at 21:47
@Helpinghand I tried this `for(let i = 0; i < 5; i++) {let index = i;setTimeout(() => console.log(index), 4000);}` in an environment and it waited 4 seconds to load everything, not 4 seconds between everything. It is stated that @HuyLe want's 'to load each one with a 4000ms of delay` to me that's 4 seconds between each one, not 4 seconds then load all – rhavelka Aug 09 '18 at 21:50

Angular NgFor Loop Through Array Object with Delay for Each Item

2 Answers2