diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts index d459fab772a9..1a7df4c13806 100644 --- 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 index 2246847ecc4e..711fa429f49c 100644 --- 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; + } } /**