NativeScript Telerik-UI using ListViewStaggeredLayout for images in RadListView

Question

I have a NativeScript/Angular2 app using Telerik-UI, when I try to display images using ListViewStaggeredLayout directive in a RadListView I get a blank page. Using same code to display text works OK, i.e. 2 columns and staggered layout. Using ListViewGridLayout to display images works as well. I have seen old Telerik documentation showing this is/was possible with images, but I cannot figure out what to set. The HTML code is below. Thanks.

<RadListView [items]="pictures">
    <template tkListItemTemplate let-item="item">
        <GridLayout>
            <Image col="0" src="{{ 'res://listview/layouts/' + item.photo + '.jpg' }}" stretch="aspectFill" loadMode="async"></Image>
            <!-- <Label col="0" [text]="item.title" textWrap="true"></Label> -->
        </GridLayout>
    </template>
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2" itemWidth="180"></ListViewStaggeredLayout>
    <!-- <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200" spanCount="2"></ListViewGridLayout> -->
</RadListView>

Answer 1

It looks like you have used a non Angular 2 binding syntax ( {{ ... }} ) for the src of the Image in the tkListItemTemplate. Simply change it to something like [src]="'res://listview/layouts/' + item.photo + '.jpg'" and all should be working. Or even better remove the hard coded res://listview/layouts/ and '.jpg' and add them to "data item object's .photo property", having such hard coded strings in bindings is not a good approach.

I have tested this with this template and all works as expected:

<GridLayout>
    <RadListView [items]="staggeredItems">
        <template tkListItemTemplate let-item="item">
            <GridLayout class="listItemTemplateGrid">
                <Image [src]="item.image" stretch="aspectFill"></Image>
                <GridLayout verticalAlignment="bottom">
                    <StackLayout class="labelsStackLayout">
                        <Label [text]="item.title"></Label>
                        <Label [text]="item.description"></Label>
                    </StackLayout>
                </GridLayout>
            </GridLayout>
        </template>

        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
    </RadListView>
</GridLayout>

The staggeredItems are of this class:

export class DataItem {
    constructor(public description?: string, public title?: string,  public image?: string) {
    }
}