fix(animations): change trigger binding syntax to function as a property binding []

Animation triggers can now be set via template bindings `[]`

BREAKING CHANGE:

animation trigger expressions within the template that are assigned as
an element attribute (e.g. `@prop`) are deprecated. Please use the
Angular2 property binding syntax (e.g. `[@prop]`) when assigning
properties.

```ts
// this is now deprecated
<div @trigger="expression"></div>

// do this instead
<div [@trigger]="expression"></div>
```

modules/@angular/compiler-cli/integrationtest/src/animate.ts

@@ -23,7 +23,7 @@ import {AUTO_STYLE, Component, animate, state, style, transition, trigger} from
     <button (click)="setAsClosed()">Closed</button>
     <button (click)="setAsSomethingElse()">Something Else</button>
     <hr />
-    <div @openClose="stateExpression">
+    <div [@openClose]="stateExpression">
       Look at this box
     </div>
   `

modules/@angular/compiler/src/template_parser.ts

@@ -466,8 +466,9 @@ class TemplateParseVisitor implements HtmlAstVisitor {
     if (isPresent(bindParts)) {
       hasBinding = true;
       if (isPresent(bindParts[1])) {  // match: bind-prop
-        this._parseProperty(
+        this._parsePropertyOrAnimation(
-            bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
+            bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
+            targetAnimationProps);
 
       } else if (isPresent(bindParts[2])) {  // match: var-name / var-name="iden"
         var identifier = bindParts[8];
@@ -500,23 +501,31 @@ class TemplateParseVisitor implements HtmlAstVisitor {
             bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
 
       } else if (isPresent(bindParts[6])) {  // match: bindon-prop
-        this._parseProperty(
+        this._parsePropertyOrAnimation(
-            bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
+            bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
+            targetAnimationProps);
         this._parseAssignmentEvent(
             bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
 
       } else if (isPresent(bindParts[7])) {  // match: animate-name
+        if (attrName[0] == '@' && isPresent(attrValue) && attrValue.length > 0) {
+          this._reportError(
+              `Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use [@prop]="exp" instead!`,
+              attr.sourceSpan, ParseErrorLevel.WARNING);
+        }
         this._parseAnimation(
             bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetAnimationProps);
       } else if (isPresent(bindParts[9])) {  // match: [(expr)]
-        this._parseProperty(
+        this._parsePropertyOrAnimation(
-            bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
+            bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
+            targetAnimationProps);
         this._parseAssignmentEvent(
             bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
 
       } else if (isPresent(bindParts[10])) {  // match: [expr]
-        this._parseProperty(
+        this._parsePropertyOrAnimation(
-            bindParts[10], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
+            bindParts[10], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
+            targetAnimationProps);
 
       } else if (isPresent(bindParts[11])) {  // match: (event)
         this._parseEvent(
@@ -555,12 +564,18 @@ class TemplateParseVisitor implements HtmlAstVisitor {
     targetRefs.push(new ElementOrDirectiveRef(identifier, value, sourceSpan));
   }
 
-  private _parseProperty(
+  private _parsePropertyOrAnimation(
       name: string, expression: string, sourceSpan: ParseSourceSpan,
-      targetMatchableAttrs: string[][], targetProps: BoundElementOrDirectiveProperty[]) {
+      targetMatchableAttrs: string[][], targetProps: BoundElementOrDirectiveProperty[],
-    this._parsePropertyAst(
+      targetAnimationProps: BoundElementPropertyAst[]) {
-        name, this._parseBinding(expression, sourceSpan), sourceSpan, targetMatchableAttrs,
+    if (name[0] == '@') {
-        targetProps);
+      this._parseAnimation(
+          name.substr(1), expression, sourceSpan, targetMatchableAttrs, targetAnimationProps);
+    } else {
+      this._parsePropertyAst(
+          name, this._parseBinding(expression, sourceSpan), sourceSpan, targetMatchableAttrs,
+          targetProps);
+    }
   }
 
   private _parseAnimation(

modules/@angular/compiler/test/template_parser_spec.ts

@@ -282,6 +282,34 @@ export function main() {
             [BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null]
           ]);
         });
+
+        it('should parse bound properties via @ and not report them as attributes and also report a deprecation warning',
+           () => {
+             expect(humanizeTplAst(parse('<div @something="value2">', []))).toEqual([
+               [ElementAst, 'div'],
+               [
+                 BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null
+               ]
+             ]);
+
+             expect(console.warnings).toEqual([[
+               'Template parse warnings:',
+               `Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use [@prop]="exp" instead! ("<div [ERROR ->]@something="value2">"): TestComp@0:5`
+             ].join('\n')]);
+           });
+
+        it('should not issue a warning when an animation property is bound without an expression',
+           () => {
+             humanizeTplAst(parse('<div @something>', []));
+             expect(console.warnings.length).toEqual(0);
+           });
+
+        it('should parse bound properties via [@] and not report them as attributes', () => {
+          expect(humanizeTplAst(parse('<div [@something]="value2">', []))).toEqual([
+            [ElementAst, 'div'],
+            [BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null]
+          ]);
+        });
       });
 
       describe('events', () => {

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

@@ -520,7 +520,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  *
  * ```html
  * <!-- somewhere inside of my-component-tpl.html -->
- * <div @myAnimationTrigger="myStatusExp">...</div>
+ * <div [@myAnimationTrigger]="myStatusExp">...</div>
  * ```
  *
  * #### The final `animate` call
@@ -569,7 +569,7 @@ export function transition(stateChangeExpr: string, steps: AnimationMetadata | A
  * {@link ComponentMetadata#animations-anchor animations section}. An animation trigger can
  * be placed on an element within a template by referencing the name of the
  * trigger followed by the expression value that the trigger is bound to
- * (in the form of `@triggerName="expression"`.
+ * (in the form of `[@triggerName]="expression"`.
  *
  * ### Usage
  *
@@ -601,7 +601,7 @@ export function transition(stateChangeExpr: string, steps: AnimationMetadata | A
  *
  * ```html
  * <!-- somewhere inside of my-component-tpl.html -->
- * <div @myAnimationTrigger="myStatusExp">...</div>
+ * <div [@myAnimationTrigger]="myStatusExp">...</div>
  * ```
  *
  * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))

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

@@ -56,7 +56,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div *ngIf="exp" @myAnimation="exp"></div>',
+                   tcb, '<div *ngIf="exp" [@myAnimation]="exp"></div>',
                    trigger(
                        'myAnimation',
                        [transition(
@@ -82,7 +82,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div *ngIf="exp" @myAnimation="exp"></div>',
+                   tcb, '<div *ngIf="exp" [@myAnimation]="exp"></div>',
                    trigger(
                        'myAnimation',
                        [transition(
@@ -152,7 +152,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                tcb = tcb.overrideTemplate(DummyIfCmp, `
-              <div @myAnimation *ngIf="exp"></div>
+              <div [@myAnimation] *ngIf="exp"></div>
             `);
                tcb.overrideAnimations(DummyIfCmp, [trigger(
                                                       'myAnimation',
@@ -565,8 +565,8 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                tcb = tcb.overrideTemplate(DummyIfCmp, `
-                      <div @rotate="exp"></div>
+                      <div [@rotate]="exp"></div>
-                      <div @rotate="exp2"></div>
+                      <div [@rotate]="exp2"></div>
                     `);
                tcb.overrideAnimations(
                       DummyIfCmp,
@@ -629,7 +629,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="my-if" *ngIf="exp" @myAnimation></div>',
+                   tcb, '<div class="my-if" *ngIf="exp" [@myAnimation]></div>',
                    trigger(
                        'myAnimation',
                        [transition('* => void', [animate(1000, style({'opacity': 0}))])]),
@@ -661,7 +661,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div @myAnimation="exp"></div>',
+                   tcb, '<div [@myAnimation]="exp"></div>',
                    trigger('myAnimation', [transition(
                                               '* => *',
                                               [
@@ -693,7 +693,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div @one="exp" @two="exp2"></div>',
+                   tcb, '<div [@one]="exp" [@two]="exp2"></div>',
                    [
                      trigger(
                          'one',
@@ -754,7 +754,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -784,7 +784,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -841,7 +841,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -868,7 +868,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -897,7 +897,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -958,7 +958,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -1003,7 +1003,7 @@ function declareTests({useJit}: {useJit: boolean}) {
              [TestComponentBuilder, AnimationDriver],
              fakeAsync((tcb: TestComponentBuilder, driver: MockAnimationDriver) => {
                makeAnimationCmp(
-                   tcb, '<div class="target" @status="exp"></div>',
+                   tcb, '<div class="target" [@status]="exp"></div>',
                    [trigger(
                        'status',
                        [
@@ -1042,7 +1042,7 @@ function declareTests({useJit}: {useJit: boolean}) {
   selector: 'if-cmp',
   directives: [NgIf],
   template: `
-    <div *ngIf="exp" @myAnimation="exp"></div>
+    <div *ngIf="exp" [@myAnimation]="exp"></div>
   `
 })
 class DummyIfCmp {

modules/@angular/examples/core/animation/ts/dsl/animation_example.ts

@@ -35,7 +35,7 @@ import {Component, animate, state, style, transition, trigger} from '@angular/co
     <button (click)="expand()">Open</button>
     <button (click)="collapse()">Closed</button>
     <hr />
-    <div class="toggle-container" @openClose="stateExpression">
+    <div class="toggle-container" [@openClose]="stateExpression">
       Look at this box
     </div>
   `

modules/playground/src/animate/app/animate-app.ts

@@ -22,7 +22,7 @@ import {
   selector: 'animate-app',
   styleUrls: ['css/animate-app.css'],
   template: `
-    <div @backgroundAnimation="bgStatus">
+    <div [@backgroundAnimation]="bgStatus">
       <button (click)="state='start'">Start State</button>
       <button (click)="state='active'">Active State</button>
       |
@@ -30,7 +30,7 @@ import {
       <button (click)="state='default'">Unhandled (default) State</button>
       <button style="float:right" (click)="bgStatus='blur'">Blur Page</button>
       <hr />
-      <div *ngFor="let item of items" class="box" @boxAnimation="state">
+      <div *ngFor="let item of items" class="box" [@boxAnimation]="state">
         {{ item }}
       </div>
     </div>