From 03f1f58fef2d141f3628feec4ff0ec156d696469 Mon Sep 17 00:00:00 2001
From: Sidharth Mohanty <sidmohanty11@gmail.com>
Date: Wed, 7 Aug 2024 20:47:52 +0530
Subject: [PATCH] fix: `mergedInputs` reactivity in angular (#1524)

* fix: mergedInputs reactivity in angular

* changeset

* Update .changeset/large-hats-peel.md

Co-authored-by: Sami Jaber <me@sami.website>

---------

Co-authored-by: Sami Jaber <me@sami.website>
---
 .changeset/large-hats-peel.md                 |  5 ++
 .../__snapshots__/angular.state.test.ts.snap  | 56 +++++++++++++++++++
 packages/core/src/generators/angular/index.ts |  7 ++-
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/large-hats-peel.md

diff --git a/.changeset/large-hats-peel.md b/.changeset/large-hats-peel.md
new file mode 100644
index 0000000000..ec32bd84d4
--- /dev/null
+++ 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
index fe4e16f898..b184dca910 100644
--- 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
index 5ff3b7cf08..89c83f496c 100644
--- 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}}`,
         });