fix: mergedInputs reactivity in angular (#1524)

* fix: mergedInputs reactivity in angular * changeset * Update .changeset/large-hats-peel.md Co-authored-by: Sami Jaber <[email protected]> --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Aug 7, 2024 · 03f1f58 · 03f1f58
1 parent b071783
commit 03f1f58
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/.changeset/large-hats-peel.md b/.changeset/large-hats-peel.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Angular: Fix: reactivity of `mergedInputs` (used in Dynamic components)
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -2536,6 +2536,12 @@ export default class MyBasicForNoTagRefComponent {
  this.vcRef.createEmbeddedView(this.iconTemplateRef).rootNodes,
  ];
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_0 = {};
+ }
+ }
 }
 
 @NgModule({
@@ -3186,6 +3192,17 @@ export default class MyComponent {
  ...this.something,
  };
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_mlw9p4 = {
+ hello: \\"world\\",
+ onClick: this.onClick.bind(this),
+ ...this.attributes,
+ ...this.something,
+ };
+ }
+ }
 }
 
 @NgModule({
@@ -3258,6 +3275,17 @@ export default class MyComponent {
  this.vcRef.createEmbeddedView(this.componentTemplateRef).rootNodes,
  ];
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_mlw9p4 = {
+ hello: \\"world\\",
+ onClick: this.onClick.bind(this),
+ ...this.attributes,
+ ...this.something,
+ };
+ }
+ }
 }
 
 @NgModule({
@@ -8470,6 +8498,12 @@ export default class MyBasicForNoTagRefComponent {
  this.vcRef.createEmbeddedView(this.iconTemplateRef).rootNodes,
  ];
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_0 = {};
+ }
+ }
 }
 
 @NgModule({
@@ -9167,6 +9201,17 @@ export default class MyComponent {
  ...this.something,
  };
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_mlw9p4 = {
+ hello: \\"world\\",
+ onClick: this.onClick.bind(this),
+ ...this.attributes,
+ ...this.something,
+ };
+ }
+ }
 }
 
 @NgModule({
@@ -9240,6 +9285,17 @@ export default class MyComponent {
  this.vcRef.createEmbeddedView(this.componentTemplateRef).rootNodes,
  ];
  }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.mergedInputs_mlw9p4 = {
+ hello: \\"world\\",
+ onClick: this.onClick.bind(this),
+ ...this.attributes,
+ ...this.something,
+ };
+ }
+ }
 }
 
 @NgModule({

diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
@@ -404,13 +404,14 @@ export const blockToAngular = ({
  root.hooks.onInit.code += `\nthis.${inputsPropsStateName} = {${allProps}};\n`;
  }
  if (
- root.hooks.onUpdate &&
- root.hooks.onUpdate.length > 0 &&
  !root.hooks.onUpdate
- .map((hook) => hook.code)
+ ?.map((hook) => hook.code)
  .join('')
  .includes(inputsPropsStateName)
  ) {
+ if (!root.hooks.onUpdate) {
+ root.hooks.onUpdate = [];
+ }
  root.hooks.onUpdate.push({
  code: `this.${inputsPropsStateName} = {${allProps}}`,
  });