Include binding test page

Author: SvetoslavTsenov

app/binding/binding-page.ts

@@ -0,0 +1,61 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: "binding",
+    templateUrl: 'binding/binding-page.xml'
+})
+
+export class BindingComponent {
+    private _oneWayDataBinding: string;
+    private _twoWayDataBinding: string;
+    private _curlyBracket: string;
+    private _result: string;
+
+    constructor() {
+        this.refresh();
+    }
+
+    get oneWayDataBinding() {
+        return this._oneWayDataBinding;
+    }
+
+    get twoWayDataBinding() {
+        return this._twoWayDataBinding;
+    }
+
+    set twoWayDataBinding(value: string) {
+        this._twoWayDataBinding = value;
+    }
+
+    get curlyBracket() {
+        return this._curlyBracket;
+    }
+
+    set curlyBracket(value: string) {
+        this._curlyBracket = value;
+    }
+
+    get results() {
+        return this._result;
+    }
+
+    changeValues() {
+        this._oneWayDataBinding = this.twoWayDataBinding;
+        this._curlyBracket = this.twoWayDataBinding;
+        this._twoWayDataBinding = this.twoWayDataBinding;
+    }
+
+    getValues() {
+        this._result = "";
+        this._result += "one-way value is " + this.oneWayDataBinding + "; \n";
+        this._result += "two-way value is " + this.twoWayDataBinding + "; \n";
+        this._result += "curly-bracket value is " + this.curlyBracket + "; \n";
+    }
+
+    private refresh() {
+        this._oneWayDataBinding = "one-way";
+        this._twoWayDataBinding = "two-way";
+        this._curlyBracket = "curly-bracket";
+        this._result = ""
+    }
+}

app/binding/binding-page.xml

@@ -0,0 +1,11 @@
+<StackLayout>
+    <TextField hint="oneWayDataBinding" automationText="tfOneWayBinding" keyboardType="email" [text]="oneWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
+    <TextField hint="twoWayDataBindingBanana" automationText="tfTwoWayBinding" keyboardType="email" [(ngModel)]="twoWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
+    <TextField hint="" automationText="tfCurlyBracket" keyboardType="email" text="{{ curlyBracket }}" autocorrect="false" autocapitalizationType="none"></TextField>
+    <Label automationText="lbCurlyBracketBinding" text='Label with curlyBaracket binding: {{ twoWayDataBinding }}'></Label>
+    <StackLayout orientation="horizontal">
+        <Button (tap)="changeValues()" automationText="btnSaveChanges" text="update" width="80" height="40"></Button>
+        <Button (tap)="getValues()" automationText="getValues" text="get" width="80" height="40"></Button>
+    </StackLayout>
+    <TextView [text]="results" automationText="tvResults" textWrap="true"></TextView>
+</StackLayout>

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

@@ -8,6 +8,7 @@ import {AppComponent} from "../template/app.component";
 import {FirstComponent} from "../components/first.component";
 import {SecondComponent} from "../components/second.component";
 import {NavigationTestRouter} from "../router/router-outlet";
+import {BindingComponent} from "../binding/binding-page";
 
 @Component({
     selector: "main",
@@ -24,6 +25,7 @@ import {NavigationTestRouter} from "../router/router-outlet";
             <Button text="ActionBar1" [nsRouterLink]="['FirstActionBar']"></Button>
             <Button text="ActionBar2" [nsRouterLink]="['SecondActionBar']"></Button>
         </StackLayout>
+        <Button text="Binding" [nsRouterLink]="['Binding']"></Button>        
     </StackLayout>
     `,
 })
@@ -43,5 +45,8 @@ class MainComponent { }
     { path: '/action-bar-test/...', component: ActionBarTest, name: 'ActionBar' },
     { path: '/first-action-bar', component: FirstComponentActionBar, name: 'FirstActionBar' },
     { path: '/second-action-bar', component: SecondComponentActionBar, name: 'SecondActionBar' },
+    { path: '/binding', component: BindingComponent, name: 'Binding' },
+    
+    
 ])
 export class NavigationMainPageRouter { }