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

---
 .../buttons/angular/example_component_ts.md   |  2 ++
 .../icon/angular/example_component_html.md    |  4 +++
 .../icon/angular/example_component_ts.md      | 11 +++++++
 static/usage/v7/toast/icon/index.md           | 11 +++++--
 .../basic/angular/example_component_html.md   | 12 +++++++
 .../basic/angular/example_component_ts.md     | 11 +++++++
 static/usage/v7/toast/inline/basic/index.md   | 11 +++++--
 .../is-open/angular/example_component_ts.md   |  2 ++
 .../layout/angular/example_component_ts.md    |  2 ++
 .../angular/example_component_html.md         | 33 +++++++++++++++++++
 .../angular/example_component_ts.md           | 11 +++++++
 .../usage/v7/toast/position-anchor/index.md   | 11 +++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 17 ++++++++++
 .../angular/example_component_ts.md           | 11 +++++++
 static/usage/v7/toast/swipe-gesture/index.md  | 11 +++++--
 .../theming/angular/example_component_ts.md   |  2 ++
 .../buttons/angular/example_component_ts.md   |  2 ++
 .../icon/angular/example_component_html.md    |  4 +++
 .../icon/angular/example_component_ts.md      | 11 +++++++
 static/usage/v8/toast/icon/index.md           | 11 +++++--
 .../basic/angular/example_component_html.md   | 12 +++++++
 .../basic/angular/example_component_ts.md     | 11 +++++++
 static/usage/v8/toast/inline/basic/index.md   | 11 +++++--
 .../is-open/angular/example_component_ts.md   |  2 ++
 .../layout/angular/example_component_ts.md    |  2 ++
 .../angular/example_component_html.md         | 33 +++++++++++++++++++
 .../angular/example_component_ts.md           | 11 +++++++
 .../usage/v8/toast/position-anchor/index.md   | 11 +++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 17 ++++++++++
 .../angular/example_component_ts.md           | 11 +++++++
 static/usage/v8/toast/swipe-gesture/index.md  | 11 +++++--
 .../theming/angular/example_component_ts.md   |  2 ++
 34 files changed, 312 insertions(+), 16 deletions(-)
 create mode 100644 static/usage/v7/toast/icon/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/icon/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/inline/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/inline/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/position-anchor/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/position-anchor/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toast/swipe-gesture/angular/example_component_html.md
 create mode 100644 static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toast/icon/angular/example_component_html.md
 create mode 100644 static/usage/v8/toast/icon/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toast/inline/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/toast/inline/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toast/position-anchor/angular/example_component_html.md
 create mode 100644 static/usage/v8/toast/position-anchor/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/angular/example_component_html.md
 create mode 100644 static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md

diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
index 4e1c0e564b9..168049ed40a 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
diff --git a/static/usage/v7/toast/icon/angular/example_component_html.md b/static/usage/v7/toast/icon/angular/example_component_html.md
new file mode 100644
index 00000000000..819a72c342f
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
+```
diff --git a/static/usage/v7/toast/icon/angular/example_component_ts.md b/static/usage/v7/toast/icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..eb49cc6ecce
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
index aef5d5a8cc7..bdc7b842c3f 100644
--- a/static/usage/v7/toast/icon/index.md
+++ b/static/usage/v7/toast/icon/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/icon/demo.html"
 />
diff --git a/static/usage/v7/toast/inline/basic/angular/example_component_html.md b/static/usage/v7/toast/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..5756e5c7891
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-toast" expand="block">Open</ion-button>
+  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" [duration]="5000"></ion-toast>
+</ion-content>
+```
diff --git a/static/usage/v7/toast/inline/basic/angular/example_component_ts.md b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..25750404bf4
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md
index aa61cab896b..73f11ad2105 100644
--- a/static/usage/v7/toast/inline/basic/index.md
+++ b/static/usage/v7/toast/inline/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/inline/basic/demo.html"
   devicePreview
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
index 67fb0c7676c..f44bf8fa36a 100644
--- a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
   isToastOpen = false;
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
index 89c39c33323..7aeaf585528 100644
--- a/static/usage/v7/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   toastButtons = [
diff --git a/static/usage/v7/toast/position-anchor/angular/example_component_html.md b/static/usage/v7/toast/position-anchor/angular/example_component_html.md
new file mode 100644
index 00000000000..f27b09cf057
--- /dev/null
+++ b/static/usage/v7/toast/position-anchor/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+<ion-header id="header">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-button id="headerAnchor">Anchor to Header</ion-button>
+  <ion-button id="footerAnchor">Anchor to Footer</ion-button>
+
+  <ion-toast
+    trigger="headerAnchor"
+    position="top"
+    positionAnchor="header"
+    message="Hello World!"
+    duration="2000"
+  ></ion-toast>
+  <ion-toast
+    trigger="footerAnchor"
+    position="bottom"
+    positionAnchor="footer"
+    message="Hello World!"
+    duration="2000"
+  ></ion-toast>
+</ion-content>
+
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/toast/position-anchor/angular/example_component_ts.md b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
new file mode 100644
index 00000000000..8db4003f63f
--- /dev/null
+++ b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/position-anchor/index.md b/static/usage/v7/toast/position-anchor/index.md
index dfcf9edde77..45cf57993c4 100644
--- a/static/usage/v7/toast/position-anchor/index.md
+++ b/static/usage/v7/toast/position-anchor/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/position-anchor/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
index db133a99f1e..f22ce6d7e81 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
 import { ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v7/toast/swipe-gesture/angular/example_component_html.md b/static/usage/v7/toast/swipe-gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..146007d0391
--- /dev/null
+++ b/static/usage/v7/toast/swipe-gesture/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-content class="ion-padding">
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast
+    message="This toast can be swiped to dismiss"
+    trigger="open-toast"
+    swipeGesture="vertical"
+    position="bottom"
+    positionAnchor="footer"
+  ></ion-toast>
+</ion-content>
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..0104a6a1c81
--- /dev/null
+++ b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/swipe-gesture/index.md b/static/usage/v7/toast/swipe-gesture/index.md
index 59e7afcab70..492e62b23b4 100644
--- a/static/usage/v7/toast/swipe-gesture/index.md
+++ b/static/usage/v7/toast/swipe-gesture/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/swipe-gesture/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
index 361391ca546..32182783dd2 100644
--- a/static/usage/v7/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
diff --git a/static/usage/v8/toast/buttons/angular/example_component_ts.md b/static/usage/v8/toast/buttons/angular/example_component_ts.md
index 4e1c0e564b9..168049ed40a 100644
--- a/static/usage/v8/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toast/buttons/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
diff --git a/static/usage/v8/toast/icon/angular/example_component_html.md b/static/usage/v8/toast/icon/angular/example_component_html.md
new file mode 100644
index 00000000000..819a72c342f
--- /dev/null
+++ b/static/usage/v8/toast/icon/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button id="open-toast">Open Toast</ion-button>
+<ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
+```
diff --git a/static/usage/v8/toast/icon/angular/example_component_ts.md b/static/usage/v8/toast/icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..eb49cc6ecce
--- /dev/null
+++ b/static/usage/v8/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/icon/index.md b/static/usage/v8/toast/icon/index.md
index b69dc7e19e1..bca7b49d439 100644
--- a/static/usage/v8/toast/icon/index.md
+++ b/static/usage/v8/toast/icon/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/icon/demo.html"
 />
diff --git a/static/usage/v8/toast/inline/basic/angular/example_component_html.md b/static/usage/v8/toast/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..5756e5c7891
--- /dev/null
+++ b/static/usage/v8/toast/inline/basic/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-toast" expand="block">Open</ion-button>
+  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
+  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" [duration]="5000"></ion-toast>
+</ion-content>
+```
diff --git a/static/usage/v8/toast/inline/basic/angular/example_component_ts.md b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..25750404bf4
--- /dev/null
+++ b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/inline/basic/index.md b/static/usage/v8/toast/inline/basic/index.md
index c256cb1c739..fa9937e1854 100644
--- a/static/usage/v8/toast/inline/basic/index.md
+++ b/static/usage/v8/toast/inline/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/inline/basic/demo.html"
   devicePreview
diff --git a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
index 67fb0c7676c..f44bf8fa36a 100644
--- a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
   isToastOpen = false;
diff --git a/static/usage/v8/toast/layout/angular/example_component_ts.md b/static/usage/v8/toast/layout/angular/example_component_ts.md
index 89c39c33323..7aeaf585528 100644
--- a/static/usage/v8/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v8/toast/layout/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   toastButtons = [
diff --git a/static/usage/v8/toast/position-anchor/angular/example_component_html.md b/static/usage/v8/toast/position-anchor/angular/example_component_html.md
new file mode 100644
index 00000000000..f27b09cf057
--- /dev/null
+++ b/static/usage/v8/toast/position-anchor/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+<ion-header id="header">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-button id="headerAnchor">Anchor to Header</ion-button>
+  <ion-button id="footerAnchor">Anchor to Footer</ion-button>
+
+  <ion-toast
+    trigger="headerAnchor"
+    position="top"
+    positionAnchor="header"
+    message="Hello World!"
+    duration="2000"
+  ></ion-toast>
+  <ion-toast
+    trigger="footerAnchor"
+    position="bottom"
+    positionAnchor="footer"
+    message="Hello World!"
+    duration="2000"
+  ></ion-toast>
+</ion-content>
+
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v8/toast/position-anchor/angular/example_component_ts.md b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
new file mode 100644
index 00000000000..8db4003f63f
--- /dev/null
+++ b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/position-anchor/index.md b/static/usage/v8/toast/position-anchor/index.md
index 2791a77e442..bd1f2aa9ed0 100644
--- a/static/usage/v8/toast/position-anchor/index.md
+++ b/static/usage/v8/toast/position-anchor/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/position-anchor/demo.html"
   devicePreview={true}
diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
index db133a99f1e..f22ce6d7e81 100644
--- a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
 import { ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v8/toast/swipe-gesture/angular/example_component_html.md b/static/usage/v8/toast/swipe-gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..146007d0391
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-content class="ion-padding">
+  <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-toast
+    message="This toast can be swiped to dismiss"
+    trigger="open-toast"
+    swipeGesture="vertical"
+    position="bottom"
+    positionAnchor="footer"
+  ></ion-toast>
+</ion-content>
+<ion-footer id="footer">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..0104a6a1c81
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/swipe-gesture/index.md b/static/usage/v8/toast/swipe-gesture/index.md
index dfb56a081b9..f1b1c788543 100644
--- a/static/usage/v8/toast/swipe-gesture/index.md
+++ b/static/usage/v8/toast/swipe-gesture/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/swipe-gesture/demo.html"
   devicePreview={true}
diff --git a/static/usage/v8/toast/theming/angular/example_component_ts.md b/static/usage/v8/toast/theming/angular/example_component_ts.md
index 361391ca546..32182783dd2 100644
--- a/static/usage/v8/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v8/toast/theming/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [

From e67bb6d1b3ce3bf62cb0424e199a89c011e8bfb2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:22:16 -0500
Subject: [PATCH 2/4] docs(toast): update angular to standalone

---
 static/usage/v7/toast/buttons/angular/example_component_ts.md    | 1 +
 static/usage/v7/toast/icon/angular/example_component_ts.md       | 1 +
 .../usage/v7/toast/inline/basic/angular/example_component_ts.md  | 1 +
 .../v7/toast/inline/is-open/angular/example_component_ts.md      | 1 +
 static/usage/v7/toast/layout/angular/example_component_ts.md     | 1 +
 .../v7/toast/position-anchor/angular/example_component_ts.md     | 1 +
 .../toast/presenting/controller/angular/example_component_ts.md  | 1 +
 .../usage/v7/toast/swipe-gesture/angular/example_component_ts.md | 1 +
 static/usage/v7/toast/theming/angular/example_component_ts.md    | 1 +
 static/usage/v8/toast/buttons/angular/example_component_ts.md    | 1 +
 static/usage/v8/toast/icon/angular/example_component_ts.md       | 1 +
 .../usage/v8/toast/inline/basic/angular/example_component_ts.md  | 1 +
 .../v8/toast/inline/is-open/angular/example_component_ts.md      | 1 +
 static/usage/v8/toast/layout/angular/example_component_ts.md     | 1 +
 .../v8/toast/position-anchor/angular/example_component_ts.md     | 1 +
 .../toast/presenting/controller/angular/example_component_ts.md  | 1 +
 .../usage/v8/toast/swipe-gesture/angular/example_component_ts.md | 1 +
 static/usage/v8/toast/theming/angular/example_component_ts.md    | 1 +
 18 files changed, 18 insertions(+)

diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
index 168049ed40a..43d33e2cc2d 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/toast/icon/angular/example_component_ts.md b/static/usage/v7/toast/icon/angular/example_component_ts.md
index eb49cc6ecce..3e028d368c4 100644
--- a/static/usage/v7/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v7/toast/icon/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toast/inline/basic/angular/example_component_ts.md b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
index 25750404bf4..4e602aa6713 100644
--- a/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
index f44bf8fa36a..55a00eb1351 100644
--- a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
index 7aeaf585528..c3ad043e175 100644
--- a/static/usage/v7/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/toast/position-anchor/angular/example_component_ts.md b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
index 8db4003f63f..3f5a4a34040 100644
--- a/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
+++ b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToo
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
index f22ce6d7e81..f3d2d0b04ec 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -6,6 +6,7 @@ import { ToastController } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
index 0104a6a1c81..ef2f87437f4 100644
--- a/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
+++ b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
index 32182783dd2..b68a9831094 100644
--- a/static/usage/v7/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/toast/buttons/angular/example_component_ts.md b/static/usage/v8/toast/buttons/angular/example_component_ts.md
index 168049ed40a..43d33e2cc2d 100644
--- a/static/usage/v8/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toast/buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/toast/icon/angular/example_component_ts.md b/static/usage/v8/toast/icon/angular/example_component_ts.md
index eb49cc6ecce..3e028d368c4 100644
--- a/static/usage/v8/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v8/toast/icon/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toast/inline/basic/angular/example_component_ts.md b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
index 25750404bf4..4e602aa6713 100644
--- a/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
index f44bf8fa36a..55a00eb1351 100644
--- a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/toast/layout/angular/example_component_ts.md b/static/usage/v8/toast/layout/angular/example_component_ts.md
index 7aeaf585528..c3ad043e175 100644
--- a/static/usage/v8/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v8/toast/layout/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/toast/position-anchor/angular/example_component_ts.md b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
index 8db4003f63f..3f5a4a34040 100644
--- a/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
+++ b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToo
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
index f22ce6d7e81..f3d2d0b04ec 100644
--- a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
@@ -6,6 +6,7 @@ import { ToastController } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
index 0104a6a1c81..ef2f87437f4 100644
--- a/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
+++ b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toast/theming/angular/example_component_ts.md b/static/usage/v8/toast/theming/angular/example_component_ts.md
index 32182783dd2..b68a9831094 100644
--- a/static/usage/v8/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v8/toast/theming/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonToast } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
 export class ExampleComponent {

From cc07b2238895aa4925abb2ca775e408448710d61 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 27 Dec 2024 15:01:57 -0500
Subject: [PATCH 3/4] docs(toast): update angular to standalone

---
 .../buttons/angular/example_component_ts.md   |  4 +--
 static/usage/v7/toast/icon/angular.md         |  4 ---
 .../icon/angular/example_component_ts.md      | 14 +++++++-
 static/usage/v7/toast/inline/basic/angular.md | 12 -------
 .../usage/v7/toast/position-anchor/angular.md | 33 -------------------
 .../usage/v7/toast/swipe-gesture/angular.md   | 17 ----------
 .../buttons/angular/example_component_ts.md   |  4 +--
 static/usage/v8/toast/icon/angular.md         |  4 ---
 .../icon/angular/example_component_ts.md      | 14 +++++++-
 static/usage/v8/toast/inline/basic/angular.md | 12 -------
 .../usage/v8/toast/position-anchor/angular.md | 33 -------------------
 .../usage/v8/toast/swipe-gesture/angular.md   | 17 ----------
 12 files changed, 30 insertions(+), 138 deletions(-)
 delete mode 100644 static/usage/v7/toast/icon/angular.md
 delete mode 100644 static/usage/v7/toast/inline/basic/angular.md
 delete mode 100644 static/usage/v7/toast/position-anchor/angular.md
 delete mode 100644 static/usage/v7/toast/swipe-gesture/angular.md
 delete mode 100644 static/usage/v8/toast/icon/angular.md
 delete mode 100644 static/usage/v8/toast/inline/basic/angular.md
 delete mode 100644 static/usage/v8/toast/position-anchor/angular.md
 delete mode 100644 static/usage/v8/toast/swipe-gesture/angular.md

diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
index 43d33e2cc2d..f9ead20f1e5 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -26,8 +26,8 @@ export class ExampleComponent {
     },
   ];
 
-  setRoleMessage(ev) {
-    const { role } = ev.detail;
+  setRoleMessage(event: CustomEvent) {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   }
 }
diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md
deleted file mode 100644
index 819a72c342f..00000000000
--- a/static/usage/v7/toast/icon/angular.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```html
-<ion-button id="open-toast">Open Toast</ion-button>
-<ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
-```
diff --git a/static/usage/v7/toast/icon/angular/example_component_ts.md b/static/usage/v7/toast/icon/angular/example_component_ts.md
index 3e028d368c4..159c8d6693e 100644
--- a/static/usage/v7/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v7/toast/icon/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonButton, IonToast } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ globe });
+  }
+}
 ```
diff --git a/static/usage/v7/toast/inline/basic/angular.md b/static/usage/v7/toast/inline/basic/angular.md
deleted file mode 100644
index 5756e5c7891..00000000000
--- a/static/usage/v7/toast/inline/basic/angular.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Inline Toast</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-toast" expand="block">Open</ion-button>
-  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
-  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" [duration]="5000"></ion-toast>
-</ion-content>
-```
diff --git a/static/usage/v7/toast/position-anchor/angular.md b/static/usage/v7/toast/position-anchor/angular.md
deleted file mode 100644
index f27b09cf057..00000000000
--- a/static/usage/v7/toast/position-anchor/angular.md
+++ /dev/null
@@ -1,33 +0,0 @@
-```html
-<ion-header id="header">
-  <ion-toolbar>
-    <ion-title>Header</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <ion-button id="headerAnchor">Anchor to Header</ion-button>
-  <ion-button id="footerAnchor">Anchor to Footer</ion-button>
-
-  <ion-toast
-    trigger="headerAnchor"
-    position="top"
-    positionAnchor="header"
-    message="Hello World!"
-    duration="2000"
-  ></ion-toast>
-  <ion-toast
-    trigger="footerAnchor"
-    position="bottom"
-    positionAnchor="footer"
-    message="Hello World!"
-    duration="2000"
-  ></ion-toast>
-</ion-content>
-
-<ion-footer id="footer">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
diff --git a/static/usage/v7/toast/swipe-gesture/angular.md b/static/usage/v7/toast/swipe-gesture/angular.md
deleted file mode 100644
index 146007d0391..00000000000
--- a/static/usage/v7/toast/swipe-gesture/angular.md
+++ /dev/null
@@ -1,17 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-button id="open-toast">Open Toast</ion-button>
-  <ion-toast
-    message="This toast can be swiped to dismiss"
-    trigger="open-toast"
-    swipeGesture="vertical"
-    position="bottom"
-    positionAnchor="footer"
-  ></ion-toast>
-</ion-content>
-<ion-footer id="footer">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
diff --git a/static/usage/v8/toast/buttons/angular/example_component_ts.md b/static/usage/v8/toast/buttons/angular/example_component_ts.md
index 43d33e2cc2d..f9ead20f1e5 100644
--- a/static/usage/v8/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toast/buttons/angular/example_component_ts.md
@@ -26,8 +26,8 @@ export class ExampleComponent {
     },
   ];
 
-  setRoleMessage(ev) {
-    const { role } = ev.detail;
+  setRoleMessage(event: CustomEvent) {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   }
 }
diff --git a/static/usage/v8/toast/icon/angular.md b/static/usage/v8/toast/icon/angular.md
deleted file mode 100644
index 819a72c342f..00000000000
--- a/static/usage/v8/toast/icon/angular.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```html
-<ion-button id="open-toast">Open Toast</ion-button>
-<ion-toast trigger="open-toast" message="Hello World!" [duration]="3000" icon="globe"></ion-toast>
-```
diff --git a/static/usage/v8/toast/icon/angular/example_component_ts.md b/static/usage/v8/toast/icon/angular/example_component_ts.md
index 3e028d368c4..159c8d6693e 100644
--- a/static/usage/v8/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v8/toast/icon/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonButton, IonToast } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonButton, IonToast],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ globe });
+  }
+}
 ```
diff --git a/static/usage/v8/toast/inline/basic/angular.md b/static/usage/v8/toast/inline/basic/angular.md
deleted file mode 100644
index 5756e5c7891..00000000000
--- a/static/usage/v8/toast/inline/basic/angular.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Inline Toast</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-toast" expand="block">Open</ion-button>
-  <p id="message">This toast example uses triggers to automatically open a toast when the button is clicked.</p>
-  <ion-toast trigger="open-toast" message="This toast will disappear after 5 seconds" [duration]="5000"></ion-toast>
-</ion-content>
-```
diff --git a/static/usage/v8/toast/position-anchor/angular.md b/static/usage/v8/toast/position-anchor/angular.md
deleted file mode 100644
index f27b09cf057..00000000000
--- a/static/usage/v8/toast/position-anchor/angular.md
+++ /dev/null
@@ -1,33 +0,0 @@
-```html
-<ion-header id="header">
-  <ion-toolbar>
-    <ion-title>Header</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <ion-button id="headerAnchor">Anchor to Header</ion-button>
-  <ion-button id="footerAnchor">Anchor to Footer</ion-button>
-
-  <ion-toast
-    trigger="headerAnchor"
-    position="top"
-    positionAnchor="header"
-    message="Hello World!"
-    duration="2000"
-  ></ion-toast>
-  <ion-toast
-    trigger="footerAnchor"
-    position="bottom"
-    positionAnchor="footer"
-    message="Hello World!"
-    duration="2000"
-  ></ion-toast>
-</ion-content>
-
-<ion-footer id="footer">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
diff --git a/static/usage/v8/toast/swipe-gesture/angular.md b/static/usage/v8/toast/swipe-gesture/angular.md
deleted file mode 100644
index 146007d0391..00000000000
--- a/static/usage/v8/toast/swipe-gesture/angular.md
+++ /dev/null
@@ -1,17 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <ion-button id="open-toast">Open Toast</ion-button>
-  <ion-toast
-    message="This toast can be swiped to dismiss"
-    trigger="open-toast"
-    swipeGesture="vertical"
-    position="bottom"
-    positionAnchor="footer"
-  ></ion-toast>
-</ion-content>
-<ion-footer id="footer">
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```

From 1fb1df9e076dde5958304cd8ecda073ef8b6ef8b Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 27 Dec 2024 16:00:04 -0500
Subject: [PATCH 4/4] docs(toast): update angular to standalone

---
 .../presenting/controller/angular/example_component_ts.md      | 3 +--
 .../presenting/controller/angular/example_component_ts.md      | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
index f3d2d0b04ec..a6c9eb4ead4 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -1,7 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton } from '@ionic/angular/standalone';
-import { ToastController } from '@ionic/angular';
+import { IonButton, ToastController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
index f3d2d0b04ec..a6c9eb4ead4 100644
--- a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
@@ -1,7 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton } from '@ionic/angular/standalone';
-import { ToastController } from '@ionic/angular';
+import { IonButton, ToastController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',