fix(compiler): report error for property/event bindings on ng-content

toha-marko · Антон Мариненко · commit 729212ef0f64 · 2026-05-13T15:34:56.000+03:00
Previously, adding property bindings like [foo]="bar" or event bindings like (click)="handler()" to <ng-content> was silently ignored. These bindings have no effect since ng-content is not a real DOM element. This commit adds a compile-time error to warn the developer. Fixes #24259
diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts
@@ -190,10 +190,12 @@ class HtmlAstToIvyAst implements html.Visitor {
     let parsedElement: t.Content | t.Template | t.Element | undefined;
     if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
       const selector = preparsedElement.selectAttr;
-      const attrs: t.TextAttribute[] = element.attrs.map((attr) => this.visitAttribute(attr));
+
+      this.reportUnsupportedNgContentBindings(parsedProperties, boundEvents);
+
       parsedElement = new t.Content(
         selector,
-        attrs,
+        attributes,
         children,
         element.isSelfClosing,
         element.sourceSpan,
@@ -298,6 +300,27 @@ class HtmlAstToIvyAst implements html.Visitor {
       : this._visitTextWithInterpolation(text.value, text.sourceSpan, text.tokens, text.i18n);
   }
 
+  private reportUnsupportedNgContentBindings(
+    properties: ParsedProperty[],
+    events: t.BoundEvent[],
+  ): void {
+    const reported = new Set<string>();
+
+    for (const binding of [...properties, ...events]) {
+      const sourceSpan = binding.sourceSpan;
+      const key = `${sourceSpan.start.offset}:${sourceSpan.end.offset}`;
+      if (reported.has(key)) {
+        continue;
+      }
+      reported.add(key);
+
+      this.reportError(
+        `Property and event bindings are not supported on <ng-content>. Binding "${sourceSpan.toString()}" will be ignored.`,
+        sourceSpan,
+      );
+    }
+  }
+
   visitExpansion(expansion: html.Expansion): t.Icu | null {
     if (!expansion.i18n) {
       // do not generate Icu in case it was created
diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -305,6 +305,36 @@ describe('R3 template transform', () => {
       ]);
     });
 
+    it('should report an error for property binding on ngContent', () => {
+      const res = parse('<ng-content [foo]="bar"></ng-content>', {ignoreError: true});
+      expect(res.errors.length).toBe(1);
+      expect(res.errors[0].msg).toContain(
+        'Property and event bindings are not supported on <ng-content>',
+      );
+      expect(res.errors[0].msg).toContain('[foo]');
+      expectFromR3Nodes(res.nodes).toEqual([['Content', '*']]);
+    });
+
+    it('should report an error for event binding on ngContent', () => {
+      const res = parse('<ng-content (click)="handler()"></ng-content>', {ignoreError: true});
+      expect(res.errors.length).toBe(1);
+      expect(res.errors[0].msg).toContain(
+        'Property and event bindings are not supported on <ng-content>',
+      );
+      expect(res.errors[0].msg).toContain('(click)');
+    });
+
+    it('should report an error for each binding on ngContent', () => {
+      const res = parse('<ng-content [foo]="a" (bar)="b()"></ng-content>', {ignoreError: true});
+      expect(res.errors.length).toBe(2);
+    });
+
+    it('should report a single error for two-way binding on ngContent', () => {
+      const res = parse('<ng-content [(foo)]="bar"></ng-content>', {ignoreError: true});
+      expect(res.errors.length).toBe(1);
+      expect(res.errors[0].msg).toContain('[(foo)]');
+    });
+
     it('should indicate whether an element is void', () => {
       const nodes = parse('<input><div></div>').nodes as t.Element[];
       expect(nodes[0].name).toBe('input');
