fix(compiler-cli): animation events not type checked properly when bound through HostListener decorator

crisbeto · kirjs · commit e5f96c2d8813 · 2026-04-13T11:05:16.000+03:00
Fixes that we weren't inferring the type of `animate.` event correctly, if they're bound through a `@HostListener` decorator.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/host_bindings.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/host_bindings.ts
@@ -416,7 +416,9 @@ function createNodeFromListenerDecorator(
     target = null;
   } else {
     const parsedName = parser.parseEventListenerName(eventNameNode.text);
-    type = ParsedEventType.Regular;
+    type = parsedName.eventName.startsWith('animate.')
+      ? ParsedEventType.Animation
+      : ParsedEventType.Regular;
     eventName = parsedName.eventName;
     target = parsedName.target;
     phase = null;
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
@@ -278,7 +278,7 @@ runInEachFileSystem(() => {
       expect(getDiagnosticSourceCode(diags[0])).toBe('$event');
     });
 
-    it('should check host animation event listeners', () => {
+    it('should check legacy host animation event listeners', () => {
       env.write(
         'test.ts',
         `
@@ -301,6 +301,56 @@ runInEachFileSystem(() => {
       expect(getDiagnosticSourceCode(diags[0])).toBe('handleEvent');
     });
 
+    it('should check animation event listeners in `host` object', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '',
+          selector: 'button[foo]',
+          host: {'(animate.leave)': 'handleEvent($event)'},
+        })
+        export class Comp {
+          handleEvent(event: Event) {}
+        }
+      `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect((diags[0].messageText as ts.DiagnosticMessageChain).messageText).toContain(
+        `Argument of type 'AnimationCallbackEvent' is not assignable to parameter of type 'Event'.`,
+      );
+      expect(getDiagnosticSourceCode(diags[0])).toBe('$event');
+    });
+
+    it('should check animation event listeners in `@HostListener`', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component, HostListener} from '@angular/core';
+
+        @Component({
+          template: '',
+          selector: 'button[foo]',
+        })
+        export class Comp {
+          @HostListener('animate.leave', ['$event'])
+          handleEvent(event: Event) {}
+        }
+      `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect((diags[0].messageText as ts.DiagnosticMessageChain).messageText).toContain(
+        `Argument of type 'AnimationCallbackEvent' is not assignable to parameter of type 'Event'.`,
+      );
+      expect(getDiagnosticSourceCode(diags[0])).toBe('$event');
+    });
+
     it('should not leak @let from the template into the host bindings', () => {
       env.write(
         'test.ts',
