Nativescript-angular: ListView - ngClass slows down scrolling performance

[NickIliev]

_From @haschu on January 16, 2017 19:3_

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Tell us about the problem

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.2
• Cross-platform modules: 2.4.4
• Runtime(s): tns-ios 2.4.0
• Plugin(s): nativescript-telerik-ui-pro

Please tell us how to recreate the issue in as much detail as possible.

Consider the following code with round about 100 items:

<ListView [items]="bars" class="list-group">
    <template let-bar="item">  
        <GridLayout columns="*, auto" rows="auto, *, *" class="list-group-item">
            <Label [text]="bar.foo" row="0" col="0"></Label>
            <Progress [value]="bar.progress" row="3" maxValue="100" color="#3498db" backgroundColor="#ecf0f1"></Progress>
        </GridLayout>
    </template>
</ListView>

Everything works pretty well, also the scrolling is very smooth. Now add [ngClass]="bar.something" to GridLayout:

<ListView [items]="bars" class="list-group">
    <template let-bar="item">  
        <GridLayout columns="*, auto" rows="auto, *, *" class="list-group-item" [ngClass]="bar.class">
            <Label [text]="bar.foo" row="0" col="0"></Label>
            <Progress [value]="bar.progress" row="3" maxValue="100" color="#3498db" backgroundColor="#ecf0f1"></Progress>
        </GridLayout>
    </template>
</ListView>

Now the scrolling isn't smooth anymore, it's kind of jerky and doesn't feels very well.
Does anybody know how to improve on that?

Maybe I am doing something wrong?
It would be great if someone could point me to the right direction :)

_Copied from original issue: NativeScript/NativeScript#3498_

[NickIliev]

_From @haschu on January 16, 2017 19:16_

Okay,
it seems that the problem only occurs when the applied classes differ. In my case, I have different classes in the top 20% of the ListView. So when I'm scrolling to that top 20%, it's jerky. The rest of the ListView, with same classes, scrolls pretty smooth.

Edit: The css classes don't apply any styles. So height etc. is the same for all list items.

[NickIliev]

@haschu instead of _ngClass_ use the class for setting your CSS styles in NativeScript like in your first example. Using ngClass is causing your styles to be applied after some additional operation which causes the overall slow performance.

[haschu]

@NickIliev Thanks for the reply.
Unfortunately the same problems still exists when I use [class]. Sorry that I didn't mention that in my first post. Also ngIf within list items seems to break the scrolling performance.

Edit: Also, as I mentioned before, I don't apply any styles. There aren't any corresponding css classes in a css-File.

[NickIliev]

@haschu the reason for the bad performance when using structural directives (like *ngIf) in list-views is because the list views are optimised with virtualising and recycling the cells, and the structural directives break down both optimisations. More about this and how to handle this issue in this blog post .

I think using item templates, as mentioned in the blog post, will resolve both your issues as you won't need to use CSS classes anymore (preferable to the item templates).

[haschu]

@NickIliev Thanks! Great blog post - I'll give it a try. I think the issue can be closed for now. :-)

[haschu]

Anyways, maybe it wouldn't be a bad idea to improve on that - because those scenarios are very common in the angular world.

[Fedelaus]

Is this a concrete can't-fix/wont-fix?

As @haschu said, this is a common scenario within the angular world and generally is the way most people coming from a purely Angular background would do this.

As well as this, it's not mentioned anywhere in the documentation as far as I can see:

https://docs.nativescript.org/angular/ui/ng-ui-widgets/listview

Whilst this page utilizes a ng-template it's not documented anywhere as to why, and that page doesn't mention anything about performance when using structural directives within the listview.