From 08cb2fa80f9d43e15e5f1a6c44a34ed82a86bd38 Mon Sep 17 00:00:00 2001
From: JoostK <joost.koehoorn@gmail.com>
Date: Sun, 13 Oct 2019 14:39:02 +0200
Subject: [PATCH] fix(ivy): ignore non-property bindings to inputs in template
 type checker (#33130)

Prior to this change, the template type checker would incorrectly bind
non-property bindings such as `[class.strong]`, `[style.color]` and
`[attr.enabled]` to directive inputs of the same name. This is
undesirable, as those bindings are never actually bound to the inputs at
runtime.

Fixes #32099
Fixes #32496
Resolves FW-1596

PR Close #33130
---
 .../src/ngtsc/typecheck/src/type_check_block.ts  |  5 +++++
 .../typecheck/test/type_check_block_spec.ts      | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
index c8627b3823..ed37665032 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
@@ -857,6 +857,11 @@ function tcbGetDirectiveInputs(
    * a matching binding.
    */
   function processAttribute(attr: TmplAstBoundAttribute | TmplAstTextAttribute): void {
+    // Skip non-property bindings.
+    if (attr instanceof TmplAstBoundAttribute && attr.type !== BindingType.Property) {
+      return;
+    }
+
     // Skip the attribute if the directive does not have an input for it.
     if (!propMatch.has(attr.name)) {
       return;
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
index cdad5d93de..d2bac46b00 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
@@ -129,6 +129,22 @@ describe('type check blocks', () => {
     expect(block).not.toContain('.style = ');
   });
 
+  it('should only apply property bindings to directives', () => {
+    const TEMPLATE = `
+      <div dir [style.color]="'blue'" [class.strong]="false" [attr.enabled]="true"></div>
+    `;
+    const DIRECTIVES: TestDeclaration[] = [{
+      type: 'directive',
+      name: 'Dir',
+      selector: '[dir]',
+      inputs: {'color': 'color', 'strong': 'strong', 'enabled': 'enabled'},
+    }];
+    const block = tcb(TEMPLATE, DIRECTIVES);
+    expect(block).toContain(
+        'var _t2 = Dir.ngTypeCtor({ color: (null as any), strong: (null as any), enabled: (null as any) });');
+    expect(block).toContain('"blue"; false; true;');
+  });
+
   it('should generate a circular directive reference correctly', () => {
     const TEMPLATE = `
       <div dir #d="dir" [input]="d"></div>