Merge pull request NativeScript#204 from NativeScript/nnikolov/TabViewSelectedIndex

Nedyalko Nikolov · Nedyalko Nikolov · commit 74cf022bfe4a · 2016-04-28T18:00:52.000+03:00
TabView selectedIndex to work with binding.
diff --git a/src/nativescript-angular/directives/list-view-comp.ts b/src/nativescript-angular/directives/list-view-comp.ts
@@ -6,7 +6,6 @@ import {
     ContentChild, 
     AppViewManager,
     EmbeddedViewRef,
-    ViewContainerRef,
     HostListener, 
     IterableDiffers, 
     IterableDiffer,
diff --git a/src/nativescript-angular/directives/tab-view.ts b/src/nativescript-angular/directives/tab-view.ts
@@ -1,16 +1,34 @@
 import {ElementRef, Directive, Input, TemplateRef, ViewContainerRef} from "angular2/core";
 import {TabView, TabViewItem} from "ui/tab-view";
-import {isView} from "../view-util";
 
 @Directive({
-    selector: 'TabView'
+    selector: 'TabView',
+    inputs: ['selectedIndex']
 })
 export class TabViewDirective {
     public tabView: TabView;
+    private _selectedIndex: number;
+    private viewInitialized: boolean;
+    
+    get selectedIndex(): number {
+        return this._selectedIndex;
+    }
+    
+    set selectedIndex(value: number) {
+        this._selectedIndex = value;
+        if (this.viewInitialized) {
+            this.tabView.selectedIndex = this._selectedIndex;
+        }
+    }
 
     constructor(private element: ElementRef) {
         this.tabView = element.nativeElement;
     }
+    
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.tabView.selectedIndex = this._selectedIndex;
+    }
 }
 
 @Directive({
diff --git a/src/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts b/src/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts
@@ -18,7 +18,7 @@ export type SelectableView = {selectedIndex: number} & View;
  *  ```
  */
 @Directive({
-    selector: 'SegmentedBar[ngModel], ListPicker[ngModel]',
+    selector: 'SegmentedBar[ngModel], ListPicker[ngModel], TabView[ngModel]',
     host: { '(selectedIndexChange)': 'onChange($event.value)' },
     bindings: [SELECTED_INDEX_VALUE_ACCESSOR]
 })
@@ -28,6 +28,9 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
     constructor(elementRef: ElementRef) {
         super(elementRef.nativeElement);
     }
+    
+    private _normalizedValue: number;
+    private viewInitialized: boolean;
 
     writeValue(value: any): void {
         let normalizedValue;
@@ -41,7 +44,15 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
                 normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
             }
         }
-        this.view.selectedIndex = Math.round(normalizedValue);
+        this._normalizedValue = Math.round(normalizedValue);
+        if (this.viewInitialized) {
+            this.view.selectedIndex = this._normalizedValue;
+        }
+    }
+    
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.view.selectedIndex = this._normalizedValue;
     }
 
     registerOnTouched(fn: () => void): void { this.onTouched = fn; }
diff --git a/tests/app/tests/value-accessor-tests.ts b/tests/app/tests/value-accessor-tests.ts
@@ -98,14 +98,17 @@ describe("two-way binding via ng-model", () => {
 
     it("converts strings to int selection", () => {
         const accessor = new TestSelectedIndexValueAccessor()
-
+        
         accessor.writeValue(null);
+        accessor.ngAfterViewInit();
         assert.strictEqual(0, accessor.view.selectedIndex, "default to 0 on empty")
 
         accessor.writeValue("3");
+        accessor.ngAfterViewInit();
         assert.strictEqual(3, accessor.view.selectedIndex)
 
         accessor.writeValue("blah");
+        accessor.ngAfterViewInit();
         assert.strictEqual(0, accessor.view.selectedIndex, "default to 0 on parse errors")
     });
 
