From 430591e2c9e3cbf9a4ee44321948d87f8247431c Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:07:00 -0500
Subject: [PATCH 1/3] docs(refresher): update angular to standalone

---
 .../advanced/angular/example_component_ts.md  | 24 +++++++++++++++++++
 .../basic/angular/example_component_ts.md     |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 .../advanced/angular/example_component_ts.md  | 24 +++++++++++++++++++
 .../basic/angular/example_component_ts.md     |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 .../angular/example_component_ts.md           |  9 +++++++
 10 files changed, 120 insertions(+)

diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
index 9d1f3a5f199..87e14c3448d 100644
--- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```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';
@@ -8,6 +20,18 @@ import { ellipse } from 'ionicons/icons';
   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 = [
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v7/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {
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
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {
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
index a5ac7eaaa9a..c079bf9504f 100644
--- 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
@@ -1,10 +1,19 @@
 ```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) {
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
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
index 9d1f3a5f199..87e14c3448d 100644
--- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```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';
@@ -8,6 +20,18 @@ import { ellipse } from 'ionicons/icons';
   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 = [
diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v8/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {
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
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {
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
index a5ac7eaaa9a..c079bf9504f 100644
--- 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
@@ -1,10 +1,19 @@
 ```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) {
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
index 74304953d4e..6fd034c445a 100644
--- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
@@ -1,9 +1,18 @@
 ```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',
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   handleRefresh(event) {

From 03abac610ff79df55fb2a3f6778e4af6be06a983 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:14:35 -0500
Subject: [PATCH 2/3] docs(refresher): update angular to standalone

---
 static/usage/v7/refresher/basic/angular/example_component_ts.md  | 1 +
 .../v7/refresher/custom-content/angular/example_component_ts.md  | 1 +
 .../v7/refresher/pull-properties/angular/example_component_ts.md | 1 +
 static/usage/v8/refresher/basic/angular/example_component_ts.md  | 1 +
 .../v8/refresher/custom-content/angular/example_component_ts.md  | 1 +
 .../v8/refresher/pull-properties/angular/example_component_ts.md | 1 +
 6 files changed, 6 insertions(+)

diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v7/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v8/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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
index 6fd034c445a..c079bf9504f 100644
--- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
@@ -12,6 +12,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {

From a5f754b7e92aa267100b10d8d3b5c8cf0de0d365 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 26 Dec 2024 17:58:06 -0500
Subject: [PATCH 3/3] docs(refresher): update angular to standalone

---
 .../advanced/angular/example_component_html.md      |  4 +++-
 .../advanced/angular/example_component_ts.md        | 13 +++++++++----
 .../refresher/basic/angular/example_component_ts.md |  4 ++--
 .../custom-content/angular/example_component_ts.md  |  4 ++--
 .../angular/example_component_ts.md                 |  4 ++--
 .../pull-properties/angular/example_component_ts.md |  4 ++--
 .../advanced/angular/example_component_html.md      |  4 +++-
 .../advanced/angular/example_component_ts.md        | 13 +++++++++----
 .../refresher/basic/angular/example_component_ts.md |  4 ++--
 .../custom-content/angular/example_component_ts.md  |  4 ++--
 .../angular/example_component_ts.md                 |  4 ++--
 .../pull-properties/angular/example_component_ts.md |  4 ++--
 12 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/static/usage/v7/refresher/advanced/angular/example_component_html.md b/static/usage/v7/refresher/advanced/angular/example_component_html.md
index e724a1da71e..c2dc6ff3e9d 100644
--- 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
index 87e14c3448d..db6bd8d6099 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index e724a1da71e..c2dc6ff3e9d 100644
--- 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
index 87e14c3448d..db6bd8d6099 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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
index c079bf9504f..8edb4e4dc1f 100644
--- 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);
   }
 }