fix(tabs): tabs should update when tabs are added or removed (#2014)

* latest changes

* Use content checked

* add demo

* cleanup demo

* fix dynamic height on new tabs

* write tests

* add comments, remove md-tab-body prefix

* rebase

Author: andrewseguin

src/demo-app/tabs/tabs-demo.html

@@ -14,6 +14,79 @@ <h1>Tab Nav Bar</h1>
 </div>
 
 
+<h1>Tab Group Demo - Dynamic Tabs</h1>
+
+<md-card>
+  <md-card-title>Add New Tab</md-card-title>
+  <md-card-content>
+    <md-checkbox [(ngModel)]="createWithLongContent">
+      Include extra content
+    </md-checkbox>
+    <md-checkbox [(ngModel)]="gotoNewTabAfterAdding">
+      Select after adding
+    </md-checkbox>
+    <div>
+      Position:
+      <md-input type="number" [(ngModel)]="addTabPosition"></md-input>
+    </div>
+    <button md-raised-button color="primary"
+            (click)="addTab(createWithLongContent)">
+      Add
+    </button>
+  </md-card-content>
+</md-card>
+
+<div>
+  Selected tab index:
+  <md-input type="number" [(ngModel)]="activeTabIndex"></md-input>
+</div>
+<md-tab-group class="demo-tab-group"
+              md-dynamic-height
+              [(selectedIndex)]="activeTabIndex">
+  <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
+    <template md-tab-label>{{tab.label}}</template>
+    {{tab.content}}
+    <br>
+    <br>
+    <div *ngIf="tab.extraContent">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
+      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
+      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
+      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
+      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
+      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
+      orci posuere, nec luctus mauris semper.
+      <br>
+      <br>
+      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
+      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
+      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
+      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
+      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
+      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
+      <br>
+      <br>
+      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
+      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
+      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
+      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
+    </div>
+    <br>
+    <br>
+    <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
+    <br><br>
+    <button md-raised-button
+            [disabled]="dynamicTabs.length == 1"
+            (click)="deleteTab(tab)">
+      Delete Tab
+    </button>
+  </md-tab>
+</md-tab-group>
+
 <h1>Tab Group Demo - Dynamic Height</h1>
 
 <md-tab-group class="demo-tab-group" md-dynamic-height>
@@ -129,4 +202,4 @@ <h1>Tabs with simplified api</h1>
   <md-tab label="Fire">
     This tab is about combustion!
   </md-tab>
-</md-tab-group>
+</md-tab-group>

src/demo-app/tabs/tabs-demo.scss

@@ -1,5 +1,6 @@
 .demo-nav-bar {
   border: 1px solid #e0e0e0;
+  margin-bottom: 40px;
   [md-tab-nav-bar] {
     background: #f9f9f9;
   }
@@ -13,10 +14,28 @@
 
 .demo-tab-group {
   border: 1px solid #e0e0e0;
+  margin-bottom: 40px;
   .md-tab-header {
     background: #f9f9f9;
   }
   .md-tab-body-content {
     padding: 12px;
   }
+}
+
+tabs-demo md-card {
+  width: 160px;
+
+  md-checkbox {
+    display: block;
+    margin-top: 8px;
+  }
+
+  md-input {
+    width: 100px;
+  }
+
+  button {
+    width: 100%;
+  }
 }

src/demo-app/tabs/tabs-demo.ts

@@ -10,27 +10,52 @@ import {Observable} from 'rxjs/Observable';
   encapsulation: ViewEncapsulation.None,
 })
 export class TabsDemo {
+  // Nav bar demo
   tabLinks = [
     {label: 'Sun', link: 'sunny-tab'},
     {label: 'Rain', link: 'rainy-tab'},
     {label: 'Fog', link: 'foggy-tab'},
   ];
   activeLinkIndex = 0;
 
+  // Standard tabs demo
   tabs = [
     {
-      label: 'Tab One',
-      content: 'This is the body of the first tab'},
-    {
-      label: 'Tab Two',
+      label: 'Tab 1',
+      content: 'This is the body of the first tab'
+    }, {
+      label: 'Tab 2',
       disabled: true,
-      content: 'This is the body of the second tab'},
-    {
-      label: 'Tab Three',
+      content: 'This is the body of the second tab'
+    }, {
+      label: 'Tab 3',
       extraContent: true,
-      content: 'This is the body of the third tab'},
+      content: 'This is the body of the third tab'
+    }, {
+      label: 'Tab 4',
+      content: 'This is the body of the fourth tab'
+    },
+  ];
+
+  // Dynamic tabs demo
+  activeTabIndex = 0;
+  addTabPosition = 0;
+  gotoNewTabAfterAdding = false;
+  createWithLongContent = false;
+  dynamicTabs = [
     {
-      label: 'Tab Four',
+      label: 'Tab 1',
+      content: 'This is the body of the first tab'
+    }, {
+      label: 'Tab 2',
+      disabled: true,
+      content: 'This is the body of the second tab'
+    }, {
+      label: 'Tab 3',
+      extraContent: true,
+      content: 'This is the body of the third tab'
+    }, {
+      label: 'Tab 4',
       content: 'This is the body of the fourth tab'
     },
   ];
@@ -50,6 +75,22 @@ export class TabsDemo {
     this.activeLinkIndex =
         this.tabLinks.indexOf(this.tabLinks.find(tab => router.url.indexOf(tab.link) != -1));
   }
+
+  addTab(includeExtraContent: boolean): void {
+    this.dynamicTabs.splice(this.addTabPosition, 0, {
+      label: 'New Tab ' + (this.dynamicTabs.length + 1),
+      content: 'New tab contents ' + (this.dynamicTabs.length + 1),
+      extraContent: includeExtraContent
+    });
+
+    if (this.gotoNewTabAfterAdding) {
+      this.activeTabIndex = this.addTabPosition;
+    }
+  }
+
+  deleteTab(tab: any) {
+    this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
+  }
 }
 
 

src/lib/tabs/index.ts

@@ -1 +1 @@
-export * from './tabs';
+export * from './tab-group';

src/lib/tabs/ink-bar.ts

@@ -10,15 +10,27 @@ export class MdInkBar {
 
   /**
    * Calculates the styles from the provided element in order to align the ink-bar to that element.
+   * Shows the ink bar if previously set as hidden.
    * @param element
    */
   alignToElement(element: HTMLElement) {
+    this.show();
     this._renderer.setElementStyle(this._elementRef.nativeElement, 'left',
         this._getLeftPosition(element));
     this._renderer.setElementStyle(this._elementRef.nativeElement, 'width',
         this._getElementWidth(element));
   }
 
+  /** Shows the ink bar. */
+  show(): void {
+    this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'visible');
+  }
+
+  /** Hides the ink bar. */
+  hide(): void {
+    this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+  }
+
   /**
    * Generates the pixel distance from the left based on the provided element in string format.
    * @param element

src/lib/tabs/tab-body.html

@@ -1,4 +1,4 @@
-<div class="md-tab-body-content"
+<div class="md-tab-body-content" #content
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">