diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index dd9e3c0f4e2..ad07a4290ea 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -67,7 +67,7 @@ In order to sort the array upon completion of the reorder, the array should be p
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
 import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
index 7a5c867f791..a0e47f6b8b6 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
index 17e7d981c87..d4f3cc02ac9 100644
--- a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -1,7 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pizza } from 'ionicons/icons';
@@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
index 2cd3dd66740..4ebfef05c5a 100644
--- a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,12 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
index af0ff643b26..0914b726e0e 100644
--- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,11 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
index 2485a558246..873daed0e90 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -3,10 +3,12 @@
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
-    <ion-item *ngFor="let item of items; trackBy: trackItems">
+    @for (item of items; track item) {
+    <ion-item>
       <ion-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
+    }
   </ion-reorder-group>
 </ion-list>
 ```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e36..bab1ace34d0 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
@@ -23,9 +31,5 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
-
-  trackItems(index: number, itemNumber: number) {
-    return itemNumber;
-  }
 }
 ```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
index 7a5c867f791..a0e47f6b8b6 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index 7a5c867f791..a0e47f6b8b6 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index 17e7d981c87..d4f3cc02ac9 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -1,7 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pizza } from 'ionicons/icons';
@@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index 2cd3dd66740..4ebfef05c5a 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,12 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
index af0ff643b26..0914b726e0e 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,11 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
index 2485a558246..873daed0e90 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
@@ -3,10 +3,12 @@
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
-    <ion-item *ngFor="let item of items; trackBy: trackItems">
+    @for (item of items; track item) {
+    <ion-item>
       <ion-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
+    }
   </ion-reorder-group>
 </ion-list>
 ```
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e36..bab1ace34d0 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
@@ -23,9 +31,5 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
-
-  trackItems(index: number, itemNumber: number) {
-    return itemNumber;
-  }
 }
 ```
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
index 7a5c867f791..a0e47f6b8b6 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/versioned_docs/version-v7/api/reorder.md b/versioned_docs/version-v7/api/reorder.md
index 0fe49c8b7d5..8d5e7ef6aa6 100644
--- a/versioned_docs/version-v7/api/reorder.md
+++ b/versioned_docs/version-v7/api/reorder.md
@@ -65,7 +65,7 @@ In order to sort the array upon completion of the reorder, the array should be p
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
 import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';