Using shadow on RadListView list items causes errors

Which platform(s) does your issue occur on?

iOS
iPhone 6
Simulator

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

CLI: 4.1.0
Cross-platform modules: 4.1.1
Runtime(s): tns-ios version 4.1.1
Plugin(s): "dependencies": { "@angular/animations": "6.0.0", "@angular/common": "6.0.0", "@angular/compiler": "6.0.0", "@angular/core": "6.0.0", "@angular/forms": "6.0.0", "@angular/http": "6.0.0", "@angular/platform-browser": "6.0.0", "@angular/platform-browser-dynamic": "6.0.0", "@angular/router": "6.0.0", "angular-logger": "^0.1.4", "nativescript-angular": "6.0.0", "nativescript-checkbox": "^2.1.11", "nativescript-gradient": "^2.0.1", "nativescript-iqkeyboardmanager": "^1.3.0", "nativescript-ngx-shadow": "^6.1.0", "nativescript-pulltorefresh": "^2.0.2", "nativescript-theme-core": "~1.0.2", "nativescript-ui-listview": "^3.5.7", "nativescript-version-number": "^1.1.0", "reflect-metadata": "~0.1.8", "rxjs": "~6.0.0", "rxjs-compat": "^6.2.0", "tns-core-modules": "^4.1.0", "tns-platform-declarations": "^3.4.0", "zone.js": "~0.8.26" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "codelyzer": "^4.3.0", "cross-env": "^5.1.1", "lazy": "1.0.11", "mkdirp": "^0.5.1", "nativescript-dev-sass": "^1.3.2", "nativescript-dev-typescript": "~0.7.0", "rxjs-tslint": "^0.1.4", "tslint": "^5.10.0", "typescript": "~2.7.2" }

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

Describe the steps to reproduce it.

Adding the shadow to the list item, causes the following errors in console: CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating'_v.context.item.alertDate')

Remove this: shadow [elevation]="5" from the code below, and all is well.

Is there any code involved?

<GridLayout *ngIf="!isBusy" rows="*">
    <RadListView class="list-background" [items]="items" pullToRefresh="true" (pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
        loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [itemTemplateSelector]="templateSelector" (itemLoading)="onItemLoading($event)" row="0">

        <ng-template tkTemplateKey="pending" let-item="item">
            <GridLayout class="list-item pending" shadow [elevation]="5" rows="25, auto" columns="5*, 2*">
                <StackLayout class="list-item-heading" row="0" colSpan="2">
                    <Label class="date pull-right" [text]="item.alertDate | date:'mediumDate'" textWrap="true"></Label>                    
                </StackLayout>
                <Label class="alert-desc" [text]="getAlertType(item.alertType) + ': ' + item.message" textWrap="true" row="1" col="0"></Label>
                <Label class="amount" [text]="item.amount | centsToDollars | currency:'USD':'symbol-narrow'" textWrap="true" row="1" col="1"></Label>
            </GridLayout>
        </ng-template>

        ...

    </RadListView>

</GridLayout>

I saw this same error when using the shadow on text fields which were not included in a RadListView as well.

This is not an issue with this plugin, but with Nativescript. When you hook a "loaded" event, for some reason, nativescript sends "undefined" or "null" as the item in a ListView (or RadListView). See https://github.com/NativeScript/nativescript-angular/issues/1221 and the last comments in the thread. I haven't had the time to open an issue on https://github.com/telerik/nativescript-ui-feedback, but you can go ahead if you want and I'll add a comment to it.

As a workaround, use *ngIf="item on your shadowed component and add a Layout around it, like so:

<GridLayout *ngIf="!isBusy" rows="*">
    <RadListView class="list-background" [items]="items" pullToRefresh="true" (pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
        loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [itemTemplateSelector]="templateSelector" (itemLoading)="onItemLoading($event)" row="0">

        <ng-template tkTemplateKey="pending" let-item="item">
           <StackLayout>
            <GridLayout *ngIf="item" class="list-item pending" shadow [elevation]="5" rows="25, auto" columns="5*, 2*">
                <StackLayout class="list-item-heading" row="0" colSpan="2">
                    <Label class="date pull-right" [text]="item.alertDate | date:'mediumDate'" textWrap="true"></Label>                    
                </StackLayout>
                <Label class="alert-desc" [text]="getAlertType(item.alertType) + ': ' + item.message" textWrap="true" row="1" col="0"></Label>
                <Label class="amount" [text]="item.amount | centsToDollars | currency:'USD':'symbol-narrow'" textWrap="true" row="1" col="1"></Label>
            </GridLayout>
           </StackLayout>
        </ng-template>

        ...

    </RadListView>

</GridLayout>

JoshDSommer / nativescript-ngx-shadow