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

* bug(tabs): fix arrows not showing on reszize #6303 * chore(*): update to use host vs hostliener * bug(tabs): address feedback in pr * bug(tabs): address PR feedback
angular · Aug 9, 2017 · f96ffeb · f96ffeb
1 parent cea4d9f
commit f96ffeb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/lib/tabs/tab-header.spec.ts b/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();
     }));
 
   });

diff --git a/src/lib/tabs/tab-header.ts b/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,8 @@ 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';
+import {Platform} from '@angular/cdk/platform';
 
 /**
  * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
@@ -121,6 +122,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; }
@@ -141,8 +145,16 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
               private _ngZone: NgZone,
               private _renderer: Renderer2,
               private _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Directionality) {
+              @Optional() private _dir: Directionality,
+              platform: Platform) {
     super();
+
+    if (platform.isBrowser) {
+      // TODO: Add library level window listener https://goo.gl/y25X5M
+      this._resizeSubscription = RxChain.from(fromEvent(window, 'resize'))
+        .call(debounceTime, 150)
+        .subscribe(() => this._checkPaginationEnabled());
+    }
   }
 
   ngAfterContentChecked(): void {
@@ -208,6 +220,11 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
       this._realignInkBar.unsubscribe();
       this._realignInkBar = null;
     }
+
+    if (this._resizeSubscription) {
+      this._resizeSubscription.unsubscribe();
+      this._resizeSubscription = null;
+    }
   }
 
   /**