<div *ngFor="let header of headers">
<widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>
How to bind headers one by one based on the 'onLoaded' emit. Basically, I want the widget to load one by one after each successful data load(output method onLoaded emits boolean).
Its very weird requirement so you can start like this
1) create empty new array forLoop: any[] = [];
2) Before displaying headers values( may be in ngonint()) add first element from the headers array to forLoop array
`forLoop.push(headers.Shift())` // it will remove first element from the headers array and add into forLoop
3) now display forLoop array
<div *ngFor="let header of forLoop;trackBy: trackByFn">
<widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>
trackByFn(index, item) {
return index; // or item.id
}
4) on the onLoaded method remove second element from header array add into forloop array
onLoaded (){
if(headers.length >0){
forLoop.push(headers.Shift())
}
}
5) continue this process for till the headers array is empty
