From d0eef620fe7f092f47cfe43db868e48d2669a626 Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Wed, 6 Sep 2017 12:29:28 -0500
Subject: [PATCH] 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 | 36 ++++++++++++++++++++++++++++++++--
 src/lib/tabs/tab-group.ts      |  9 +++++++--
 src/lib/tabs/tab.ts            | 14 ++++++++++---
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts
index 439367351a20..a82befc61f89 100644
--- a/src/lib/tabs/tab-group.spec.ts
+++ b/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: `
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index 8c3bf330cc40..749e9d6c661c 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/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();
     });
   }
diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts
index 37778064e09d..306593ae0b71 100644
--- a/src/lib/tabs/tab.ts
+++ b/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);
   }
 }