From f41aa1feea13eb1830597aa7d04947b7c321857a Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:07:00 -0500
Subject: [PATCH 1/3] docs(reorder): update angular to standalone

---
 static/usage/v7/reorder/basic/angular/example_component_ts.md   | 2 ++
 .../v7/reorder/custom-icon/angular/example_component_ts.md      | 2 ++
 .../custom-scroll-target/angular/example_component_ts.md        | 2 ++
 .../reorder/toggling-disabled/angular/example_component_ts.md   | 2 ++
 .../v7/reorder/updating-data/angular/example_component_ts.md    | 2 ++
 static/usage/v7/reorder/wrapper/angular/example_component_ts.md | 2 ++
 static/usage/v8/reorder/basic/angular/example_component_ts.md   | 2 ++
 .../v8/reorder/custom-icon/angular/example_component_ts.md      | 2 ++
 .../custom-scroll-target/angular/example_component_ts.md        | 2 ++
 .../reorder/toggling-disabled/angular/example_component_ts.md   | 2 ++
 .../v8/reorder/updating-data/angular/example_component_ts.md    | 2 ++
 static/usage/v8/reorder/wrapper/angular/example_component_ts.md | 2 ++
 12 files changed, 24 insertions(+)

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..e90b87cbc44 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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..ab77152370c 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,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
@@ -9,6 +10,7 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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..010dbf485e8 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,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
@@ -7,6 +8,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
   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..a4241b3d6fb 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e36..d9ac4cbc251 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
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..e90b87cbc44 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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..e90b87cbc44 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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..ab77152370c 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,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
@@ -9,6 +10,7 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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..010dbf485e8 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,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
@@ -7,6 +8,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
   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..a4241b3d6fb 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  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_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e36..d9ac4cbc251 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
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..e90b87cbc44 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,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
 
 import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {

From 302cd295a93b2edce67a61c852b3595ee20545d3 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:14:58 -0500
Subject: [PATCH 2/3] docs(reorder): update angular to standalone

---
 static/usage/v7/reorder/basic/angular/example_component_ts.md    | 1 +
 .../usage/v7/reorder/custom-icon/angular/example_component_ts.md | 1 +
 .../v7/reorder/toggling-disabled/angular/example_component_ts.md | 1 +
 .../v7/reorder/updating-data/angular/example_component_ts.md     | 1 +
 static/usage/v7/reorder/wrapper/angular/example_component_ts.md  | 1 +
 static/usage/v8/reorder/basic/angular/example_component_ts.md    | 1 +
 .../usage/v8/reorder/custom-icon/angular/example_component_ts.md | 1 +
 .../v8/reorder/toggling-disabled/angular/example_component_ts.md | 1 +
 .../v8/reorder/updating-data/angular/example_component_ts.md     | 1 +
 static/usage/v8/reorder/wrapper/angular/example_component_ts.md  | 1 +
 10 files changed, 10 insertions(+)

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 e90b87cbc44..ec7a1031c26 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 ab77152370c..b52590be96a 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
@@ -10,6 +10,7 @@ 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 {
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 a4241b3d6fb..4990fda4118 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
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 d9ac4cbc251..7918996b790 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
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 e90b87cbc44..ec7a1031c26 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 e90b87cbc44..ec7a1031c26 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 ab77152370c..b52590be96a 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
@@ -10,6 +10,7 @@ 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 {
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 a4241b3d6fb..4990fda4118 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
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 d9ac4cbc251..7918996b790 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
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
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 e90b87cbc44..ec7a1031c26 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { ItemReorderEventDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {

From 2033a20e767bf83b24cb15d3cfb5900f2b17dcb4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 26 Dec 2024 18:09:15 -0500
Subject: [PATCH 3/3] docs(reorder): update angular to standalone

---
 docs/api/reorder.md                               |  2 +-
 .../reorder/basic/angular/example_component_ts.md | 11 ++++++++---
 .../custom-icon/angular/example_component_ts.md   | 12 +++++++++---
 .../angular/example_component_ts.md               | 12 +++++++++---
 .../angular/example_component_ts.md               | 12 +++++++++---
 .../angular/example_component_html.md             |  4 +++-
 .../updating-data/angular/example_component_ts.md | 15 ++++++++-------
 .../wrapper/angular/example_component_ts.md       | 11 ++++++++---
 .../reorder/basic/angular/example_component_ts.md | 11 ++++++++---
 .../custom-icon/angular/example_component_ts.md   | 12 +++++++++---
 .../angular/example_component_ts.md               | 12 +++++++++---
 .../angular/example_component_ts.md               | 12 +++++++++---
 .../angular/example_component_html.md             |  4 +++-
 .../updating-data/angular/example_component_ts.md | 15 ++++++++-------
 .../wrapper/angular/example_component_ts.md       | 11 ++++++++---
 versioned_docs/version-v7/api/reorder.md          |  2 +-
 16 files changed, 110 insertions(+), 48 deletions(-)

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 ec7a1031c26..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 b52590be96a..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-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';
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 010dbf485e8..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 4990fda4118..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 7918996b790..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
@@ -26,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 ec7a1031c26..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 ec7a1031c26..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 b52590be96a..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-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';
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 010dbf485e8..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 4990fda4118..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,8 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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 7918996b790..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
@@ -26,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 ec7a1031c26..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,8 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/angular/standalone';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
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';