docs(refresher): update angular to standalone

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

@@ -11,13 +11,15 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item [button]="true" *ngFor="let item of items">
+    @for (item of items; track item) {
+    <ion-item [button]="true">
       <ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
       <ion-label>
         <h2>{{ item.name }}</h2>
         <p>New message from {{ item.name }}</p>
       </ion-label>
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```

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

@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -44,7 +73,7 @@ export class ExampleComponent {
     return this.names[Math.floor(Math.random() * this.names.length)];
   }
 
-  addItems(count, unread = false) {
+  addItems(count: number, unread = false) {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,16 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -11,13 +11,15 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item [button]="true" *ngFor="let item of items">
+    @for (item of items; track item) {
+    <ion-item [button]="true">
       <ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
       <ion-label>
         <h2>{{ item.name }}</h2>
         <p>New message from {{ item.name }}</p>
       </ion-label>
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```

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

@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -44,7 +73,7 @@ export class ExampleComponent {
     return this.names[Math.floor(Math.random() * this.names.length)];
   }
 
-  addItems(count, unread = false) {
+  addItems(count: number, unread = false) {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }

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

@@ -1,16 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }