diff --git a/.changeset/perfect-seas-bow.md b/.changeset/perfect-seas-bow.md
new file mode 100644
index 0000000000..2da15ed99b
--- /dev/null
+++ b/.changeset/perfect-seas-bow.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Angular: Fix: `useObjectWrapper` logic to correctly handle spread and objects as arguments
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 8663b0f8a4..7535542a35 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -1582,7 +1582,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -1601,14 +1604,6 @@ export default class ImgComponent {
   @Input() attributes;
   @Input() imgSrc;
   @Input() altText;
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -1795,7 +1790,11 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -1814,14 +1813,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -2262,7 +2253,13 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -4978,7 +4975,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -5026,7 +5028,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -5042,15 +5046,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -5369,6 +5365,83 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7211,7 +7284,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -7230,14 +7306,6 @@ export default class ImgComponent {
   @Input() attributes!: ImgProps[\\"attributes\\"];
   @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
   @Input() altText!: ImgProps[\\"altText\\"];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -7452,7 +7520,11 @@ export interface SectionProps {
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -7471,14 +7543,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -7998,7 +8062,13 @@ export interface VideoProps {
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -10885,7 +10955,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -10933,7 +11008,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -10949,15 +11026,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -11284,6 +11353,83 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args: any[]) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index d7aa2caac7..c479210914 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -1605,7 +1605,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -1624,14 +1627,6 @@ export default class ImgComponent {
   @Input() attributes;
   @Input() imgSrc;
   @Input() altText;
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -1823,7 +1818,11 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -1842,14 +1841,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -2300,7 +2291,13 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -5074,7 +5071,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -5123,7 +5125,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -5139,15 +5143,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -5475,6 +5471,84 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7343,7 +7417,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -7362,14 +7439,6 @@ export default class ImgComponent {
   @Input() attributes!: ImgProps[\\"attributes\\"];
   @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
   @Input() altText!: ImgProps[\\"altText\\"];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -7589,7 +7658,11 @@ export interface SectionProps {
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -7608,14 +7681,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -8145,7 +8210,13 @@ export interface VideoProps {
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -11092,7 +11163,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -11141,7 +11217,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -11157,15 +11235,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -11501,6 +11571,84 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args: any[]) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
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 29eae09406..756a3b1e07 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5599,6 +5599,117 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"node_0_Comp\\"
+        [val2]=\\"node_1_Comp\\"
+        [val3]=\\"node_2_Comp\\"
+        [val4]=\\"node_3_Comp\\"
+        [val5]=\\"node_4_Comp\\"
+        [val6]=\\"node_5_Comp\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+  node_0_Comp = null;
+  node_1_Comp = null;
+  node_2_Comp = null;
+  node_3_Comp = null;
+  node_4_Comp = null;
+  node_5_Comp = null;
+
+  ngOnInit() {
+    this.node_0_Comp = { ...this.attributes2 };
+    this.node_1_Comp = { ...this.attributes, ...this.attributes2 };
+    this.node_2_Comp = { ...this.something, anything: \\"hello\\", hello: \\"world\\" };
+    this.node_3_Comp = {
+      ...this.attributes,
+      ...this.something,
+      anything: [1, 2, 3],
+      hello: \\"hello\\",
+      ...this.attributes2,
+    };
+    this.node_4_Comp = {
+      ...this.attributes,
+      ...this.something,
+      anything: [1, 2, 3],
+      anythingString: [\\"a\\", \\"b\\", \\"c\\"],
+      hello: \\"hello\\",
+      ...this.spreadAttrs,
+    };
+    this.node_5_Comp = {
+      anything: [1, 2, 3],
+    };
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      this.node_0_Comp = { ...this.attributes2 };
+      this.node_1_Comp = { ...this.attributes, ...this.attributes2 };
+      this.node_2_Comp = {
+        ...this.something,
+        anything: \\"hello\\",
+        hello: \\"world\\",
+      };
+      this.node_3_Comp = {
+        ...this.attributes,
+        ...this.something,
+        anything: [1, 2, 3],
+        hello: \\"hello\\",
+        ...this.attributes2,
+      };
+      this.node_4_Comp = {
+        ...this.attributes,
+        ...this.something,
+        anything: [1, 2, 3],
+        anythingString: [\\"a\\", \\"b\\", \\"c\\"],
+        hello: \\"hello\\",
+        ...this.spreadAttrs,
+      };
+      this.node_5_Comp = {
+        anything: [1, 2, 3],
+      };
+    }
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11775,6 +11886,117 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input, SimpleChanges } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"node_0_Comp\\"
+        [val2]=\\"node_1_Comp\\"
+        [val3]=\\"node_2_Comp\\"
+        [val4]=\\"node_3_Comp\\"
+        [val5]=\\"node_4_Comp\\"
+        [val6]=\\"node_5_Comp\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+  node_0_Comp = null;
+  node_1_Comp = null;
+  node_2_Comp = null;
+  node_3_Comp = null;
+  node_4_Comp = null;
+  node_5_Comp = null;
+
+  ngOnInit() {
+    this.node_0_Comp = { ...this.attributes2 };
+    this.node_1_Comp = { ...this.attributes, ...this.attributes2 };
+    this.node_2_Comp = { ...this.something, anything: \\"hello\\", hello: \\"world\\" };
+    this.node_3_Comp = {
+      ...this.attributes,
+      ...this.something,
+      anything: [1, 2, 3],
+      hello: \\"hello\\",
+      ...this.attributes2,
+    };
+    this.node_4_Comp = {
+      ...this.attributes,
+      ...this.something,
+      anything: [1, 2, 3],
+      anythingString: [\\"a\\", \\"b\\", \\"c\\"],
+      hello: \\"hello\\",
+      ...this.spreadAttrs,
+    };
+    this.node_5_Comp = {
+      anything: [1, 2, 3],
+    };
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      this.node_0_Comp = { ...this.attributes2 };
+      this.node_1_Comp = { ...this.attributes, ...this.attributes2 };
+      this.node_2_Comp = {
+        ...this.something,
+        anything: \\"hello\\",
+        hello: \\"world\\",
+      };
+      this.node_3_Comp = {
+        ...this.attributes,
+        ...this.something,
+        anything: [1, 2, 3],
+        hello: \\"hello\\",
+        ...this.attributes2,
+      };
+      this.node_4_Comp = {
+        ...this.attributes,
+        ...this.something,
+        anything: [1, 2, 3],
+        anythingString: [\\"a\\", \\"b\\", \\"c\\"],
+        hello: \\"hello\\",
+        ...this.spreadAttrs,
+      };
+      this.node_5_Comp = {
+        anything: [1, 2, 3],
+      };
+    }
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index 774f8ea51f..a07a703d34 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -1445,7 +1445,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -1457,14 +1460,6 @@ export default class ImgComponent {
   @Input() attributes;
   @Input() imgSrc;
   @Input() altText;
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -1623,7 +1618,11 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -1635,14 +1634,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -2024,7 +2015,13 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -4362,7 +4359,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
 })
 export default class MyComponent {
@@ -4403,7 +4405,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -4416,15 +4420,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -4701,6 +4697,76 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6385,7 +6451,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -6397,14 +6466,6 @@ export default class ImgComponent {
   @Input() attributes!: ImgProps[\\"attributes\\"];
   @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
   @Input() altText!: ImgProps[\\"altText\\"];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -6591,7 +6652,11 @@ export interface SectionProps {
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -6603,14 +6668,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -7071,7 +7128,13 @@ export interface VideoProps {
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -9579,7 +9642,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
 })
 export default class MyComponent {
@@ -9620,7 +9688,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -9633,15 +9703,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -9925,6 +9987,76 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args: any[]) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 56bb0b1d86..2481eeb224 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -2987,7 +2987,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -3006,14 +3009,6 @@ export default class ImgComponent {
   @Input() attributes;
   @Input() imgSrc;
   @Input() altText;
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -3035,7 +3030,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -3056,14 +3054,6 @@ export default class ImgComponent {
   @Input() attributes;
   @Input() imgSrc;
   @Input() altText;
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 "
 `;
@@ -3347,7 +3337,11 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -3366,14 +3360,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -3426,7 +3412,11 @@ import { CommonModule } from \\"@angular/common\\";
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -3447,14 +3437,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 "
 `;
@@ -4243,7 +4225,13 @@ import { Component, Input } from \\"@angular/core\\";
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -4297,7 +4285,13 @@ import { CommonModule } from \\"@angular/common\\";
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -9258,7 +9252,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -9302,7 +9301,12 @@ import { CommonModule } from \\"@angular/common\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -9345,7 +9349,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -9361,15 +9367,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -9389,7 +9387,9 @@ import { CommonModule } from \\"@angular/common\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -9407,15 +9407,7 @@ import { CommonModule } from \\"@angular/common\\";
   standalone: true,
   imports: [CommonModule],
 })
-export default class MyComponent {
-  useObjectWrapper(...args) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 "
 `;
 
@@ -9977,6 +9969,153 @@ export default class MyComponent {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > useObjectWrapper 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule, Comp],
+})
+export default class MyComponent {
+  @Input() spreadAttrs;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13446,7 +13585,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -13465,14 +13607,6 @@ export default class ImgComponent {
   @Input() attributes!: ImgProps[\\"attributes\\"];
   @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
   @Input() altText!: ImgProps[\\"altText\\"];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -13511,7 +13645,10 @@ import { Builder } from \\"@builder.io/sdk\\";
   selector: \\"img-component, ImgComponent\\",
   template: \`
     <img
-      [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+      [ngStyle]=\\"{
+          objectFit: backgroundSize || 'cover',
+          objectPosition: backgroundPosition || 'center'
+        }\\"
       [attr.alt]=\\"altText\\"
       [attr.src]=\\"imgSrc\\"
     />
@@ -13532,14 +13669,6 @@ export default class ImgComponent {
   @Input() attributes!: ImgProps[\\"attributes\\"];
   @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
   @Input() altText!: ImgProps[\\"altText\\"];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 "
 `;
@@ -13867,7 +13996,11 @@ export interface SectionProps {
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -13886,14 +14019,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 
 @NgModule({
@@ -13958,7 +14083,11 @@ export interface SectionProps {
   template: \`
     <ng-container *ngIf=\\"max\\">
       <ng-container *ngFor=\\"let item of items\\">
-        <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+        <section
+          [ngStyle]=\\"{
+          maxWidth: item + max
+        }\\"
+        >
           <ng-content></ng-content>
         </section>
       </ng-container>
@@ -13979,14 +14108,6 @@ export default class SectionStateComponent {
 
   max = 42;
   items = [42];
-
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
 }
 "
 `;
@@ -14907,7 +15028,13 @@ export interface VideoProps {
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -14987,7 +15114,13 @@ export interface VideoProps {
   template: \`
     <video
       preload=\\"none\\"
-      [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+      [ngStyle]=\\"useObjectWrapper({
+          width: '100%' },{
+          height: '100%' },
+          attributes?.style,{
+          objectFit: fit },{
+          objectPosition: position },{
+              borderRadius: 1 },)\\"
       [attr.poster]=\\"posterImage\\"
       [attr.autoplay]=\\"autoPlay\\"
       [attr.muted]=\\"muted\\"
@@ -20289,7 +20422,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -20333,7 +20471,12 @@ import { CommonModule } from \\"@angular/common\\";
 @Component({
   selector: \\"my-component, MyComponent\\",
   template: \`
-    <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+    <Comp
+      [val]=\\"useObjectWrapper( val
+        )\\"
+    >
+      {{val}}
+    </Comp>
   \`,
   styles: [
     \`
@@ -20376,7 +20519,9 @@ import { Component } from \\"@angular/core\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -20392,15 +20537,7 @@ import { Component } from \\"@angular/core\\";
     \`,
   ],
 })
-export default class MyComponent {
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 
 @NgModule({
   declarations: [MyComponent],
@@ -20420,7 +20557,9 @@ import { CommonModule } from \\"@angular/common\\";
   template: \`
     <div
       class=\\"builder-column div\\"
-      [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+      [ngStyle]=\\"{
+          width: '100%'
+        }\\"
     ></div>
   \`,
   styles: [
@@ -20438,15 +20577,7 @@ import { CommonModule } from \\"@angular/common\\";
   standalone: true,
   imports: [CommonModule],
 })
-export default class MyComponent {
-  useObjectWrapper(...args: any[]) {
-    let obj = {};
-    args.forEach((arg) => {
-      obj = { ...obj, ...arg };
-    });
-    return obj;
-  }
-}
+export default class MyComponent {}
 "
 `;
 
@@ -21023,6 +21154,153 @@ export default class MyComponent {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args: any[]) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, CompModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > useObjectWrapper 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <Comp
+        [val1]=\\"useObjectWrapper( attributes2
+        )\\"
+        [val2]=\\"useObjectWrapper( attributes,
+          attributes2
+        )\\"
+        [val3]=\\"useObjectWrapper( something,{
+          anything: 'hello' },{
+          hello: 'world' },)\\"
+        [val4]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          hello: 'hello' },
+          attributes2
+        )\\"
+        [val5]=\\"useObjectWrapper( attributes,
+          something,{
+          anything: [1, 2, 3] },{
+          anythingString: ['a', 'b', 'c'] },{
+          hello: 'hello' },
+          spreadAttrs
+        )\\"
+        [val6]=\\"{
+          anything: [1, 2, 3]
+        }\\"
+      ></Comp>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule, Comp],
+})
+export default class MyComponent {
+  @Input() spreadAttrs!: any;
+
+  attributes = {
+    id: 1,
+  };
+  attributes2 = {
+    id2: 1,
+  };
+  something = {
+    id3: 1,
+  };
+
+  useObjectWrapper(...args: any[]) {
+    let obj = {};
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/data/angular/use-object-wrapper.raw.tsx b/packages/core/src/__tests__/data/angular/use-object-wrapper.raw.tsx
new file mode 100644
index 0000000000..cd7a44a994
--- /dev/null
+++ b/packages/core/src/__tests__/data/angular/use-object-wrapper.raw.tsx
@@ -0,0 +1,42 @@
+import { useStore } from '@builder.io/mitosis';
+
+export default function MyComponent(props) {
+  const state = useStore({
+    attributes: { id: 1 },
+    attributes2: { id2: 1 },
+    something: { id3: 1 },
+  });
+
+  return (
+    <div>
+      <Comp
+        val1={{ ...state.attributes2 }}
+        val2={{
+          ...state.attributes,
+          ...state.attributes2,
+        }}
+        val3={{
+          ...state.something,
+          anything: 'hello',
+          hello: 'world',
+        }}
+        val4={{
+          ...state.attributes,
+          ...state.something,
+          anything: [1, 2, 3],
+          hello: 'hello',
+          ...state.attributes2,
+        }}
+        val5={{
+          ...state.attributes,
+          ...state.something,
+          anything: [1, 2, 3],
+          anythingString: ['a', 'b', 'c'],
+          hello: 'hello',
+          ...props.spreadAttrs,
+        }}
+        val6={{ anything: [1, 2, 3] }}
+      />
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 28728df394..bbd6822b84 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -287,6 +287,7 @@ const ANGULAR_TESTS: Tests = {
   twoForsTrackBy: getRawFile('./data/angular/two-fors.raw.tsx'),
   stateInit: getRawFile('./data/angular/state-init.raw.tsx'),
   stateInitSequence: getRawFile('./data/angular/state-init-sequence.raw.tsx'),
+  useObjectWrapper: getRawFile('./data/angular/use-object-wrapper.raw.tsx'),
 };
 
 const CONTEXT_TEST: Tests = {
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index 578556374d..c91203441e 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -124,29 +124,15 @@ const handleObjectBindings = (code: string) => {
   let objectCode = code.replace(/^{/, '').replace(/}$/, '');
   objectCode = objectCode.replace(/\/\/.*\n/g, '');
 
-  const spreadOutObjects = objectCode
-    .split(',')
-    .filter((item) => item.includes('...'))
-    .map((item) => item.replace('...', '').trim());
-
-  const objectKeys = objectCode
-    .split(',')
-    .filter((item) => !item.includes('...'))
-    .map((item) => item.trim());
-
-  const otherObjs = objectKeys.map((item) => {
-    return `{ ${item} }`;
-  });
-
-  let temp = `${spreadOutObjects.join(', ')}, ${otherObjs.join(', ')}`;
+  let temp = objectCode;
 
-  if (temp.endsWith(', ')) {
-    temp = temp.slice(0, -2);
-  }
-
-  if (temp.startsWith(', ')) {
-    temp = temp.slice(2);
-  }
+  //STEP 1. remove spread operator for expressions like '{ ...objectName }' and replace them with object name, example {...obj} => obj
+  temp = temp.replace(/\{\s*\.\.\.(\w+)\s*}/g, '$1');
+  //STEP 2. remove all remaining spread operators that could be nested somewhere deeper, example { ...obj, field1: value1 } => { obj, field1: value1 }
+  temp = temp.replace(/\.\.\./g, '');
+  //STEP 3. deal with consequences of STEP 2 - for all left field assignments we create new objects provided to useObjectWrapper,
+  //and we get rid of surrounding brackets of the initial input value, example {...obj1,test:true,...obj2} => obj1, {test: true}, obj2
+  temp = temp.replace(/(\s*\w+\s*:\s*((["'].+["'])|(\[.+])|([\w.]+)))(,|[\n\s]*)/g, `{ $1 },`);
 
   // handle template strings
   if (temp.includes('`')) {
@@ -166,7 +152,7 @@ const handleObjectBindings = (code: string) => {
 
 const processCodeBlockInTemplate = (code: string) => {
   // contains helper calls as Angular doesn't support JS expressions in templates
-  if (code.startsWith('{')) {
+  if (code.startsWith('{') && code.includes('...')) {
     // Objects cannot be spread out directly in Angular so we need to use `useObjectWrapper`
     return `useObjectWrapper(${handleObjectBindings(code)})`;
   } else if (code.startsWith('Object.values')) {