feat(stepper): add animationDone event (#10752)

Exposes an `animationDone` event on the stepper that lets consumers react once the new step has completed its enter transition. This is along the same lines as the `MatTabGroup.animationDone`.

Fixes #9087.

Author: crisbeto

src/lib/stepper/stepper-horizontal.html

@@ -23,6 +23,7 @@
   <div *ngFor="let step of _steps; let i = index"
        class="mat-horizontal-stepper-content" role="tabpanel"
        [@stepTransition]="_getAnimationDirection(i)"
+       (@stepTransition.done)="_animationDone($event)"
        [id]="_getStepContentId(i)"
        [attr.aria-labelledby]="_getStepLabelId(i)"
        [attr.aria-expanded]="selectedIndex === i">

src/lib/stepper/stepper-vertical.html

@@ -18,6 +18,7 @@
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"
          [@stepTransition]="_getAnimationDirection(i)"
+         (@stepTransition.done)="_animationDone($event)"
          [id]="_getStepContentId(i)"
          [attr.aria-labelledby]="_getStepLabelId(i)"
          [attr.aria-expanded]="selectedIndex === i">

src/lib/stepper/stepper.spec.ts

@@ -12,7 +12,7 @@ import {
 import {StepperOrientation} from '@angular/cdk/stepper';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
-import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {
   AbstractControl,
   AsyncValidatorFn,
@@ -318,6 +318,28 @@ describe('MatStepper', () => {
 
         expect(optionalLabel.textContent).toBe('Valgfri');
       }));
+
+      it('should emit an event when the enter animation is done', fakeAsync(() => {
+        let stepper = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
+        let selectionChangeSpy = jasmine.createSpy('selectionChange spy');
+        let animationDoneSpy = jasmine.createSpy('animationDone spy');
+        let selectionChangeSubscription = stepper.selectionChange.subscribe(selectionChangeSpy);
+        let animationDoneSubscription = stepper.animationDone.subscribe(animationDoneSpy);
+
+        stepper.selectedIndex = 1;
+        fixture.detectChanges();
+
+        expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+        expect(animationDoneSpy).not.toHaveBeenCalled();
+
+        flush();
+
+        expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+        expect(animationDoneSpy).toHaveBeenCalledTimes(1);
+
+        selectionChangeSubscription.unsubscribe();
+        animationDoneSubscription.unsubscribe();
+      }));
   });
 
   describe('icon overrides', () => {

src/lib/stepper/stepper.ts

@@ -7,7 +7,8 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {CdkStep, CdkStepper} from '@angular/cdk/stepper';
+import {CdkStep, CdkStepper, StepContentPositionState} from '@angular/cdk/stepper';
+import {AnimationEvent} from '@angular/animations';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -16,9 +17,11 @@ import {
   ContentChild,
   ContentChildren,
   Directive,
+  EventEmitter,
   forwardRef,
   Inject,
   Optional,
+  Output,
   QueryList,
   SkipSelf,
   TemplateRef,
@@ -79,6 +82,9 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   /** Custom icon overrides passed in by the consumer. */
   @ContentChildren(MatStepperIcon) _icons: QueryList<MatStepperIcon>;
 
+  /** Event emitted when the current step is done transitioning in. */
+  @Output() readonly animationDone: EventEmitter<void> = new EventEmitter<void>();
+
   /** Consumer-specified template-refs to be used to override the header icons. */
   _iconOverrides: {[key: string]: TemplateRef<MatStepperIconContext>} = {};
 
@@ -96,6 +102,12 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
     // Mark the component for change detection whenever the content children query changes
     this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged());
   }
+
+  _animationDone(event: AnimationEvent) {
+    if ((event.toState as StepContentPositionState) === 'current') {
+      this.animationDone.emit();
+    }
+  }
 }
 
 @Component({