ListView - ngClass slows down scrolling performance

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

[Oatelaus]

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.

[haschu]

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