chore(animations): make sure host-prop animation deprecation is correctly emitted

Closes #10581

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

@@ -441,8 +441,8 @@ export class CompileDirectiveMetadata implements CompileMetadataWithIdentifier {
           hostProperties[matches[1]] = value;
         } else if (isPresent(matches[2])) {
           hostListeners[matches[2]] = value;
-        } else if (isPresent(matches[3])) {
+        } else if (isPresent(matches[3])) {  // DEPRECATED: remove this if statement post RC5
-          hostProperties[matches[3]] = value;
+          hostProperties['@' + matches[3]] = value;
         }
       });
     }

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

@@ -540,7 +540,7 @@ class TemplateParseVisitor implements html.Visitor {
       } 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!`,
+              `Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use property bindings (e.g. [@prop]="exp") instead!`,
               attr.sourceSpan, ParseErrorLevel.WARNING);
         }
         this._parseAnimation(
@@ -809,9 +809,13 @@ class TemplateParseVisitor implements html.Visitor {
         boundPropertyName = partValue.substr(1);
         bindingType = PropertyBindingType.Animation;
         securityContext = SecurityContext.NONE;
-        this._reportError(
+        // DEPRECATED: remove this if statement post RC5
-            `Assigning animation triggers within host data as attributes such as "@prop": "exp" is deprecated. Use "[@prop]": "exp" instead!`,
+        if (boundPropertyName[0] == '@') {
-            sourceSpan, ParseErrorLevel.WARNING);
+          this._reportError(
+              `Assigning animation triggers within host data as attributes such as "@prop": "exp" is deprecated. Use host bindings (e.g. "[@prop]": "exp") instead!`,
+              sourceSpan, ParseErrorLevel.WARNING);
+          boundPropertyName = boundPropertyName.substr(1);
+        }
       } else {
         boundPropertyName = this._schemaRegistry.getMappedPropName(partValue);
         securityContext = this._schemaRegistry.securityContext(elementName, boundPropertyName);

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

@@ -291,6 +291,7 @@ Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
           ]);
         });
 
+        // DEPRECATED: remove this spec post RC5
         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([
@@ -302,10 +303,11 @@ Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
 
              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`
+               `Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use property bindings (e.g. [@prop]="exp") instead! ("<div [ERROR ->]@something="value2">"): TestComp@0:5`
              ].join('\n')]);
            });
 
+        // DEPRECATED: remove this spec post RC5
         it('should issue a warning when host attributes contain a non property-bound animation trigger',
            () => {
              var dirA = CompileDirectiveMetadata.create({
@@ -318,10 +320,22 @@ Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
 
              expect(console.warnings).toEqual([[
                'Template parse warnings:',
-               `Assigning animation triggers within host data as attributes such as "@prop": "exp" is deprecated. Use "[@prop]": "exp" instead! ("[ERROR ->]<div></div>"): TestComp@0:0, Directive DirA`
+               `Assigning animation triggers within host data as attributes such as "@prop": "exp" is deprecated. Use host bindings (e.g. "[@prop]": "exp") instead! ("[ERROR ->]<div></div>"): TestComp@0:0, Directive DirA`
              ].join('\n')]);
            });
 
+        it('should not issue a warning when host attributes contain a valid property-bound animation trigger',
+           () => {
+             var dirA = CompileDirectiveMetadata.create({
+               selector: 'div',
+               type: new CompileTypeMetadata({moduleUrl: someModuleUrl, name: 'DirA'}),
+               host: {'[@prop]': 'expr'}
+             });
+
+             humanizeTplAst(parse('<div></div>', [dirA]));
+             expect(console.warnings.length).toEqual(0);
+           });
+
         it('should not issue a warning when an animation property is bound without an expression',
            () => {
              humanizeTplAst(parse('<div @something>', []));