docs(infinite-scroll): update angular to standalone (#3933)

ionic-team · Dec 30, 2024 · 04539ce · 04539ce
1 parent fd7ae38
commit 04539ce
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 35 deletions.
diff --git 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 />
+<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
@@ -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
@@ -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/...nfinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/...nfinite-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/.../infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/.../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/...ge/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/...ge/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/...sage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/...sage/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
@@ -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
@@ -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/...nfinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/...nfinite-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/.../infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/.../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/...ge/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/...ge/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/...sage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/...sage/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
@@ -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 />