fix: issue with angular events using camelCase (#1556)

* fix: issue with angular events using camelCase * chore: update changeset * chore: update snapshots
BuilderIO · Sep 30, 2024 · 7e2c95f · 7e2c95f
1 parent 75d816e
commit 7e2c95f
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/curly-hats-tell.md b/.changeset/curly-hats-tell.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Angular] fix: issue with angular events not transformed to lower-case
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4830,7 +4830,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -12083,7 +12083,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4906,7 +4906,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -12276,7 +12276,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -4999,7 +4999,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -12498,7 +12498,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -4352,7 +4352,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -10874,7 +10874,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -9109,7 +9109,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9147,7 +9147,7 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -22780,7 +22780,7 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -22818,7 +22818,7 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (input)=\\"name = $event.target.value\\"
-        (changeOrSomething)=\\"name = $event.target.value\\"
+        (changeorsomething)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!

diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
@@ -223,7 +223,8 @@ const stringifyBinding =
 
     if (keyToUse.startsWith('on')) {
       const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-      return ` (${event})="${value}"`;
+      // Angular events are all lowerCased
+      return ` (${event.toLowerCase()})="${value}"`;
     } else if (keyToUse === 'class') {
       return ` [class]="${code}" `;
     } else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {