Merge pull request #562 from NativeScript/list-templates-snippets

LIstView template selector snippets

Author: Alexander Vakrilov

tests/app/snippets/list-view/template-selector.component.html

@@ -0,0 +1,11 @@
+<!-- >> list-view-template-selector -->
+<ListView [items]="myItems" [itemTemplateSelector]="templateSelector">
+    <template nsTemplateKey="header" let-item="item">
+        <header-component [data]="item"></header-component>
+    </template>
+    
+    <template nsTemplateKey="item" let-item="item">
+        <item-component [data]="item"></item-component>
+    </template>
+</ListView>
+<!-- << list-view-template-selector -->

tests/app/snippets/list-view/template-selector.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input, Injectable } from '@angular/core';
+
+class DataItem {
+    private static count = 0;
+    public id: number;
+    constructor(public name: string, public isHeader: boolean) {
+        this.id = DataItem.count++;
+    }
+}
+
+@Component({
+    selector: 'header-component',
+    template: `<Label [text]='"HEADER: " +data.name'></Label>`
+})
+export class HeaderComponent {
+    @Input() data: DataItem;
+}
+
+@Component({
+    selector: 'item-component',
+    template: `<Label [text]='"ITEM: " + data.name'></Label>`
+})
+export class ItemComponent {
+    @Input() data: DataItem;
+}
+
+@Injectable()
+export class DataService {
+    public getItems(): DataItem[] {
+        const result = [];
+        for (let headerIndex = 0; headerIndex < 10; headerIndex++) {
+            result.push(new DataItem("Header " + headerIndex, true));
+
+            for (let i = 1; i < 10; i++) {
+                result.push(new DataItem(`item ${headerIndex}.${i}`, false));
+            }
+        }
+        return result;
+    }
+}
+
+@Component({
+    moduleId: module.id,
+    selector: 'list-test',
+    templateUrl: "./template-selector.component.html"
+})
+// >> list-view-template-selector
+export class ListTemplateSelectorTest {
+    public myItems: Array<DataItem>;
+
+    public templateSelector = (item: DataItem, index: number, items: any) => {
+        return item.isHeader ? "header" : "item";
+    }
+
+    constructor(private dataService: DataService) {
+    }
+
+    ngOnInit() {
+        this.myItems = this.dataService.getItems();
+    }
+}
+// << list-view-template-selector

tests/app/snippets/navigation/page-outlet.ts

@@ -1,4 +1,4 @@
-import {TestApp, registerTestApp} from "../../tests/test-app";
+import { TestApp, registerTestApp } from "../../tests/test-app";
 import { ApplicationRef } from '@angular/core';
 import { Router, NavigationStart, NavigationEnd } from "@angular/router";
 // >> page-outlet-example
@@ -46,7 +46,7 @@ export class PageNavigationApp {
         NativeScriptRouterModule.forRoot(routes)
     ]
 })
-export class PageNavigationAppModule {}
+export class PageNavigationAppModule { }
 
 // >> (hide)
 function start_snippet_() {

tests/app/tests/snippets.ts

@@ -1,20 +1,21 @@
 //make sure you import mocha-config before @angular/core
-import {assert} from "./test-config";
+import { assert } from "./test-config";
 
-import {NavigationEnd, NavigationStart} from "@angular/router";
-import {Subscription} from "rxjs";
-import {TestApp, bootstrapTestApp, destroyTestApp} from "./test-app";
+import { NavigationEnd, NavigationStart } from "@angular/router";
+import { Subscription } from "rxjs";
+import { TestApp, bootstrapTestApp, destroyTestApp } from "./test-app";
 
-import {GestureComponent} from "../snippets/gestures.component";
-import {LayoutsComponent} from "../snippets/layouts.component";
-import {IconFontComponent} from "../snippets/icon-font.component";
+import { GestureComponent } from "../snippets/gestures.component";
+import { LayoutsComponent } from "../snippets/layouts.component";
+import { IconFontComponent } from "../snippets/icon-font.component";
 
-import {PageNavigationApp} from "../snippets/navigation/page-outlet";
-import {NavigationApp} from "../snippets/navigation/router-outlet";
-import {FirstComponent, SecondComponent} from "../snippets/navigation/navigation-common";
-import {routes} from "../snippets/navigation/app.routes";
+import { PageNavigationApp } from "../snippets/navigation/page-outlet";
+import { NavigationApp } from "../snippets/navigation/router-outlet";
+import { FirstComponent, SecondComponent } from "../snippets/navigation/navigation-common";
+import { routes } from "../snippets/navigation/app.routes";
+import { HeaderComponent, ItemComponent, DataService, ListTemplateSelectorTest } from "../snippets/list-view/template-selector.component";
 
-import {device, platformNames} from "platform";
+import { device, platformNames } from "platform";
 const IS_IOS = (device.os === platformNames.ios);
 
 describe('Snippets', () => {
@@ -107,3 +108,27 @@ describe('Snippets Navigation', () => {
         });
     });
 });
+
+describe('Snippets ListView', () => {
+    let runningApp: any;
+
+    const cleanup = () => {
+        if (runningApp) {
+            destroyTestApp(runningApp);
+            runningApp = null;
+        }
+    };
+
+    after(cleanup);
+
+    it("template selector", (done) => {
+        bootstrapTestApp(ListTemplateSelectorTest, [DataService], null, [HeaderComponent, ItemComponent, ListTemplateSelectorTest])
+            .then((app) => {
+                setTimeout(() => {
+                    cleanup();
+                    done();
+                }, 100);
+            })
+            .catch(err => done(err));
+    });
+});