fix: handle animation trigger bindings in directive host property

The directive's parse_host_property_name was missing the @ animation check,
causing host: { '[@slidein]': 'state' } on directives to emit ɵɵdomProperty
instead of ɵɵsyntheticHostProperty.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ashley-hunter

crates/oxc_angular_compiler/src/directive/compiler.rs

@@ -743,6 +743,9 @@ fn parse_host_property_name(name: &str) -> (BindingType, &str, Option<&str>) {
         }
     } else if let Some(rest) = name.strip_prefix("attr.") {
         (BindingType::Attribute, rest, None)
+    } else if name.starts_with('@') {
+        // Animation binding like @triggerName
+        (BindingType::Animation, name, None)
     } else {
         (BindingType::Property, name, None)
     }

crates/oxc_angular_compiler/tests/integration_test.rs

@@ -2341,6 +2341,42 @@ export class SlideComponent {
     );
 }
 
+#[test]
+fn test_directive_host_animation_trigger_binding() {
+    // Directive with animation trigger in host property should emit ɵɵsyntheticHostProperty
+    let source = r#"
+import { Directive } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+@Directive({
+    selector: '[appSlide]',
+    host: {
+        '[@slideIn]': 'animationState',
+    }
+})
+export class SlideDirective {
+    animationState = 'active';
+}
+"#;
+    let allocator = Allocator::default();
+    let result = transform_angular_file(&allocator, "slide.directive.ts", source, None, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+
+    let code = &result.code;
+
+    // Should have ɵɵsyntheticHostProperty in the hostBindings update block
+    assert!(
+        code.contains(r#"syntheticHostProperty("@slideIn""#),
+        "Expected syntheticHostProperty with @slideIn name for directive.\nGot:\n{code}"
+    );
+
+    // Should NOT use regular hostProperty for animation triggers
+    assert!(
+        !code.contains(r#"hostProperty("@slideIn""#),
+        "Should not use hostProperty for animation triggers.\nGot:\n{code}"
+    );
+}
+
 /// Test that multiple components with host bindings in the same file have unique constant names.
 ///
 /// This test simulates the real-world scenario from Material Angular's fab.ts where

napi/angular-compiler/e2e/compare/fixtures/animations/animation-host.fixture.ts

@@ -135,6 +135,28 @@ import { Component } from '@angular/core';
 })
 export class AnimationParamsComponent {
   state = 'initial';
+}
+    `.trim(),
+    expectedFeatures: ['ɵɵsyntheticHostProperty'],
+  },
+  {
+    name: 'animation-directive-host-property-trigger',
+    category: 'animations',
+    description: 'Animation trigger binding in directive host property',
+    className: 'SlideDirective',
+    type: 'full-transform',
+    sourceCode: `
+import { Directive } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+@Directive({
+  selector: '[appSlide]',
+  host: {
+    '[@slideIn]': 'animationState',
+  }
+})
+export class SlideDirective {
+  animationState = 'active';
 }
     `.trim(),
     expectedFeatures: ['ɵɵsyntheticHostProperty'],