fix(compiler-cli): correctly parse event name in HostListener (#60561)

crisbeto · alxhub · commit 1e6faad479e8 · 2025-03-26T20:46:45.000-07:00
Fixes that we weren't accounting for targeted events when creating the AST for `@HostListener`-decorated members. PR Close #60561
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/host_bindings.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/host_bindings.ts
@@ -387,14 +387,31 @@ function createNodeFromListenerDecorator(
 
   const callNode = new Call(span, nameSpan, receiver, argNodes, span);
   const eventNameNode = args[0];
-  const [eventName, phase] = eventNameNode.text.split('.');
+  let type: ParsedEventType;
+  let eventName: string;
+  let phase: string | null;
+  let target: string | null;
+
+  if (eventNameNode.text.startsWith('@')) {
+    const parsedName = parser.parseAnimationEventName(eventNameNode.text);
+    type = ParsedEventType.Animation;
+    eventName = parsedName.eventName;
+    phase = parsedName.phase;
+    target = null;
+  } else {
+    const parsedName = parser.parseEventListenerName(eventNameNode.text);
+    type = ParsedEventType.Regular;
+    eventName = parsedName.eventName;
+    target = parsedName.target;
+    phase = null;
+  }
 
   listeners.push(
     new TmplAstBoundEvent(
       eventName,
-      eventName.startsWith('@') ? ParsedEventType.Animation : ParsedEventType.Regular,
+      type,
       callNode,
-      null,
+      target,
       phase,
       createSourceSpan(decorator),
       createSourceSpan(decorator),
diff --git a/packages/compiler-cli/test/ngtsc/host_bindings_type_check_spec.ts b/packages/compiler-cli/test/ngtsc/host_bindings_type_check_spec.ts
@@ -257,6 +257,30 @@ runInEachFileSystem(() => {
       expect(getDiagnosticSourceCode(diags[0])).toBe('$event');
     });
 
+    it('should check @HostListener with a target', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component, HostListener} from '@angular/core';
+
+        @Component({
+          template: '',
+          selector: 'button[foo]',
+        })
+        export class Comp {
+          @HostListener('document:click', ['$event']) handleEvent(event: KeyboardEvent) {}
+        }
+      `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect((diags[0].messageText as ts.DiagnosticMessageChain).messageText).toBe(
+        `Argument of type 'MouseEvent' is not assignable to parameter of type 'KeyboardEvent'.`,
+      );
+      expect(getDiagnosticSourceCode(diags[0])).toBe('$event');
+    });
+
     it('should check host animation event listeners', () => {
       env.write(
         'test.ts',
