fix(animations): allow `group()` to be used as entry point for an animation trigger (#11419)

Closes #11312
Closes #11419

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

@@ -52,7 +52,7 @@ export class AnimationStateTransitionExpression {
 export class AnimationStateTransitionAst extends AnimationStateAst {
   constructor(
       public stateChanges: AnimationStateTransitionExpression[],
-      public animation: AnimationSequenceAst) {
+      public animation: AnimationWithStepsAst) {
     super();
   }
   visit(visitor: AnimationAstVisitor, context: any): any {

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

@@ -117,11 +117,11 @@ function _parseAnimationStateTransition(
     _fillAnimationAstStartingKeyframes(animationAst, styles, errors);
   }
 
-  var sequenceAst = (animationAst instanceof AnimationSequenceAst) ?
+  var stepsAst: AnimationWithStepsAst = (animationAst instanceof AnimationWithStepsAst) ?
-      <AnimationSequenceAst>animationAst :
+      animationAst :
       new AnimationSequenceAst([animationAst]);
 
-  return new AnimationStateTransitionAst(transitionExprs, sequenceAst);
+  return new AnimationStateTransitionAst(transitionExprs, stepsAst);
 }
 
 function _parseAnimationTransitionExpr(
@@ -180,7 +180,9 @@ function _normalizeStyleSteps(
     entry: CompileAnimationMetadata, stateStyles: {[key: string]: AnimationStylesAst},
     errors: AnimationParseError[]): CompileAnimationMetadata {
   var steps = _normalizeStyleStepEntry(entry, stateStyles, errors);
-  return new CompileAnimationSequenceMetadata(steps);
+  return (entry instanceof CompileAnimationGroupMetadata) ?
+      new CompileAnimationGroupMetadata(steps) :
+      new CompileAnimationSequenceMetadata(steps);
 }
 
 function _mergeAnimationStyles(

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

@@ -13,6 +13,7 @@ import {MockAnimationDriver} from '@angular/platform-browser/testing/mock_animat
 
 import {Component} from '../../index';
 import {DEFAULT_STATE} from '../../src/animation/animation_constants';
+import {AnimationGroupPlayer} from '../../src/animation/animation_group_player';
 import {AnimationKeyframe} from '../../src/animation/animation_keyframe';
 import {AnimationPlayer} from '../../src/animation/animation_player';
 import {AnimationStyles} from '../../src/animation/animation_styles';
@@ -378,6 +379,30 @@ function declareTests({useJit}: {useJit: boolean}) {
              assertPlaying(player4, true);
              assertPlaying(player5, true);
            }));
+
+        it('should allow a group animation to be set as the entry point for an animation trigger',
+           fakeAsync(() => {
+             TestBed.overrideComponent(DummyIfCmp, {
+               set: {
+                 template: `<div *ngIf="exp" [@myAnimation]="exp"></div>`,
+                 animations: [trigger(
+                     'myAnimation', [transition('void => *', group([
+                                                  animate(1000, style({color: 'red'})),
+                                                  animate('1s 0.5s', style({fontSize: 10})),
+                                                ]))])]
+               }
+             });
+
+             const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
+             const fixture = TestBed.createComponent(DummyIfCmp);
+             const cmp = fixture.debugElement.componentInstance;
+
+             cmp.exp = true;
+             fixture.detectChanges();
+
+             const player = driver.log[0]['player'];
+             expect(player.parentPlayer instanceof AnimationGroupPlayer).toBe(true);
+           }));
       });