fix(compiler): validate `@HostBinding` name (#12139)

relates to #7500

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

@@ -71,6 +71,13 @@ export class DirectiveResolver {
         } else if (a instanceof HostBinding) {
           const hostBinding: HostBinding = a;
           if (hostBinding.hostPropertyName) {
+            const startWith = hostBinding.hostPropertyName[0];
+            if (startWith === '(') {
+              throw new Error(`@HostBinding can not bind to events. Use @HostListener instead.`);
+            } else if (startWith === '[') {
+              throw new Error(
+                  `@HostBinding parameter should be a property name, 'class.<name>', or 'attr.<name>'.`);
+            }
             host[`[${hostBinding.hostPropertyName}]`] = propName;
           } else {
             host[`[${propName}]`] = propName;

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

@@ -117,6 +117,18 @@ class SomeDirectiveWithSameHostBindingAndInput {
   @Input() @HostBinding() prop: any;
 }
 
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithMalformedHostBinding1 {
+  @HostBinding('(a)')
+  onA() {}
+}
+
+@Directive({selector: 'someDirective'})
+class SomeDirectiveWithMalformedHostBinding2 {
+  @HostBinding('[a]')
+  onA() {}
+}
+
 class SomeDirectiveWithoutMetadata {}
 
 export function main() {
@@ -210,6 +222,17 @@ export function main() {
         expect(directiveMetadata.host)
             .toEqual({'(c)': 'onC()', '(a)': 'onA()', '(b)': 'onB($event.value)'});
       });
+
+      it('should throw when @HostBinding name starts with "("', () => {
+        expect(() => resolver.resolve(SomeDirectiveWithMalformedHostBinding1))
+            .toThrowError('@HostBinding can not bind to events. Use @HostListener instead.');
+      });
+
+      it('should throw when @HostBinding name starts with "["', () => {
+        expect(() => resolver.resolve(SomeDirectiveWithMalformedHostBinding2))
+            .toThrowError(
+                `@HostBinding parameter should be a property name, 'class.<name>', or 'attr.<name>'.`);
+      });
     });
 
     describe('queries', () => {