Using dynamically created multiple progress bars Ionic3

[coalman11]

I am creating a list with data fetched from json, <ion-list> <button ion-item *ngFor="let item of getItems(desc); let i = index" style="background:#FFD895"> <round-progress id="input1" (click)="download($event)" item-start current="0" max="100"></round-progress> {{ item.title }} </button> </ion-list> Now, if I bind it to variable 'current' then on downloadProgress the current variable is incremented and reflects in all the progressbars. Also I tried using event.target but even on changing the current attribute for the element it does not reflect back. Moreover there can be any number of items in list so cannot use ViewChild.

[crisbeto]

You're passing in a static value to current. You're supposed to use a data binding:

<round-progress [current]="someVariable"></round-progress>

[coalman11]

Then if there are n number of progress bars I will need to initialize n variables for that as well.

[crisbeto]

You can either have a value on each of your item-s, or you can bind all items to the same progress value.

[coalman11]

how can I have a value on each item as it is not known how many elements would be there in the list so, variables cannot be declared before hand.

[ianlintner-wf]

IDK if this will work but if it is a for loop of an array use an object or array value to bind the current.

<ion-list>
    <ion-item *ngFor="let item of items">
       <round-progress [current]="item.someProperty"></round-progress>
    </ion-item>
</ion-list>