Example: *ng-if for a details TextView.

hdeshev · hdeshev · commit c56e309627dc · 2015-07-09T18:58:33.000+03:00
Binding change update doesn't seem to work yet.
diff --git a/ng-sample/src/main-page.ts b/ng-sample/src/main-page.ts
@@ -2,7 +2,7 @@ import {topmost} from 'ui/frame';
 import {TextView} from 'ui/text-view';
 
 import 'reflect-metadata';
-import {Component, View} from 'angular2/angular2';
+import {Component, View, NgIf} from 'angular2/angular2';
 
 import {nativeScriptBootstrap} from 'nativescript-angular/application';
 
@@ -12,29 +12,35 @@ import {nativeScriptBootstrap} from 'nativescript-angular/application';
 	}
 })
 @View({
+    directives: [NgIf],
 	template: `
 <StackLayout orientation='vertical'>
     <Label text='Name' fontSize='32' verticalAlignment='center' padding='20'></Label>
     <TextField #name text='John' fontSize='32' padding='20'></TextField>
-    <Button [text]='buttonText' (tap)='onButtonTap($event, name)'></Button>
+    <Button [text]='buttonText' (tap)='onSave($event, name.text)'></Button>
+    <Button text='Toggle details' (tap)='onToggleDetails()'></Button>
+    <TextView *ng-if='showDetails' [text]='detailsText'></TextView>
 </StackLayout>
 `,
-	directives: []
 })
 class MainPage {
     public buttonText: string = "";
+    public showDetails: boolean = false;
+    public detailsText: string = "";
 
     constructor() {
-        this.buttonText = 'Tap me, baby, one more time!'
+        this.buttonText = 'Save...'
+        this.showDetails = true;
+        this.detailsText = 'Some details and all...';
     }
 
-    onButtonTap($event, nameTextField) {
-        console.log('onButtonTap event ' + $event);
-        console.log('onButtonTap nameText ' + nameTextField);
-        let e = new Error();
-        console.log((<any>e).stack);
-        //alert($event.object.text);
-        alert(nameTextField.text);
+    onSave($event, name) {
+        console.log('onSave event ' + $event + ' name ' + name);
+        alert(name);
+    }
+    onToggleDetails() {
+        console.log('onToggleDetails current: ' + this.showDetails);
+        this.showDetails = !this.showDetails;
     }
 }
 
diff --git a/src/nativescript-angular/view_node.ts b/src/nativescript-angular/view_node.ts
@@ -5,6 +5,7 @@ import {Button} from 'ui/button';
 import {StackLayout} from 'ui/layouts/stack-layout';
 import {Label} from 'ui/label';
 import {TextField} from 'ui/text-field';
+import {TextView} from 'ui/text-view';
 import {NativeScriptView} from 'nativescript-angular/renderer';
 import {AST} from 'angular2/src/change_detection/parser/ast';
 
@@ -20,6 +21,7 @@ export class ViewNode {
         ["button", Button],
         ["stacklayout", StackLayout],
         ["textfield", TextField],
+        ["textview", TextView],
         ["label", Label]
     ]);
 
@@ -115,6 +117,7 @@ export class ViewNode {
     }
 
     public insertChildAt(index: number, childNode: ViewNode) {
+        console.log('ViewNode.insertChildAt: ' + this.viewName + ' ' + index + ' ' + childNode.viewName);
         this.children[index] = childNode;
         childNode.parentNode = this;
 
