diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index 16aa2266ef04..a881988d0281 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -208,6 +208,18 @@ describe('MatTabGroup', () => { expect(tabs[1].isActive).toBe(false); expect(tabs[2].isActive).toBe(true); }); + + it('should fire animation done event', fakeAsync(() => { + fixture.detectChanges(); + + spyOn(fixture.componentInstance, 'animationDone'); + let tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1]; + tabLabel.nativeElement.click(); + fixture.detectChanges(); + tick(); + + expect(fixture.componentInstance.animationDone).toHaveBeenCalled(); + })); }); describe('disable tabs', () => { @@ -430,6 +442,7 @@ describe('nested MatTabGroup with enabled animations', () => { [(selectedIndex)]="selectedIndex" [headerPosition]="headerPosition" [disableRipple]="disableRipple" + (animationDone)="animationDone()" (focusChange)="handleFocus($event)" (selectedTabChange)="handleSelection($event)"> @@ -460,6 +473,7 @@ class SimpleTabsTestApp { handleSelection(event: any) { this.selectEvent = event; } + animationDone() { } } @Component({ diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index b526f1deb819..6f0a467ae693 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -139,6 +139,9 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn /** Event emitted when focus has changed within a tab group. */ @Output() focusChange: EventEmitter = new EventEmitter(); + /** Event emitted when the body animation has completed */ + @Output() animationDone: EventEmitter = new EventEmitter(); + /** Event emitted when the tab selection has changed. */ @Output() selectedTabChange: EventEmitter = new EventEmitter(true); @@ -278,6 +281,7 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn _removeTabBodyWrapperHeight(): void { this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight; this._tabBodyWrapper.nativeElement.style.height = ''; + this.animationDone.emit(); } /** Handle click events, setting new selected index if appropriate. */