RadListView does not apply conditional styling to top level template container

[rbudnar]

Tell us about the problem

Conditional ~classes/styles~ background colors (update: borders work fine, this might just be a background color issue) are not applied to a container that is the immediate child of the list item ng-template for a RadListView. This works properly on ListView items, though. See playground for an example of a ListViewthat works as expected and a RadListView that does not.

E.g.,:

<RadListView [items]="countries" (itemTap)="onItemTap($event)"  style="height:40%">
        <ng-template tkListItemTemplate let-country="item" let-i="index">
            <FlexboxLayout flexDirection="row" [class.odd]="i % 2 === 0">  
                <!-- Styles for class.odd are NOT applied when the conditional is met. -->
                 .... 
             </FlexboxLayout>
        </ng-template>
</RadListView>

The workaround here seems to be to wrap the container that needs conditional formatting in another container. However, at least according to https://www.nativescript.org/blog/nativescript-angular-performance-tips-tricks, additional containers can cause performance issues which I am (unsuccessfully) trying to resolve. In my own application a RadListView with 10+ items is causing a navigation to the screen with the RadListView to take 4-5 seconds (following the renderView trick listed in the aforementioned article reduces that time, but the RadListView is still very slow to load).

Which platform(s) does your issue occur on?

• Android. I do not have iOS available at the moment for testing.

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

• Progress NativeScript UI plugin version:"nativescript-ui-listview": "^8.0.1",
• CLI: 6.4.0
• Cross-platform modules: "@nativescript/core": "^6.4.1"
• Runtime(s): android: 6.4.1

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

1. Use a RadListView and apply conditional styling to the immediate child of the ng-template to be used as the list item template. Note that this works as expected in a ListView.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Here's a playground with an example: https://play.nativescript.org/?_ga=2.23605178.1264825467.1584367841-1629494783.1579262464&template=play-ng&id=CEtjAS&v=3 In this example, every other list item should have the odd class applied to it which simply changes the background color to red. Note that the ListView works as expected whereas the RadListView does not. Other than the tkListItemTemplate applied for the RadListView, the code for the lists should be identical.

UPDATE: This might be specific to the background-color property. Looks like adding a conditional border as an example is fine without a wrapper.