fix(compiler): Don't bind inputs/outputs for data- attributes

JeanMeche · thePunderWoman · commit 488d962bc700 · 2026-02-23T13:23:58.000-08:00
This is to improve consistency and match developer expectations. This syntax was already deprecated a long time ago. If you want to bind a data attribute, use the `attr.` prefix (which was already supported). BREAKING CHANGE: data prefixed attribute no-longer bind inputs nor outputs. fixes #26406
diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts
@@ -619,7 +619,6 @@ class HtmlAstToIvyAst implements html.Visitor {
 
     for (const attribute of attrs) {
       let hasBinding = false;
-      const normalizedName = normalizeAttributeName(attribute.name);
 
       // `*attr` defines template bindings
       let isTemplateBinding = false;
@@ -628,7 +627,7 @@ class HtmlAstToIvyAst implements html.Visitor {
         i18nAttrsMeta[attribute.name] = attribute.i18n;
       }
 
-      if (normalizedName.startsWith(TEMPLATE_ATTR_PREFIX)) {
+      if (attribute.name.startsWith(TEMPLATE_ATTR_PREFIX)) {
         // *-attributes
         if (elementHasInlineTemplate) {
           this.reportError(
@@ -639,7 +638,7 @@ class HtmlAstToIvyAst implements html.Visitor {
         isTemplateBinding = true;
         elementHasInlineTemplate = true;
         const templateValue = attribute.value;
-        const templateKey = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length);
+        const templateKey = attribute.name.substring(TEMPLATE_ATTR_PREFIX.length);
 
         const parsedVariables: ParsedVariable[] = [];
         const absoluteValueOffset = attribute.valueSpan
@@ -705,7 +704,7 @@ class HtmlAstToIvyAst implements html.Visitor {
     variables: t.Variable[],
     references: t.Reference[],
   ) {
-    const name = normalizeAttributeName(attribute.name);
+    const name = attribute.name;
     const value = attribute.value;
     const srcSpan = attribute.sourceSpan;
     const absoluteOffset = attribute.valueSpan
@@ -715,8 +714,7 @@ class HtmlAstToIvyAst implements html.Visitor {
     function createKeySpan(srcSpan: ParseSourceSpan, prefix: string, identifier: string) {
       // We need to adjust the start location for the keySpan to account for the removed 'data-'
       // prefix from `normalizeAttributeName`.
-      const normalizationAdjustment = attribute.name.length - name.length;
-      const keySpanStart = srcSpan.start.moveBy(prefix.length + normalizationAdjustment);
+      const keySpanStart = srcSpan.start.moveBy(prefix.length);
       const keySpanEnd = keySpanStart.moveBy(identifier.length);
       return new ParseSourceSpan(keySpanStart, keySpanEnd, keySpanStart, identifier);
     }
@@ -1254,10 +1252,6 @@ class NonBindableVisitor implements html.Visitor {
 
 const NON_BINDABLE_VISITOR = new NonBindableVisitor();
 
-function normalizeAttributeName(attrName: string): string {
-  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
-}
-
 function addEvents(events: ParsedEvent[], boundEvents: t.BoundEvent[]) {
   boundEvents.push(...events.map((e) => t.BoundEvent.fromParsedEvent(e)));
 }
diff --git a/packages/compiler/test/render3/r3_ast_spans_spec.ts b/packages/compiler/test/render3/r3_ast_spans_spec.ts
@@ -398,7 +398,7 @@ describe('R3 AST source spans', () => {
     it('is correct for bound properties via data-', () => {
       expectFromHtml('<div data-prop="{{v}}"></div>').toEqual([
         ['Element', '<div data-prop="{{v}}"></div>', '<div data-prop="{{v}}">', '</div>'],
-        ['BoundAttribute', 'data-prop="{{v}}"', 'prop', '{{v}}'],
+        ['BoundAttribute', 'data-prop="{{v}}"', 'data-prop', '{{v}}'],
       ]);
     });
 
@@ -506,15 +506,15 @@ describe('R3 AST source spans', () => {
       ]);
     });
 
-    it('is correct for reference via data-ref-...', () => {
+    it('is correct for data-ref-... attribute', () => {
       expectFromHtml('<ng-template data-ref-a></ng-template>').toEqual([
         [
           'Template',
           '<ng-template data-ref-a></ng-template>',
           '<ng-template data-ref-a>',
           '</ng-template>',
         ],
-        ['Reference', 'data-ref-a', 'a', '<empty>'],
+        ['TextAttribute', 'data-ref-a', 'data-ref-a', '<empty>'],
       ]);
     });
 
@@ -530,15 +530,15 @@ describe('R3 AST source spans', () => {
       ]);
     });
 
-    it('is correct for variables via data-let-...', () => {
+    it('is correct for data-let-... attribute', () => {
       expectFromHtml('<ng-template data-let-a="b"></ng-template>').toEqual([
         [
           'Template',
           '<ng-template data-let-a="b"></ng-template>',
           '<ng-template data-let-a="b">',
           '</ng-template>',
         ],
-        ['Variable', 'data-let-a="b"', 'a', 'b'],
+        ['TextAttribute', 'data-let-a="b"', 'data-let-a', 'b'],
       ]);
     });
 
@@ -664,10 +664,10 @@ describe('R3 AST source spans', () => {
       ]);
     });
 
-    it('is correct for bound events via data-on-', () => {
+    it('is correct for text attribute via data-on-', () => {
       expectFromHtml('<div data-on-event="v"></div>').toEqual([
         ['Element', '<div data-on-event="v"></div>', '<div data-on-event="v">', '</div>'],
-        ['BoundEvent', 'data-on-event="v"', 'event', 'v'],
+        ['TextAttribute', 'data-on-event="v"', 'data-on-event', 'v'],
       ]);
     });
 
@@ -687,11 +687,10 @@ describe('R3 AST source spans', () => {
       ]);
     });
 
-    it('is correct for bound events and properties via data-bindon-', () => {
+    it('is correct for TextAttribute and properties via data-bindon-', () => {
       expectFromHtml('<div data-bindon-prop="v"></div>').toEqual([
         ['Element', '<div data-bindon-prop="v"></div>', '<div data-bindon-prop="v">', '</div>'],
-        ['BoundAttribute', 'data-bindon-prop="v"', 'prop', 'v'],
-        ['BoundEvent', 'data-bindon-prop="v"', 'prop', 'v'],
+        ['TextAttribute', 'data-bindon-prop="v"', 'data-bindon-prop', 'v'],
       ]);
     });
 
@@ -724,13 +723,6 @@ describe('R3 AST source spans', () => {
         ['Reference', 'ref-a', 'a', '<empty>'],
       ]);
     });
-
-    it('is correct for references via data-ref-', () => {
-      expectFromHtml('<div ref-a></div>').toEqual([
-        ['Element', '<div ref-a></div>', '<div ref-a>', '</div>'],
-        ['Reference', 'ref-a', 'a', '<empty>'],
-      ]);
-    });
   });
 
   describe('ICU expressions', () => {
diff --git a/packages/language-service/test/grp3/quick_info_spec.ts b/packages/language-service/test/grp3/quick_info_spec.ts
@@ -225,14 +225,6 @@ describe('quick info', () => {
         });
       });
 
-      it('should work for data-let- syntax', () => {
-        expectQuickInfo({
-          templateOverride: `<ng-template ngFor data-let-he¦ro [ngForOf]="heroes">{{hero}}</ng-template>`,
-          expectedSpanText: 'hero',
-          expectedDisplayString: '(variable) hero: Hero',
-        });
-      });
-
       it('should get tags', () => {
         const templateOverride = '<div depr¦ecated></div>';
         const text = templateOverride.replace('¦', '');
@@ -264,11 +256,6 @@ describe('quick info', () => {
             expectedSpanText: 'tcName',
             expectedDisplayString: '(property) TestComponent.name: string',
           });
-          expectQuickInfo({
-            templateOverride: `<test-comp data-bind-tcN¦ame="name"></test-comp>`,
-            expectedSpanText: 'tcName',
-            expectedDisplayString: '(property) TestComponent.name: string',
-          });
         });
 
         it('should work for structural directive inputs ngForTrackBy', () => {
@@ -322,11 +309,6 @@ describe('quick info', () => {
             expectedSpanText: 'test',
             expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>',
           });
-          expectQuickInfo({
-            templateOverride: `<test-comp data-on-te¦st="myClick($event)"></test-comp>`,
-            expectedSpanText: 'test',
-            expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>',
-          });
         });
 
         it('should work for $event from EventEmitter', () => {
@@ -375,11 +357,6 @@ describe('quick info', () => {
           expectedSpanText: 'chart',
           expectedDisplayString: '(reference) chart: HTMLDivElement',
         });
-        expectQuickInfo({
-          templateOverride: `<div data-ref-ch¦art></div>`,
-          expectedSpanText: 'chart',
-          expectedDisplayString: '(reference) chart: HTMLDivElement',
-        });
       });
 
       it('should work for click output from native element', () => {
