feat(tabs): add animation done event #5238 (#6811)

* feat(tabs): add animation done event #5238

* chore(test): add test

* chore(tests): remove fit

Author: amcdnl

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)">
       <mat-tab>
@@ -460,6 +473,7 @@ class SimpleTabsTestApp {
   handleSelection(event: any) {
     this.selectEvent = event;
   }
+  animationDone() { }
 }
 
 @Component({

src/lib/tabs/tab-group.ts

@@ -141,6 +141,9 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   /** Event emitted when focus has changed within a tab group. */
   @Output() focusChange: EventEmitter<MatTabChangeEvent> = new EventEmitter<MatTabChangeEvent>();
 
+  /** Event emitted when the body animation has completed */
+  @Output() animationDone: EventEmitter<void> = new EventEmitter<void>();
+
   /** Event emitted when the tab selection has changed. */
   @Output() selectedTabChange: EventEmitter<MatTabChangeEvent> =
       new EventEmitter<MatTabChangeEvent>(true);
@@ -280,6 +283,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. */