Skip to content

Commit 54df85e

Browse files
brandyscarneybrandyscarney
authored
docs(refresher): update angular to standalone (#3956)
1 parent 1d8bc70 commit 54df85e

File tree

12 files changed

+166
-26
lines changed

12 files changed

+166
-26
lines changed

‎static/usage/v7/refresher/advanced/angular/example_component_html.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@
1111
</ion-refresher>
1212

1313
<ion-list>
14-
<ion-item [button]="true" *ngFor="let item of items">
14+
@for (item of items; track item) {
15+
<ion-item [button]="true">
1516
<ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
1617
<ion-label>
1718
<h2>{{ item.name }}</h2>
1819
<p>New message from {{ item.name }}</p>
1920
</ion-label>
2021
</ion-item>
22+
}
2123
</ion-list>
2224
</ion-content>
2325
```

‎static/usage/v7/refresher/advanced/angular/example_component_ts.md‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonIcon,
7+
IonItem,
8+
IonLabel,
9+
IonList,
10+
IonRefresher,
11+
IonRefresherContent,
12+
IonTitle,
13+
IonToolbar,
14+
} from '@ionic/angular/standalone';
315

416
import { addIcons } from 'ionicons';
517
import { ellipse } from 'ionicons/icons';
618

19+
interface Item {
20+
name: string;
21+
unread: boolean;
22+
}
23+
724
@Component({
825
selector: 'app-example',
926
templateUrl: 'example.component.html',
1027
styleUrls: ['./example.component.css'],
28+
imports: [
29+
IonContent,
30+
IonHeader,
31+
IonIcon,
32+
IonItem,
33+
IonLabel,
34+
IonList,
35+
IonRefresher,
36+
IonRefresherContent,
37+
IonTitle,
38+
IonToolbar,
39+
],
1140
})
1241
export class ExampleComponent {
1342
public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
2554
'Rachel Rabbit',
2655
'Ted Turtle',
2756
];
28-
public items = [];
57+
public items: Item[] = [];
2958

3059
constructor() {
3160
/**
@@ -44,7 +73,7 @@ export class ExampleComponent {
4473
return this.names[Math.floor(Math.random() * this.names.length)];
4574
}
4675

47-
addItems(count, unread = false) {
76+
addItems(count: number, unread = false) {
4877
for (let i = 0; i < count; i++) {
4978
this.items.unshift({
5079
name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
5382
}
5483
}
5584

56-
handleRefresh(event) {
85+
handleRefresh(event: CustomEvent) {
5786
setTimeout(() => {
5887
this.addItems(3, true);
59-
event.target.complete();
88+
(event.target as HTMLIonRefresherElement).complete();
6089
}, 2000);
6190
}
6291
}

‎static/usage/v7/refresher/basic/angular/example_component_ts.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
15+
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
717
})
818
export class ExampleComponent {
9-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1020
setTimeout(() => {
1121
// Any calls to load data go here
12-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1323
}, 2000);
1424
}
1525
}

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
15+
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
717
})
818
export class ExampleComponent {
9-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1020
setTimeout(() => {
1121
// Any calls to load data go here
12-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1323
}, 2000);
1424
}
1525
}

‎static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
715
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
817
})
918
export class ExampleComponent {
10-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1120
setTimeout(() => {
1221
// Any calls to load data go here
13-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1423
}, 2000);
1524
}
1625
}

‎static/usage/v7/refresher/pull-properties/angular/example_component_ts.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
15+
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
717
})
818
export class ExampleComponent {
9-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1020
setTimeout(() => {
1121
// Any calls to load data go here
12-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1323
}, 2000);
1424
}
1525
}

‎static/usage/v8/refresher/advanced/angular/example_component_html.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@
1111
</ion-refresher>
1212

1313
<ion-list>
14-
<ion-item [button]="true" *ngFor="let item of items">
14+
@for (item of items; track item) {
15+
<ion-item [button]="true">
1516
<ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
1617
<ion-label>
1718
<h2>{{ item.name }}</h2>
1819
<p>New message from {{ item.name }}</p>
1920
</ion-label>
2021
</ion-item>
22+
}
2123
</ion-list>
2224
</ion-content>
2325
```

‎static/usage/v8/refresher/advanced/angular/example_component_ts.md‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonIcon,
7+
IonItem,
8+
IonLabel,
9+
IonList,
10+
IonRefresher,
11+
IonRefresherContent,
12+
IonTitle,
13+
IonToolbar,
14+
} from '@ionic/angular/standalone';
315

416
import { addIcons } from 'ionicons';
517
import { ellipse } from 'ionicons/icons';
618

19+
interface Item {
20+
name: string;
21+
unread: boolean;
22+
}
23+
724
@Component({
825
selector: 'app-example',
926
templateUrl: 'example.component.html',
1027
styleUrls: ['./example.component.css'],
28+
imports: [
29+
IonContent,
30+
IonHeader,
31+
IonIcon,
32+
IonItem,
33+
IonLabel,
34+
IonList,
35+
IonRefresher,
36+
IonRefresherContent,
37+
IonTitle,
38+
IonToolbar,
39+
],
1140
})
1241
export class ExampleComponent {
1342
public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
2554
'Rachel Rabbit',
2655
'Ted Turtle',
2756
];
28-
public items = [];
57+
public items: Item[] = [];
2958

3059
constructor() {
3160
/**
@@ -44,7 +73,7 @@ export class ExampleComponent {
4473
return this.names[Math.floor(Math.random() * this.names.length)];
4574
}
4675

47-
addItems(count, unread = false) {
76+
addItems(count: number, unread = false) {
4877
for (let i = 0; i < count; i++) {
4978
this.items.unshift({
5079
name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
5382
}
5483
}
5584

56-
handleRefresh(event) {
85+
handleRefresh(event: CustomEvent) {
5786
setTimeout(() => {
5887
this.addItems(3, true);
59-
event.target.complete();
88+
(event.target as HTMLIonRefresherElement).complete();
6089
}, 2000);
6190
}
6291
}

‎static/usage/v8/refresher/basic/angular/example_component_ts.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
15+
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
717
})
818
export class ExampleComponent {
9-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1020
setTimeout(() => {
1121
// Any calls to load data go here
12-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1323
}, 2000);
1424
}
1525
}

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonRefresher,
7+
IonRefresherContent,
8+
IonTitle,
9+
IonToolbar,
10+
} from '@ionic/angular/standalone';
311

412
@Component({
513
selector: 'app-example',
614
templateUrl: 'example.component.html',
15+
styleUrls: ['example.component.css'],
16+
imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
717
})
818
export class ExampleComponent {
9-
handleRefresh(event) {
19+
handleRefresh(event: CustomEvent) {
1020
setTimeout(() => {
1121
// Any calls to load data go here
12-
event.target.complete();
22+
(event.target as HTMLIonRefresherElement).complete();
1323
}, 2000);
1424
}
1525
}

0 commit comments

Comments
 (0)