bug(tabs): fix arrows not showing on reszize #6303

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

@@ -1,4 +1,6 @@
-import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {
+  async, ComponentFixture, TestBed, fakeAsync, tick, discardPeriodicTasks
+} from '@angular/core/testing';
 import {Component, ViewChild, ViewContainerRef} from '@angular/core';
 import {Direction, Directionality} from '../core/bidi/index';
 import {MdTabHeader} from './tab-header';
@@ -261,6 +263,22 @@ describe('MdTabHeader', () => {
       fixture.detectChanges();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
+      discardPeriodicTasks();
+    }));
+
+    it('should update arrows when the window is resized', fakeAsync(() => {
+      fixture = TestBed.createComponent(SimpleTabHeaderApp);
+
+      const header = fixture.componentInstance.mdTabHeader;
+
+      spyOn(header, '_checkPaginationEnabled');
+
+      dispatchFakeEvent(window, 'resize');
+      tick(10);
+      fixture.detectChanges();
+
+      expect(header._checkPaginationEnabled).toHaveBeenCalled();
+      discardPeriodicTasks();
     }));
 
   });

src/lib/tabs/tab-header.ts

@@ -23,7 +23,7 @@ import {
   NgZone,
   Renderer2,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
   RIGHT_ARROW,
@@ -40,7 +40,7 @@ import {of as observableOf} from 'rxjs/observable/of';
 import {merge} from 'rxjs/observable/merge';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 import {CanDisableRipple, mixinDisableRipple} from '../core/common-behaviors/disable-ripple';
-
+import {RxChain, debounceTime} from '@angular/cdk/rxjs';
 
 /**
  * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
@@ -78,7 +78,7 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase);
   host: {
     'class': 'mat-tab-header',
     '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
-    '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
+    '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'"
   }
 })
 export class MdTabHeader extends _MdTabHeaderMixinBase
@@ -121,6 +121,9 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
 
   private _selectedIndex: number = 0;
 
+  /** subscription for the window resize handler */
+  private _resizeSubscription: Subscription | null;
+
   /** The index of the active tab. */
   @Input()
   get selectedIndex(): number { return this._selectedIndex; }
@@ -143,6 +146,11 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
               private _changeDetectorRef: ChangeDetectorRef,
               @Optional() private _dir: Directionality) {
     super();
+
+    // TODO: Add library level window listener https://goo.gl/FJWhZM
+    this._resizeSubscription = RxChain.from(fromEvent(window, 'resize'))
+      .call(debounceTime, 150)
+      .subscribe(() => this._checkPaginationEnabled());
   }
 
   ngAfterContentChecked(): void {
@@ -208,6 +216,11 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
       this._realignInkBar.unsubscribe();
       this._realignInkBar = null;
     }
+
+    if (this._resizeSubscription) {
+      this._resizeSubscription.unsubscribe();
+      this._resizeSubscription = null;
+    }
   }
 
   /**