fix(compiler-cli): only bind inputs that are part of microsyntax to a structural directive (#52453)

JoostK · thePunderWoman · commit 89cf62f907d2 · 2025-09-17T16:05:04.000Z
Prior to this change the template type-check generator would incorrectly apply inputs and attributes to a structural directive, where only the bindings as present in microsyntax are actually bound to the directive. This introduced a problem where usages of template variables could not be resolved, because the template variables are out-of-scope of the template element itself. Closes #49931 PR Close #52453
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
@@ -3422,10 +3422,16 @@ function getBoundAttributes(
     }
   };
 
-  node.inputs.forEach(processAttribute);
-  node.attributes.forEach(processAttribute);
   if (node instanceof TmplAstTemplate) {
+    if (node.tagName === 'ng-template') {
+      node.inputs.forEach(processAttribute);
+      node.attributes.forEach(processAttribute);
+    }
+
     node.templateAttrs.forEach(processAttribute);
+  } else {
+    node.inputs.forEach(processAttribute);
+    node.attributes.forEach(processAttribute);
   }
 
   return boundInputs;
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
@@ -456,6 +456,50 @@ describe('type check blocks', () => {
     expect(block).not.toContain('NoReference');
   });
 
+  it('should not bind inputs outside of microsyntax to a structural directive', () => {
+    const TEMPLATE = `
+      <my-dir *ngFor="let foo of foos" [ngForTrackBy]="foo"></my-dir>
+    `;
+    const DIRECTIVES: TestDeclaration[] = [
+      {
+        type: 'directive',
+        name: 'NgFor',
+        selector: '[ngFor][ngForOf]',
+        inputs: {ngForOf: 'ngForOf', ngForTrackBy: 'ngForTrackBy'},
+      },
+      {
+        type: 'directive',
+        name: 'MyDir',
+        selector: 'my-dir',
+        inputs: {ngForTrackBy: 'ngForTrackBy'},
+      },
+    ];
+    const block = tcb(TEMPLATE, DIRECTIVES);
+    expect(block).toContain('var _t1 = null! as i0.NgFor');
+    expect(block).toContain('_t1.ngForOf = (((this).foos))');
+    expect(block).not.toContain('_t1.ngForTrackBy');
+    expect(block).toContain('var _t4 = null! as i0.MyDir');
+    expect(block).toContain('_t4.ngForTrackBy =');
+  });
+
+  it('should bind inputs to a structural directive when used on ng-template', () => {
+    const TEMPLATE = `
+      <ng-template ngFor [ngForOf]="foos" let-foo [ngForTrackBy]="foo"></ng-template>
+    `;
+    const DIRECTIVES: TestDeclaration[] = [
+      {
+        type: 'directive',
+        name: 'NgFor',
+        selector: '[ngFor][ngForOf]',
+        inputs: {ngForOf: 'ngForOf', ngForTrackBy: 'ngForTrackBy'},
+      },
+    ];
+    const block = tcb(TEMPLATE, DIRECTIVES);
+    expect(block).toContain('var _t1 = null! as i0.NgFor');
+    expect(block).toContain('_t1.ngForOf = (((this).foos))');
+    expect(block).toContain('_t1.ngForTrackBy = (((this).foo))');
+  });
+
   it('should generate a forward element reference correctly', () => {
     const TEMPLATE = `
       {{ i.value }}
