diff --git a/.changeset/fast-monkeys-do.md b/.changeset/fast-monkeys-do.md
new file mode 100644
index 0000000000..60428fe9b5
--- /dev/null
+++ b/.changeset/fast-monkeys-do.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+fix: angular state initialization referencing other states or props
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 af632afd01..ec70ca9a66 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -3135,9 +3135,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -4909,6 +4913,62 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8809,9 +8869,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -10704,6 +10768,62 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > styleClassAndCss 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 cf7bc32ccf..fd027b4c2f 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -3192,9 +3192,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -5004,6 +5008,63 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8973,9 +9034,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -10908,6 +10973,63 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > styleClassAndCss 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 ef3ea6d7fe..7f113eda29 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -3291,9 +3291,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -5108,6 +5112,62 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9167,9 +9227,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -11104,6 +11168,62 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > styleClassAndCss 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 ecb90d02bc..4bd608e4e0 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -2779,9 +2779,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -4300,6 +4304,55 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7778,9 +7831,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -9419,6 +9476,55 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > styleClassAndCss 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 f7fd00ca9b..e49fad1f59 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -5843,9 +5843,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -5879,9 +5883,13 @@ import { CommonModule } from \\"@angular/common\\";
 export default class MyComponent {
   @Input() componentRef;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 "
 `;
@@ -9136,6 +9144,111 @@ export default class MyBasicComponent {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > stateInit 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {
+  @Input() val;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -16423,9 +16536,13 @@ import { Component, Input } from \\"@angular/core\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 
 @NgModule({
@@ -16459,9 +16576,13 @@ import { CommonModule } from \\"@angular/common\\";
 export default class MyComponent {
   @Input() componentRef!: any;
 
-  refToUse = !(this.componentRef instanceof Function)
-    ? this.componentRef
-    : null;
+  refToUse = null;
+
+  ngOnInit() {
+    this.refToUse = !(this.componentRef instanceof Function)
+      ? this.componentRef
+      : null;
+  }
 }
 "
 `;
@@ -19957,6 +20078,111 @@ export default class MyBasicComponent {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > stateInit 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > stateInit 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <div>{{asfas}}</div>
+      <div>{{someCompute}}</div>
+      <div>{{someOtherVal}}</div>
+      <div>{{sf}}</div>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {
+  @Input() val!: any;
+
+  add = function add(a, b) {
+    return a + b;
+  };
+  asfas = \\"asga\\";
+  subtract() {
+    return this.someCompute - this.someOtherVal;
+  }
+  someCompute = null;
+  someOtherVal = null;
+  sf = null;
+
+  ngOnInit() {
+    this.someCompute = this.add(1, 2);
+
+    this.someOtherVal = this.val;
+
+    this.sf = this.add(this.val, 34);
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/data/angular/state-init.raw.tsx b/packages/core/src/__tests__/data/angular/state-init.raw.tsx
new file mode 100644
index 0000000000..06b664ac1e
--- /dev/null
+++ b/packages/core/src/__tests__/data/angular/state-init.raw.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@builder.io/mitosis';
+
+export default function MyComponent(props) {
+  function add(a, b) {
+    return a + b;
+  }
+  const state = useStore({
+    asfas: 'asga',
+    subtract: () => {
+      return state.someCompute - state.someOtherVal;
+    },
+    someCompute: add(1, 2),
+    someOtherVal: props.val,
+    sf: add(props.val, 34),
+  });
+
+  return (
+    <div>
+      <div>{state.asfas}</div>
+      <div>{state.someCompute}</div>
+      <div>{state.someOtherVal}</div>
+      <div>{state.sf}</div>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 2ff17067c8..e357e26843 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -286,6 +286,7 @@ const ANGULAR_TESTS: Tests = {
     './data/angular/dynamic-component-with-event-args.raw.tsx',
   ),
   twoForsTrackBy: getRawFile('./data/angular/two-fors.raw.tsx'),
+  stateInit: getRawFile('./data/angular/state-init.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 631cb9f180..d3b438cf3c 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -685,6 +685,23 @@ const classPropertiesPlugin = () => ({
   },
 });
 
+// if any state "property" is trying to access state.* or props.*
+// then we need to move them to onInit where they can be accessed
+const transformState = (json: MitosisComponent) => {
+  Object.entries(json.state).forEach(([key, value]) => {
+    if (value?.type === 'property') {
+      if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
+        const code = stripStateAndPropsRefs(value.code, { replaceWith: 'this' });
+        json.state[key]!.code = 'null';
+        if (!json.hooks.onInit?.code) {
+          json.hooks.onInit = { code: '' };
+        }
+        json.hooks.onInit.code += `\nthis.${key} = ${code};\n`;
+      }
+    }
+  });
+};
+
 export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
   (userOptions = {}) =>
   ({ component: _component }) => {
@@ -868,6 +885,8 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       },
     );
 
+    transformState(json);
+
     const dataString = getStateObjectStringFromComponent(json, {
       format: 'class',
       valueMapper: processAngularCode({