Skip to content

Commit 04539ce

Browse files
brandyscarneybrandyscarney
authored
docs(infinite-scroll): update angular to standalone (#3933)
1 parent fd7ae38 commit 04539ce

File tree

14 files changed

+85
-35
lines changed

14 files changed

+85
-35
lines changed

‎docs/api/infinite-scroll.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
2121

2222
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.
2323

24+
## Basic Usage
25+
2426
import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
2527

2628
<Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
118120
<CustomProps />
119121

120122
## Slots
121-
<Slots />
123+
<Slots />

‎static/usage/v7/infinite-scroll/basic/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
1214
<ion-infinite-scroll-content></ion-infinite-scroll-content>

‎static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import {
4+
InfiniteScrollCustomEvent,
5+
IonAvatar,
6+
IonContent,
7+
IonInfiniteScroll,
8+
IonInfiniteScrollContent,
9+
IonItem,
10+
IonLabel,
11+
IonList,
12+
} from '@ionic/angular/standalone';
513

614
@Component({
715
selector: 'app-example',
816
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
17+
styleUrls: ['example.component.css'],
18+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
1019
})
1120
export class ExampleComponent implements OnInit {
12-
items = [];
21+
items: string[] = [];
1322

1423
ngOnInit() {
1524
this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
2231
}
2332
}
2433

25-
onIonInfinite(ev) {
34+
onIonInfinite(ev: InfiniteScrollCustomEvent) {
2635
this.generateItems();
2736
setTimeout(() => {
28-
(ev as InfiniteScrollCustomEvent).target.complete();
37+
ev.target.complete();
2938
}, 500);
3039
}
3140
}

‎static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll>
1214
<div class="infinite-scroll-content">

‎static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
54

65
@Component({
76
selector: 'app-example',
87
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
8+
styleUrls: ['example.component.css'],
9+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
1010
})
1111
export class ExampleComponent implements OnInit {
12-
items = [];
12+
items: string[] = [];
1313

1414
ngOnInit() {
1515
for (let i = 1; i < 51; i++) {

‎static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll>
1214
<ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>

‎static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import {
4+
IonAvatar,
5+
IonContent,
6+
IonInfiniteScroll,
7+
IonInfiniteScrollContent,
8+
IonItem,
9+
IonLabel,
10+
IonList,
11+
} from '@ionic/angular/standalone';
512

613
@Component({
714
selector: 'app-example',
815
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
16+
styleUrls: ['example.component.css'],
17+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
1018
})
1119
export class ExampleComponent implements OnInit {
12-
items = [];
20+
items: string[] = [];
1321

1422
ngOnInit() {
1523
for (let i = 1; i < 51; i++) {

‎static/usage/v8/infinite-scroll/basic/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
1214
<ion-infinite-scroll-content></ion-infinite-scroll-content>

‎static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import {
4+
InfiniteScrollCustomEvent,
5+
IonAvatar,
6+
IonContent,
7+
IonInfiniteScroll,
8+
IonInfiniteScrollContent,
9+
IonItem,
10+
IonLabel,
11+
IonList,
12+
} from '@ionic/angular/standalone';
513

614
@Component({
715
selector: 'app-example',
816
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
17+
styleUrls: ['example.component.css'],
18+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
1019
})
1120
export class ExampleComponent implements OnInit {
12-
items = [];
21+
items: string[] = [];
1322

1423
ngOnInit() {
1524
this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
2231
}
2332
}
2433

25-
onIonInfinite(ev) {
34+
onIonInfinite(ev: InfiniteScrollCustomEvent) {
2635
this.generateItems();
2736
setTimeout(() => {
28-
(ev as InfiniteScrollCustomEvent).target.complete();
37+
ev.target.complete();
2938
}, 500);
3039
}
3140
}

‎static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll>
1214
<div class="infinite-scroll-content">

‎static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
54

65
@Component({
76
selector: 'app-example',
87
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
8+
styleUrls: ['example.component.css'],
9+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
1010
})
1111
export class ExampleComponent implements OnInit {
12-
items = [];
12+
items: string[] = [];
1313

1414
ngOnInit() {
1515
for (let i = 1; i < 51; i++) {

‎static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
```html
22
<ion-content>
33
<ion-list>
4-
<ion-item *ngFor="let item of items; let index">
4+
@for (item of items; track item; let index = $index) {
5+
<ion-item>
56
<ion-avatar slot="start">
67
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
78
</ion-avatar>
89
<ion-label>{{ item }}</ion-label>
910
</ion-item>
11+
}
1012
</ion-list>
1113
<ion-infinite-scroll>
1214
<ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>

‎static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
```tsx
22
import { Component, OnInit } from '@angular/core';
3-
4-
import { InfiniteScrollCustomEvent } from '@ionic/angular';
3+
import {
4+
IonAvatar,
5+
IonContent,
6+
IonInfiniteScroll,
7+
IonInfiniteScrollContent,
8+
IonItem,
9+
IonLabel,
10+
IonList,
11+
} from '@ionic/angular/standalone';
512

613
@Component({
714
selector: 'app-example',
815
templateUrl: 'example.component.html',
9-
styleUrls: ['example.component.scss'],
16+
styleUrls: ['example.component.css'],
17+
imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
1018
})
1119
export class ExampleComponent implements OnInit {
12-
items = [];
20+
items: string[] = [];
1321

1422
ngOnInit() {
1523
for (let i = 1; i < 51; i++) {

‎versioned_docs/version-v7/api/infinite-scroll.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
2323

2424
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.
2525

26+
## Basic Usage
27+
2628
import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
2729

2830
<Basic />

0 commit comments

Comments
 (0)