added example for passing data into child component

Author: NickIliev

app/ui-category/listview/listview-examples.component.ts

@@ -4,7 +4,7 @@ import { Link } from "./../../link";
 let menuLinks = [
     new Link("Create ListView", "/list-view/creating-list-view"),
     new Link("Customize ListView", "/list-view/customizing-list-view"),
-    new Link("Use item template", "/list-view/using-item-template"),
+    new Link("Update Child Component", "/list-view/update-child-component"),
     new Link("Use async pipe", "/list-view/using-async-pipe")
 ];
 

app/ui-category/listview/listview-examples.module.ts

@@ -5,7 +5,7 @@ import { ListViewExamplesComponent } from "./listview-examples.component";
 import { CreatingListViewComponent } from "./creating-listview/creating-listview.component";
 import { CustomizingListViewComponent } from "./customizing-listview/customizing-listview.component";
 import { UsingAsyncPipeComponent } from "./using-async-pipe/using-async-pipe.component";
-import { UsingItemTemplateComponent, ItemComponent } from "./using-item-template/using-item-template.component";
+import { UpdateChildComponent, ItemComponent } from "./update-child-component/update-child-component.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -29,9 +29,9 @@ export const routerConfig = [
         data: { title: "Using async pipe" }
     },
     {
-        path: "using-item-template",
-        component: UsingItemTemplateComponent,
-        data: { title: "Using item template" }
+        path: "update-child-component",
+        component: UpdateChildComponent,
+        data: { title: "Update child component" }
     }
 ];
 
@@ -49,7 +49,7 @@ export const routerConfig = [
         CreatingListViewComponent,
         CustomizingListViewComponent,
         UsingAsyncPipeComponent,
-        UsingItemTemplateComponent
+        UpdateChildComponent
     ]
 })
 

app/ui-category/listview/update-child-component/article.md

@@ -0,0 +1,5 @@
+This example demonstrates how to use OnChanges to trigger updates in child components for data passed from parent component.
+The data is pased with `@Input` and the change is triggered via``ngOnCganges` with injecting `SimpleChnages` in the child's constructor.
+
+TypeScript
+<snippet id='update-child-component-code'/>

app/ui-category/listview/update-child-component/update-child-component.component.css

@@ -0,0 +1,10 @@
+.odd { 
+    vertical-align: center;
+    padding-left: 15;
+}
+
+.even {
+    color: #0099CC;
+    vertical-align: center;
+    padding-left: 15;
+}

app/ui-category/listview/update-child-component/update-child-component.component.html

@@ -0,0 +1,11 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+	<GridLayout rows="auto, *">
+		<ListView class="list-group" [items]="items" row="1">
+			<template let-item="item" let-odd="odd" let-even="even" >
+				<StackLayout [class.odd]="odd" [class.even]="even">
+					<sdk-child-component [data]="item"></sdk-child-component>
+				</StackLayout>
+			</template>
+		</ListView>
+	</GridLayout>
+</StackLayout>

app/ui-category/listview/update-child-component/update-child-component.component.ts

@@ -0,0 +1,37 @@
+// >> update-child-component-code
+import { Component, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from "@angular/core";
+
+@Component({
+    selector: "sdk-child-component",
+    moduleId: module.id,
+    template: `
+        <StackLayout orientation="horizontal">
+            <Label text="This is item with ID: " class="m-16" textWrap="true"></Label>
+            <Label [text]="myData.id" textWrap="true"></Label>
+        </StackLayout>
+    `
+})
+export class ItemComponent implements OnChanges {
+    @Input() data: any;
+    public myData: any;
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.myData = changes["data"].currentValue;
+    }
+}
+
+@Component({
+    styleUrls: ["./update-child-component.component.css"],
+    moduleId: module.id,
+    templateUrl: "./update-child-component.component.html"
+})
+export class UpdateChildComponent {
+    public items: Array<any> = [];
+
+    constructor() {
+        for (let index = 0; index < 20; index++) {
+            this.items.push({ "id": index + 1 });
+        }
+    }
+}
+// << update-child-component-code