feat(animations): expose the triggerName within the transition event

Closes #13600

modules/@angular/compiler/src/animation/animation_compiler.ts

@@ -294,8 +294,8 @@ class _AnimationBuilder implements AnimationAstVisitor {
 
     statements.push(new o.ReturnStatement(
         o.importExpr(createIdentifier(Identifiers.AnimationTransition)).instantiate([
-          _ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, _ANIMATION_CURRENT_STATE_VAR,
-          _ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR
+          _ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, o.literal(this.animationName),
+          _ANIMATION_CURRENT_STATE_VAR, _ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR
         ])));
 
     return o.fn(

modules/@angular/core/src/animation/animation_transition.ts

@@ -12,16 +12,17 @@ import {AnimationTransitionEvent} from './animation_transition_event';
 
 export class AnimationTransition {
   constructor(
-      private _player: AnimationPlayer, private _element: ElementRef, private _fromState: string,
-      private _toState: string, private _totalTime: number) {}
+      private _player: AnimationPlayer, private _element: ElementRef, private _triggerName: string,
+      private _fromState: string, private _toState: string, private _totalTime: number) {}
 
   private _createEvent(phaseName: string): AnimationTransitionEvent {
     return new AnimationTransitionEvent({
       fromState: this._fromState,
       toState: this._toState,
       totalTime: this._totalTime,
       phaseName: phaseName,
-      element: this._element
+      element: this._element,
+      triggerName: this._triggerName
     });
   }
 

modules/@angular/core/src/animation/animation_transition_event.ts

@@ -44,18 +44,21 @@ export class AnimationTransitionEvent {
   public totalTime: number;
   public phaseName: string;
   public element: ElementRef;
+  public triggerName: string;
 
-  constructor({fromState, toState, totalTime, phaseName, element}: {
+  constructor({fromState, toState, totalTime, phaseName, element, triggerName}: {
     fromState: string,
     toState: string,
     totalTime: number,
     phaseName: string,
-    element: any
+    element: any,
+    triggerName: string
   }) {
     this.fromState = fromState;
     this.toState = toState;
     this.totalTime = totalTime;
     this.phaseName = phaseName;
     this.element = new ElementRef(element);
+    this.triggerName = triggerName;
   }
 }

modules/@angular/core/test/animation/animation_integration_spec.ts

@@ -1794,6 +1794,48 @@ function declareTests({useJit}: {useJit: boolean}) {
              expect(elements[i].nativeElement).toBe(targetElements[i]);
            }
          }));
+
+      it('should expose the trigger associated with the animation within the callback event',
+         fakeAsync(() => {
+           TestBed.overrideComponent(DummyIfCmp, {
+             set: {
+               template: `
+                <div *ngIf="exp"
+                  @t1
+                  (@t1.start)="callback($event)"
+                  (@t1.done)="callback($event)"></div>
+                <div *ngIf="exp"
+                  @t2
+                  (@t2.start)="callback($event)"
+                  (@t2.done)="callback($event)"></div>
+              `,
+               animations: [
+                 trigger('t1', [transition('* => *', [animate(1000)])]),
+                 trigger('t2', [transition('* => *', [animate(1000)])])
+               ]
+             }
+           });
+
+           const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
+           const fixture = TestBed.createComponent(DummyIfCmp);
+           const cmp = fixture.componentInstance;
+
+           let triggers: string[] = [];
+           cmp.callback = (e: AnimationTransitionEvent) =>
+               triggers.push(`${e.triggerName}-${e.phaseName}`);
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           expect(triggers).toEqual(['t1-start', 't2-start']);
+           triggers = [];
+
+           driver.log.shift()['player'].finish();
+           driver.log.shift()['player'].finish();
+
+           expect(triggers).toEqual(['t1-done', 't2-done']);
+         }));
     });
 
     describe('ng directives', () => {

modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts

@@ -9,7 +9,6 @@
 import {AUTO_STYLE, AnimationTransitionEvent, Component, Injector, ViewChild, animate, state, style, transition, trigger} from '@angular/core';
 import {DebugDomRootRenderer} from '@angular/core/src/debug/debug_renderer';
 import {ElementRef} from '@angular/core/src/linker/element_ref';
-import {ViewChild} from '@angular/core/src/metadata/di';
 import {RootRenderer} from '@angular/core/src/render/api';
 import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
 import {MockAnimationPlayer} from '@angular/core/testing/testing_internal';
@@ -207,12 +206,14 @@ export function main() {
          uiDriver.log.shift()['player'].finish();
 
          const [triggerOneStart, triggerOneDone] = log['one'];
+         expect(triggerOneStart.triggerName).toEqual('one');
          expect(triggerOneStart.fromState).toEqual('a');
          expect(triggerOneStart.toState).toEqual('b');
          expect(triggerOneStart.totalTime).toEqual(500);
          expect(triggerOneStart.phaseName).toEqual('start');
          expect(triggerOneStart.element instanceof ElementRef).toEqual(true);
 
+         expect(triggerOneDone.triggerName).toEqual('one');
          expect(triggerOneDone.fromState).toEqual('a');
          expect(triggerOneDone.toState).toEqual('b');
          expect(triggerOneDone.totalTime).toEqual(500);
@@ -222,12 +223,14 @@ export function main() {
          uiDriver.log.shift()['player'].finish();
 
          const [triggerTwoStart, triggerTwoDone] = log['two'];
+         expect(triggerTwoStart.triggerName).toEqual('two');
          expect(triggerTwoStart.fromState).toEqual('c');
          expect(triggerTwoStart.toState).toEqual('d');
          expect(triggerTwoStart.totalTime).toEqual(1000);
          expect(triggerTwoStart.phaseName).toEqual('start');
          expect(triggerTwoStart.element instanceof ElementRef).toEqual(true);
 
+         expect(triggerTwoDone.triggerName).toEqual('two');
          expect(triggerTwoDone.fromState).toEqual('c');
          expect(triggerTwoDone.toState).toEqual('d');
          expect(triggerTwoDone.totalTime).toEqual(1000);
@@ -263,13 +266,15 @@ export function main() {
          uiDriver.log.shift()['player'].finish();
 
          const start1 = cmp1Log['start'];
+         expect(start1.triggerName).toEqual('myTrigger');
          expect(start1.fromState).toEqual('void');
          expect(start1.toState).toEqual('off');
          expect(start1.totalTime).toEqual(500);
          expect(start1.phaseName).toEqual('start');
          expect(start1.element instanceof ElementRef).toBe(true);
 
          const done1 = cmp1Log['done'];
+         expect(done1.triggerName).toEqual('myTrigger');
          expect(done1.fromState).toEqual('void');
          expect(done1.toState).toEqual('off');
          expect(done1.totalTime).toEqual(500);
@@ -281,13 +286,15 @@ export function main() {
          uiDriver.log.shift()['player'].finish();
 
          const start2 = cmp2Log['start'];
+         expect(start2.triggerName).toEqual('myTrigger');
          expect(start2.fromState).toEqual('void');
          expect(start2.toState).toEqual('on');
          expect(start2.totalTime).toEqual(1000);
          expect(start2.phaseName).toEqual('start');
          expect(start2.element instanceof ElementRef).toBe(true);
 
          const done2 = cmp2Log['done'];
+         expect(done2.triggerName).toEqual('myTrigger');
          expect(done2.fromState).toEqual('void');
          expect(done2.toState).toEqual('on');
          expect(done2.totalTime).toEqual(1000);

tools/public_api_guard/core/index.d.ts

@@ -113,12 +113,14 @@ export declare class AnimationTransitionEvent {
     phaseName: string;
     toState: string;
     totalTime: number;
-    constructor({fromState, toState, totalTime, phaseName, element}: {
+    triggerName: string;
+    constructor({fromState, toState, totalTime, phaseName, element, triggerName}: {
         fromState: string;
         toState: string;
         totalTime: number;
         phaseName: string;
         element: any;
+        triggerName: string;
     });
 }