Merge pull request #342 from NativeScript/nnikolov/TabViewDirectiveRevised

Added title and iconSource properties to TabViewDirective.

Author: Nedyalko Nikolov

nativescript-angular/directives/tab-view.ts

@@ -38,10 +38,13 @@ export class TabViewDirective {
 }
 
 @Directive({
-    selector: '[tabItem]'
+    selector: '[tabItem]',
+    inputs: ['title', 'iconSource']
 })
 export class TabViewItemDirective {
     private item: TabViewItem;
+    private _title: string;
+    private _iconSource: string;
 
     constructor(
         private owner: TabViewDirective,
@@ -52,11 +55,34 @@ export class TabViewItemDirective {
 
     @Input('tabItem') config: any;
 
+    set title(value: string) {
+        if (this._title !== value) {
+            this._title = value;
+            this.ensureItem();
+            this.item.title = this._title;
+        }
+    }
+
+    set iconSource(value: string) {
+        if (this._iconSource !== value) {
+            this._iconSource = value;
+            this.ensureItem();
+            this.item.iconSource = this._iconSource;
+        }
+    }
+
+    private ensureItem() {
+        if (!this.item) {
+            this.item = new TabViewItem();
+        }
+    }
+
     ngOnInit() {
-        this.item = new TabViewItem();
-        this.item.title = this.config.title;
-        
-        this.item.iconSource = this.config.iconSource;
+        this.ensureItem();
+        if (this.config) {
+            this.item.title = this._title || this.config.title;
+            this.item.iconSource = this._iconSource || this.config.iconSource;
+        }
 
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
         //Filter out text nodes, etc
@@ -70,4 +96,4 @@ export class TabViewItemDirective {
             this.owner.tabView.items = newItems;
         }
     }
-}
+}

ng-sample/app/examples/tab-view/tab-view-test.html

@@ -1,7 +1,9 @@
-<TabView selectedIndex="1" selectedColor="#FF0000">
-    <StackLayout *tabItem="{title: 'Profile', iconSource: '~/icon.png'}" >
-        <Label text="First tab item"></Label>
-    </StackLayout>
+<TabView tabsBackgroundColor="#31bcff" #element [(ngModel)]="selectedIndex">
+    <template tabItem title="{{selectedIndex === 0 ? 'Profile' : 'Test'}}">
+        <StackLayout>
+            <Label text="First tab item"></Label>
+        </StackLayout>
+    </template>
     <StackLayout *tabItem="{title: 'Stats'}">
         <Label text="Second tab item"></Label>
     </StackLayout>