docs(refresher): update angular to standalone

brandyscarney · brandyscarney · commit a5f754b7e92a · 2024-12-26T17:58:06.000-05:00
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_html.md b/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>
 ```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -16,6 +16,11 @@ import {
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -49,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -68,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(),
@@ -77,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);
   }
 }
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_html.md b/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>
 ```
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
@@ -16,6 +16,11 @@ import {
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -49,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -68,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(),
@@ -77,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);
   }
 }
diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }
diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
@@ -16,10 +16,10 @@ import {
   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);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -16,10 +16,10 @@ import {`
`16`	`16`	`imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],`
`17`	`17`	`})`
`18`	`18`	`export class ExampleComponent {`
`19`		`- handleRefresh(event) {`
	`19`	`+ handleRefresh(event: CustomEvent) {`
`20`	`20`	`setTimeout(() => {`
`21`	`21`	`// Any calls to load data go here`
`22`		`- event.target.complete();`
	`22`	`+ (event.target as HTMLIonRefresherElement).complete();`
`23`	`23`	`}, 2000);`
`24`	`24`	`}`
`25`	`25`	`}`