diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index dba18927800..5a8d29dc832 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
 
 <Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
index 55469ab3c5a..962be4924aa 100644
--- a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
index 390ba6b75f1..7c35aba2138 100644
--- a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
@@ -1,15 +1,24 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  InfiniteScrollCustomEvent,
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev) {
+  onIonInfinite(ev: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      (ev as InfiniteScrollCustomEvent).target.complete();
+      ev.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
index 60c02b86ea0..fb41f8761c7 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <div class="infinite-scroll-content">
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..e7a9c133f12 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,15 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
index 2e23e359257..d73da989437 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..e670c8c3220 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,23 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
index 55469ab3c5a..962be4924aa 100644
--- a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
index 390ba6b75f1..7c35aba2138 100644
--- a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
@@ -1,15 +1,24 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  InfiniteScrollCustomEvent,
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev) {
+  onIonInfinite(ev: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      (ev as InfiniteScrollCustomEvent).target.complete();
+      ev.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
index 60c02b86ea0..fb41f8761c7 100644
--- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <div class="infinite-scroll-content">
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..e7a9c133f12 100644
--- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,15 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
index 2e23e359257..d73da989437 100644
--- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..e670c8c3220 100644
--- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,23 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/versioned_docs/version-v7/api/infinite-scroll.md b/versioned_docs/version-v7/api/infinite-scroll.md
index 81462fe6de0..4b33dda184e 100644
--- a/versioned_docs/version-v7/api/infinite-scroll.md
+++ b/versioned_docs/version-v7/api/infinite-scroll.md
@@ -23,6 +23,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
 
 <Basic />