feat(demo): access static tabs sample (#1603)

.travis.yml

@@ -33,4 +33,4 @@ addons:
     - ubuntu-toolchain-r-test
     # required by node-gyp to build some packages
     packages:
-    - g++-4.8
+    - g++-4.8

demo/src/app/components/+tabs/demos/basic/basic.html

@@ -1,10 +1,26 @@
-<tabset>
-  <tab heading="Static title">Static content</tab>
-  <tab (select)="alertMe()">
-    <template tabHeading>
-      <i class="glyphicon glyphicon-bell"></i> Alert!
-    </template>
-    I've got an HTML heading, and a select callback. Pretty cool!
-  </tab>
-</tabset>
+<div>
+  <p>Access to static tab from component</p>
+  <p>
+    <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(1)">Select second tab</button>
+    <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(2)">Select third tab</button>
+  </p>
+  <p>
+    <button type="button" class="btn btn-primary btn-sm" (click)="disableEnable()">
+      Enable / Disable third tab
+    </button>
+  </p>
+  <hr/>  
+  <tabset #staticTabs>
+    <tab heading="Static title">Static content</tab>
+    <tab heading="Static Title 1">Static content 1</tab>
+    <tab heading="Static Title 2">Static content 2</tab>
+    <tab heading="Static Title 3" removable="true">Static content 3</tab>
+    <tab (select)="alertMe()">
+      <template tabHeading>
+        <i class="glyphicon glyphicon-bell"></i> Alert!
+      </template>
+      I've got an HTML heading, and a select callback. Pretty cool!
+    </tab>
+  </tabset>
+</div>
 

demo/src/app/components/+tabs/demos/basic/basic.ts

@@ -1,14 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { TabsetComponent } from 'ng2-bootstrap';
 
 @Component({
   selector: 'demo-tabs-basic',
   templateUrl: './basic.html'
 })
 export class DemoTabsBasicComponent {
 
+  @ViewChild('staticTabs') staticTabs: TabsetComponent;
+
   public alertMe(): void {
     setTimeout(function (): void {
       alert('You\'ve selected the alert tab!');
     });
   }
+
+  selectTab(tab_id: number) {
+      this.staticTabs.tabs[tab_id].active = true;
+  }
+
+  disableEnable() {
+    this.staticTabs.tabs[2].disabled = ! this.staticTabs.tabs[2].disabled
+  }  
 }

karma.conf.js

@@ -82,4 +82,4 @@ module.exports = function (config) {
   }
 
   config.set(configuration);
-};
+};