fix(compiler-cli): update diagnostic to flag no-op arrow functions in listeners

crisbeto · AndrewKushnir · commit 2ea6dfc6c9ca · 2026-02-06T07:39:18.000-08:00
Based on the discussion in #66294: now that we support arrow functions in event listeners, developers may write out something like `(click)="() => expr"` which will be a no-op. These changes update the existing diagnostic for uninvoked expressions in listeners to account for it.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/uninvoked_function_in_event_binding/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/uninvoked_function_in_event_binding/index.ts
@@ -14,6 +14,7 @@ import {
   Conditional,
   ParsedEventType,
   PropertyRead,
+  ArrowFunction,
   SafeCall,
   SafePropertyRead,
   TmplAstBoundEvent,
@@ -84,6 +85,12 @@ function assertExpressionInvoked(
     return []; // If the method is called, skip it.
   }
 
+  if (expression instanceof ArrowFunction) {
+    const errorString =
+      'Arrow function will not be invoked in this event listener. Did you intend to call a method?';
+    return [ctx.makeTemplateDiagnostic(node.sourceSpan, errorString)];
+  }
+
   if (!(expression instanceof PropertyRead) && !(expression instanceof SafePropertyRead)) {
     return []; // If the expression is not a property read, skip it.
   }
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/uninvoked_function_in_event_binding/uninvoked_function_in_event_binding_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/test/checks/uninvoked_function_in_event_binding/uninvoked_function_in_event_binding_spec.ts
@@ -193,6 +193,17 @@ runInEachFileSystem(() => {
 
       expect(diags.length).toBe(0);
     });
+
+    it('should produce a diagnostic when an event listener is declared as an arrow function', () => {
+      const diags = setupTestComponent(`<button (click)="() => 123"></button>`, ``);
+      expect(diags.length).toBe(1);
+      expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning);
+      expect(diags[0].code).toBe(ngErrorCode(ErrorCode.UNINVOKED_FUNCTION_IN_EVENT_BINDING));
+      expect(getSourceCodeForDiagnostic(diags[0])).toBe(`(click)="() => 123"`);
+      expect(diags[0].messageText).toBe(
+        'Arrow function will not be invoked in this event listener. Did you intend to call a method?',
+      );
+    });
   });
 });
 
