diff --git a/.changeset/witty-monkeys-dance.md b/.changeset/witty-monkeys-dance.md
new file mode 100644
index 0000000000..3e362ddf7e
--- /dev/null
+++ b/.changeset/witty-monkeys-dance.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Feat: `trackBy` for angular (can be used when the child used inside <For> has a `key` attribute in mitosis)
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 05cc4b4398..af632afd01 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -1120,7 +1120,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -1407,6 +1407,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -2045,7 +2048,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -2101,6 +2106,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -4104,7 +4112,9 @@ import RenderRepeatedBlock from \\"./render-repeated-block.lite\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -4323,6 +4333,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -4642,7 +4661,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -4661,6 +4682,10 @@ import { Component, Input } from \\"@angular/core\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -5050,6 +5075,51 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6524,7 +6594,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -6818,6 +6888,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -7552,7 +7625,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -7608,6 +7683,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -9783,7 +9861,9 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -10002,6 +10082,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -10350,7 +10439,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -10369,6 +10460,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -10775,6 +10870,51 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeDependency 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 43a3d72d15..cf7bc32ccf 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -1140,7 +1140,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -1427,6 +1427,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -2079,7 +2082,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -2135,6 +2140,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -4185,7 +4193,9 @@ import RenderRepeatedBlockModule from \\"./render-repeated-block.lite/angular\\"
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -4404,6 +4414,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -4730,7 +4749,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -4749,6 +4770,10 @@ import { Component, Input } from \\"@angular/core\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -5149,6 +5174,52 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6650,7 +6721,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -6944,6 +7015,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -7692,7 +7766,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -7748,6 +7824,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -9972,7 +10051,9 @@ import { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -10191,6 +10272,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -10546,7 +10636,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -10565,6 +10657,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -10982,6 +11078,52 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeDependency 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 1b02771a79..ef3ea6d7fe 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -1161,7 +1161,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -1449,6 +1449,9 @@ export default class FormComponent {
     }
   }
   node_1_div = null;
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 
   ngOnInit() {
     this.node_1_div = JSON.stringify(this.responseData, null, 2);
@@ -2131,7 +2134,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
         ></textarea>
         <button class=\\"button\\" (click)=\\"node_0_button($event)\\">Submit</button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -2191,6 +2196,9 @@ export default class SmileReviews {
     event.preventDefault();
     this.showReviewPrompt = false;
   };
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -4282,7 +4290,9 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"node_1_Show\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -4503,7 +4513,16 @@ export default class RenderBlock {
   node_1_Show = null;
   node_2_Show = null;
   mergedInputs_3ka5tf = null;
+  trackByData0(index, data) {
+    return index;
+  }
   mergedInputs_r2fkt2 = null;
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -4841,7 +4860,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -4860,6 +4881,10 @@ import { Component, Input } from \\"@angular/core\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -5252,6 +5277,51 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@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 > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6767,7 +6837,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -7062,6 +7132,9 @@ export default class FormComponent {
     }
   }
   node_1_div = null;
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 
   ngOnInit() {
     this.node_1_div = JSON.stringify(this.responseData, null, 2);
@@ -7840,7 +7913,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
         ></textarea>
         <button class=\\"button\\" (click)=\\"node_0_button($event)\\">Submit</button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -7900,6 +7975,9 @@ export default class SmileReviews {
     event.preventDefault();
     this.showReviewPrompt = false;
   };
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -10162,7 +10240,9 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"node_1_Show\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -10383,7 +10463,16 @@ export default class RenderBlock {
   node_1_Show = null;
   node_2_Show = null;
   mergedInputs_3ka5tf = null;
+  trackByData0(index, data) {
+    return index;
+  }
   mergedInputs_r2fkt2 = null;
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -10750,7 +10839,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -10769,6 +10860,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -11178,6 +11273,51 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@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 > typeDependency 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 0595d3d965..ecb90d02bc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -996,7 +996,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -1280,6 +1280,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -1831,7 +1834,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -1884,6 +1889,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -3587,7 +3595,9 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -3799,6 +3809,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -4078,7 +4097,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -4090,6 +4111,10 @@ import { Component, Input } from \\"@angular/core\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -4419,6 +4444,44 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -5732,7 +5795,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -6023,6 +6086,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -6670,7 +6736,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -6723,6 +6791,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -8597,7 +8668,9 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -8809,6 +8882,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -9117,7 +9199,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -9129,6 +9213,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -9475,6 +9563,44 @@ export class SvgComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > typeDependency 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 65d272bc9a..f7fd00ca9b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -2069,7 +2069,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -2356,6 +2356,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -2392,7 +2395,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -2681,6 +2684,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 "
 `;
@@ -3818,7 +3824,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -3874,6 +3882,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -3927,7 +3938,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -3985,6 +3998,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -7588,7 +7604,9 @@ import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -7807,6 +7825,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -7874,7 +7901,9 @@ import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -8095,6 +8124,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef) {}
 
@@ -8641,7 +8679,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -8660,6 +8700,10 @@ import { Component, Input } from \\"@angular/core\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -8679,7 +8723,9 @@ import { CommonModule } from \\"@angular/common\\";
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -8700,6 +8746,10 @@ import { CommonModule } from \\"@angular/common\\";
 export default class NestedShow {
   @Input() conditionA;
   @Input() items;
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 "
 `;
@@ -9388,6 +9438,89 @@ export default class SvgComponent {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > twoForsTrackBy 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12092,7 +12225,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -12386,6 +12519,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 
 @NgModule({
@@ -12446,7 +12582,7 @@ import {
     >
       <ng-container *ngIf=\\"builderBlock && builderBlock.children\\">
         <ng-container
-          *ngFor=\\"let block of builderBlock?.children; let index = index\\"
+          *ngFor=\\"let block of builderBlock?.children; let index = index; trackBy: trackByBlock0\\"
         >
           <BuilderBlockComponent
             [block]=\\"block\\"
@@ -12742,6 +12878,9 @@ export default class FormComponent {
       );
     }
   }
+  trackByBlock0(index, block) {
+    return block.id;
+  }
 }
 "
 `;
@@ -14066,7 +14205,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -14122,6 +14263,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -14180,7 +14324,9 @@ import { kebabCase, snakeCase } from \\"lodash\\";
           Submit
         </button>
       </ng-container>
-      <ng-container *ngFor=\\"let review of reviews; let index = index\\">
+      <ng-container
+        *ngFor=\\"let review of reviews; let index = index; trackBy: trackByReview0\\"
+      >
         <div class=\\"review\\">
           <img class=\\"img\\" [attr.src]=\\"review.avatar\\" />
           <div [class]=\\"showReviewPrompt ? 'bg-primary' : 'bg-secondary'\\">
@@ -14238,6 +14384,9 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
+  trackByReview0(index, review) {
+    return review.id;
+  }
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
@@ -18171,7 +18320,9 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -18390,6 +18541,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -18470,7 +18630,9 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!isEmptyHtmlElement(tag) && repeatItemData\\">
-        <ng-container *ngFor=\\"let data of repeatItemData; let index = index\\">
+        <ng-container
+          *ngFor=\\"let data of repeatItemData; let index = index; trackBy: trackByData0\\"
+        >
           <render-repeated-block
             [repeatContext]=\\"data.context\\"
             [block]=\\"data.block\\"
@@ -18691,6 +18853,15 @@ export default class RenderBlock {
       return RenderComponent;
     }
   }
+  trackByData0(index, data) {
+    return index;
+  }
+  trackByChild1(_, child) {
+    return \\"render-block-\\" + child.id;
+  }
+  trackByChild2(_, child) {
+    return \\"block-style-\\" + child.id;
+  }
 
   constructor(private vcRef: ViewContainerRef) {}
 
@@ -19290,7 +19461,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -19309,6 +19482,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 
 @NgModule({
@@ -19333,7 +19510,9 @@ interface Props {
   selector: \\"nested-show, NestedShow\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">
-      <ng-container *ngFor=\\"let item of items; let idx = index\\">
+      <ng-container
+        *ngFor=\\"let item of items; let idx = index; trackBy: trackByItem0\\"
+      >
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
@@ -19354,6 +19533,10 @@ interface Props {
 export default class NestedShow {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() items!: Props[\\"items\\"];
+
+  trackByItem0(idx, item) {
+    return idx;
+  }
 }
 "
 `;
@@ -20076,6 +20259,89 @@ export default class SvgComponent {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > twoForsTrackBy 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > twoForsTrackBy 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem0\\">
+        <div>{{item}}</div>
+      </ng-container>
+      <ng-container *ngFor=\\"let item of items; trackBy: trackByItem1\\">
+        <div>{{item}}</div>
+      </ng-container>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class MyComponent {
+  items = [1, 2, 3];
+  trackByItem0(_, item) {
+    return item;
+  }
+  trackByItem1(_, item) {
+    return item;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > typeDependency 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/data/angular/two-fors.raw.tsx b/packages/core/src/__tests__/data/angular/two-fors.raw.tsx
new file mode 100644
index 0000000000..672e2ed0bb
--- /dev/null
+++ b/packages/core/src/__tests__/data/angular/two-fors.raw.tsx
@@ -0,0 +1,12 @@
+import { For, useState } from '@builder.io/mitosis';
+
+export default function MyComponent() {
+  const [items] = useState([1, 2, 3]);
+
+  return (
+    <div>
+      <For each={items}>{(item) => <div key={item}>{item}</div>}</For>
+      <For each={items}>{(item) => <div key={item}>{item}</div>}</For>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index b13a1fe414..2ff17067c8 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -285,6 +285,7 @@ const ANGULAR_TESTS: Tests = {
   dynamicComponentWithEventArg: getRawFile(
     './data/angular/dynamic-component-with-event-args.raw.tsx',
   ),
+  twoForsTrackBy: getRawFile('./data/angular/two-fors.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 00ff975b4d..631cb9f180 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -340,9 +340,30 @@ export const blockToAngular = ({
 
   if (checkIsForNode(json)) {
     const indexName = json.scope.indexName;
-    str += `<ng-container *ngFor="let ${json.scope.forName} of ${json.bindings.each?.code}${
-      indexName ? `; let ${indexName} = index` : ''
-    }">`;
+    const forName = json.scope.forName;
+
+    // Check if "key" is present for the first child of the for loop
+    if (json.children[0].bindings && json.children[0].bindings.key?.code) {
+      const fnIndex = (root.meta?._trackByForIndex as number) || 0;
+      const trackByFnName = `trackBy${
+        forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''
+      }${fnIndex}`;
+      root.meta._trackByForIndex = fnIndex + 1;
+      let code = json.children[0].bindings.key?.code;
+
+      root.state[trackByFnName] = {
+        code: `${trackByFnName}(${indexName ?? '_'}, ${forName}) { return ${code}; }`,
+        type: 'method',
+      };
+
+      str += `<ng-container *ngFor="let ${forName} of ${json.bindings.each?.code}${
+        indexName ? `; let ${indexName} = index` : ''
+      }; trackBy: ${trackByFnName}">`;
+    } else {
+      str += `<ng-container *ngFor="let ${forName} of ${json.bindings.each?.code}${
+        indexName ? `; let ${indexName} = index` : ''
+      }">`;
+    }
     str += json.children
       .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
       .join('\n');
@@ -529,6 +550,7 @@ const handleBindings = (
 
     if (forName) {
       if (item.name === 'For') continue;
+      if (key === 'key') continue;
 
       if (key.startsWith('on')) {
         const { arguments: cusArgs = ['event'] } = item.bindings[key]!;
@@ -837,6 +859,15 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
 
     stripMetaProperties(json);
 
+    const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(
+      json,
+      options,
+      {
+        childComponents,
+        nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
+      },
+    );
+
     const dataString = getStateObjectStringFromComponent(json, {
       format: 'class',
       valueMapper: processAngularCode({
@@ -848,15 +879,6 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       }),
     });
 
-    const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(
-      json,
-      options,
-      {
-        childComponents,
-        nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
-      },
-    );
-
     const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
     const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;