Dynamic binding slow!


Hello can anyone tell me how to fast dyamic bibding in ionic 2,
If i am doing statically by adding ion list and ion items, even if I add 400 items it is fast.
But when I bind from json file and put json data in array and iterate ion list over that loop. It shows items after some time like 4 seconds. How to fast it as static items? Any solution? Quick one…


Perhaps you can provide a code sample of what you are currently doing?

   <ion-list *ngFor="let item of data">
      <ion-item no-lines id="English{{item.Time}}" [hidden]="!settingsData.showEnglish" [ngStyle]="{'font-size': settingsData.fontSize+'px','color':settingsData.fontColor}">

in .ts file add json file to an array
this.data = data.json();

Items are more than 500 of lines. I thinlk that’s why it is slow!


Don’t know if it will change that much, but the ngFor should be placed on the item, not on the ion-list. Unless you want to generate a list and item for all items in the array you are looping over.


No this will not work, I have to iterate on ion-list. Item contents are different.


Uhm. The item variable should be available on the ion-item when doing:

<ion-item *ngFor="let item of data" [id]="'English' + item.Time">{{item.EnglishItem}}</ion-item>

unless I misunderstand your intent.

Also, I guess you have factored in the time it takes to fetch these items from the server?


No It is local json file.


Sorry, my bad. Sound very weird. So the file load itself is fast? Have you tried removing all but the {{item.EnglishItem}} inside the ion-item? Just to see if the ngStyle influences anything.


Let me check it bro :slight_smile:


Also what browser is this in?

I see this issue is still open: https://github.com/angular/angular/issues/8112

Have you also tried enabling prodMode for angular and check if it makes a difference?