Include new example for list picker

Author: SvetoslavTsenov

app/app.routes.ts

@@ -17,6 +17,9 @@ import { ListViewAsyncPipeComponent } from "./listView/asyncPipeTemplate/async-p
 import { ListViewMainPageComponent } from "./listView/listViewMainPage/list-view-main-page";
 import { ListViewWithNestedTemplateComponent } from "./listView/nestedTemplate/list-view-nested-template";
 
+import { ListPickerMainPageComponent } from "./listPicker/list-picker-main-page";
+import { ListPickerComponent } from "./listPicker/list-picker";
+
 import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
 import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
 
@@ -26,10 +29,9 @@ import { NavigationOptionsComponent } from "./navigation-options/navigation-opti
 import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
 import { MainComponent } from "./main/main-page-router-outlet";
 
-
 export var routableComponents = [];
 
-// Set isNavigatable: trueif the page is a mian page to other sub pages
+// Set isNavigatable: true if the page is a mian page to other sub pages
 export const routes = [
     routeEntry({ path: '', component: MainComponent, data: { title: "" } }),
     routeEntry({ path: '', component: ModalContent, data: { title: "" } }),
@@ -51,6 +53,9 @@ export const routes = [
     routeEntry({ path: 'listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent, data: { title: "asyncPipeTemplate" } }),
     routeEntry({ path: 'listView/nestedTemplate', component: ListViewWithNestedTemplateComponent, data: { title: "nestedTemplate" } }),
 
+    routeEntry({ path: 'listPicker', component: ListPickerMainPageComponent, data: { title: "ListPicker", isNavigatable: true } }),
+    routeEntry({ path: 'listPicker/list-picker', component: ListPickerComponent, data: { title: "ListPicker", isNavigatable: false } }),
+
     routeEntry({ path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} }),
     routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
     routeEntry({ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),

app/listPicker/list-picker-main-page.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "main",
+    template: `
+    <StackLayout>
+        <Button text="ListPicker" [nsRouterLink]="['/listPicker','list-picker']"></Button>        
+     </StackLayout>   
+    `, 
+})
+export class ListPickerMainPageComponent { }

app/listPicker/list-picker.css

@@ -0,0 +1,4 @@
+.listPicker {
+  color: green;
+  background-color: black;
+}

app/listPicker/list-picker.ts

@@ -0,0 +1,36 @@
+import { Component,Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'list',
+    styleUrls: ['./listPicker/list-picker.css'],
+    template: ` 
+                <StackLayout automationText="listPicker" >
+                    <ListPicker #picker class="listPicker"
+                        [items]="pokemons" [selectedIndex]="selectedIndex" 
+                        (selectedIndexChange)="selectedIndexChanged(picker)">
+                    </ListPicker>
+                </StackLayout>
+            `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class ListPickerComponent {
+    public pokemons: Array<string>;
+    public picked: string;
+
+    private pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
+"Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];
+
+    constructor() {
+        this.pokemons = [];
+
+        for (let i = 0; i < this.pokemonList.length; i++) {
+            this.pokemons.push(this.pokemonList[i]);
+        }
+    }
+
+    public selectedIndexChanged(picker) {
+        console.log("picker selection: " + picker.selectedIndex);
+        this.picked = this.pokemons[picker.selectedIndex];
+    }
+}

app/main/main-page-router-outlet.ts

@@ -1,5 +1,4 @@
 import { Component } from "@angular/core";
-import { routes } from "../app.routes";
 import * as platform from "platform";
 
 @Component({