Multiple lists performance / improvements

Hi everyone!

So we’re working on an application where there are multiple lists on a single page - it can be a total of 7 different lists on the same page. The amount of items per list may vary.

Right, so the problem is performance. I’ve tried using ion-virtual-scroll which results in not all the items showing as the lists as wrapped and doesn’t really have a static size. I’ll provide some code:

Any ideas?

In addition, when sorting given lists the performance is inadequate. Are there any ways around this?

Kinds regards,


Add a trackby in the outer ngfor?
Do not bind to function in the progress part?
Use changestrategy.onpush?
Use devtools to inspect? Imho it is change detection and the whole dom rendering hitting u. Then u may also want to rethink Ui.

Or other option is not to use ionic components for some parts but styled span/divs. Ionic conponents are webcomponents and a bit heavier

Nested ngfors may be an issue too, can you refactor the datamodel and template to have only one ngfor?



Hi Tom,

Given that the outer ngFor is simply an array of strings (track types - we’re working for a rail company. Eg [“maintrack”, “sidetrack”…]) , it won’t change thus a trackby will not affect anything.

I’ll give changeStategy.onpush a try.
If not, I’ll try to refactor.

At the moment I’ve changed to a ion-infinite-scroll approach and use the slice pipe to show only parts at a time since the users will most likely only work on one list at a time (But need to show all…). This is working quite alright at the moment.

1 Like