bug(tabs): tabs not disabled on change #6447 (#6644)

* bug(tabs): tabs not disabled on change #6447

* tests(tab): add better tests

src/lib/tabs/tab-group.spec.ts

@@ -207,6 +207,35 @@ describe('MdTabGroup', () => {
     });
   });
 
+  describe('disable tabs', () => {
+    let fixture: ComponentFixture<DisabledTabsTestApp>;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(DisabledTabsTestApp);
+    });
+
+    it('should have one disabled tab', () => {
+      fixture.detectChanges();
+      const labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
+      expect(labels.length).toBe(1);
+    });
+
+    it('should set the disabled flag on tab', () => {
+      fixture.detectChanges();
+
+      const tabs = fixture.componentInstance.tabs.toArray();
+      let labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
+      expect(tabs[2].disabled).toBe(false);
+      expect(labels.length).toBe(1);
+
+      fixture.componentInstance.isDisabled = true;
+      fixture.detectChanges();
+
+      expect(tabs[2].disabled).toBe(true);
+      labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
+      expect(labels.length).toBe(2);
+    });
+  });
+
   describe('dynamic binding tabs', () => {
     let fixture: ComponentFixture<SimpleDynamicTabsTestApp>;
 
@@ -481,14 +510,17 @@ class BindedTabsTestApp {
         <ng-template md-tab-label>Tab Two</ng-template>
         Tab two content
       </md-tab>
-      <md-tab>
+      <md-tab [disabled]="isDisabled">
         <ng-template md-tab-label>Tab Three</ng-template>
         Tab three content
       </md-tab>
     </md-tab-group>
   `,
 })
-class DisabledTabsTestApp {}
+class DisabledTabsTestApp {
+  @ViewChildren(MdTab) tabs: QueryList<MdTab>;
+  isDisabled = false;
+}
 
 @Component({
   template: `

src/lib/tabs/tab-group.ts

@@ -231,8 +231,13 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
    * manually.
    */
   private _subscribeToTabLabels() {
-    this._tabLabelSubscription.unsubscribe();
-    this._tabLabelSubscription = merge(...this._tabs.map(tab => tab._labelChange)).subscribe(() => {
+    if (this._tabLabelSubscription) {
+      this._tabLabelSubscription.unsubscribe();
+    }
+
+    this._tabLabelSubscription = merge(
+        ...this._tabs.map(tab => tab._disableChange),
+        ...this._tabs.map(tab => tab._labelChange)).subscribe(() => {
       this._changeDetectorRef.markForCheck();
     });
   }

src/lib/tabs/tab.ts

@@ -56,6 +56,9 @@ export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChan
   /** Emits whenever the label changes. */
   _labelChange = new Subject<void>();
 
+  /** Emits whenevfer the disable changes */
+  _disableChange = new Subject<void>();
+
   /**
    * The relatively indexed position where 0 represents the center, negative is left, and positive
    * represents the right.
@@ -77,17 +80,22 @@ export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChan
     super();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('textLabel')) {
       this._labelChange.next();
     }
+
+    if (changes.hasOwnProperty('disabled')) {
+      this._disableChange.next();
+    }
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
+    this._disableChange.complete();
     this._labelChange.complete();
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
   }
 }