Merge pull request #277 from NativeScript/nnikolov/ListViewCustomTemplateFix

Fixed problem with ListView in ios when CustomTemplate is used.

Author: Nedyalko Nikolov

nativescript-angular/directives/list-view-comp.ts

@@ -12,7 +12,9 @@ import {
     ChangeDetectorRef,
     EventEmitter,
     ViewChild,
-    Output} from '@angular/core';
+    Output,
+    ChangeDetectionStrategy} from '@angular/core';
+import {isBlank} from '@angular/core/src/facade/lang';
 import {isListLikeIterable} from '@angular/core/src/facade/collection';
 import {Observable as RxObservable} from 'rxjs'
 import {ListView} from 'ui/list-view';
@@ -45,7 +47,8 @@ export interface SetupItemViewArgs {
         <DetachedContainer>
             <Placeholder #loader></Placeholder>
         </DetachedContainer>`,
-    inputs: ['items']
+    inputs: ['items'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListViewComponent {
     public get nativeElement(): ListView {
@@ -97,6 +100,10 @@ export class ListViewComponent {
         if (args.view) {
             console.log("ListView.onItemLoading: " + index + " - Reusing existing view");
             viewRef = args.view[NG_VIEW];
+            // getting angular view from original element (in cases when ProxyViewContainer is used NativeScript internally wraps it in a StackLayout)
+            if (!viewRef) {
+                viewRef = (args.view._subViews && args.view._subViews.length > 0) ? args.view._subViews[0][NG_VIEW] : undefined;
+            }
         }
         else {
             console.log("ListView.onItemLoading: " + index + " - Creating view from template");
@@ -108,6 +115,9 @@ export class ListViewComponent {
     }
 
     public setupViewRef(viewRef: EmbeddedViewRef<ListItemContext>, data: any, index: number): void {
+        if (isBlank(viewRef)) {
+            return;
+        }
         const context = viewRef.context;
         context.$implicit = data;
         context.item = data;

ng-sample/app/examples/list/list-test.ts

@@ -6,35 +6,32 @@ class DataItem {
     constructor(public id: number, public name: string) { }
 }
 
-// @Component({
-//     selector: 'item-component',
-//     template: `
-//         <StackLayout [class.odd]="odd" [class.even]="even">
-//             <Label [text]='"id: " + data.id'></Label>
-//             <Label [text]='"name: " + data.name'></Label>
-//         </StackLayout>
-//     `
-// })
-// export class ItemComponent {
-//     @Input() data: DataItem;
-//     @Input() odd: boolean;
-//     @Input() even: boolean;
-//     constructor() { }
-// }
+@Component({
+    selector: 'item-component',
+    template: `
+        <StackLayout [class.odd]="odd" [class.even]="even">
+            <Label [text]='"id: " + data.id'></Label>
+            <Label [text]='"name: " + data.name'></Label>
+        </StackLayout>
+    `
+})
+export class ItemComponent {
+    @Input() data: DataItem;
+    @Input() odd: boolean;
+    @Input() even: boolean;
+    constructor() { }
+}
 
 @Component({
     selector: 'list-test',
-    //directives: [ItemComponent],
+    directives: [ItemComponent],
     template: `
             <GridLayout rows="auto, *, auto, auto">
             <Label row="0" text="-==START==-" fontSize="20"></Label>
             <GridLayout row="1">
                 <ListView [items]="myItems" (itemTap)="onItemTap($event)">
                     <template let-item="item" let-i="index" let-odd="odd" let-even="even">
-                        <StackLayout [class.odd]="odd" [class.even]="even">
-                            <Label [text]='"index: " + i'></Label>
-                            <Label [text]='"[" + item.id +"] " + item.name'></Label>
-                        </StackLayout>
+                        <item-component [data]="item" [odd]="odd" [even]="even"></item-component>
                     </template>
                 </ListView>
             </GridLayout>
@@ -47,12 +44,12 @@ class DataItem {
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
     // TEMPLATE WITH COMPONENT
-    // <template #item="item" #i="index" #odd="odd" #even="even">
+    // <template let-item="item" let-i="index" let-odd="odd" let-even="even">
     //     <item-component [data]="item" [odd]='odd' [even]='even'></item-component>
     // </template>
 
     // IN-PLACE TEMPLATE
-    // <template #item="item" #i="index" #odd="odd" #even="even">
+    // <template let-item="item" let-i="index" let-odd="odd" let-even="even">
     //     <StackLayout [class.odd]="odd" [class.even]="even">
     //         <Label [text]='"index: " + i'></Label>                        
     //         <Label [text]='"[" + item.id +"]" + item.name'></Label>
@@ -88,5 +85,4 @@ export class ListTest {
         var label = <Label>page.getViewById("testLabel");
         label.text = "Alabala";
     }
-}
-
+}