From 87f303fff5ebfd6c3abd3e2282160a4758a614b8 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/3] docs(toggle): update angular to standalone

---
 .../angular/example_component_html.md         |  4 ++++
 .../alignment/angular/example_component_ts.md | 11 ++++++++++
 static/usage/v7/toggle/alignment/index.md     | 11 ++++++++--
 .../basic/angular/example_component_html.md   |  6 ++++++
 .../basic/angular/example_component_ts.md     | 11 ++++++++++
 static/usage/v7/toggle/basic/index.md         | 20 +++++++++++++++++--
 .../justify/angular/example_component_html.md | 13 ++++++++++++
 .../justify/angular/example_component_ts.md   | 11 ++++++++++
 static/usage/v7/toggle/justify/index.md       | 20 +++++++++++++++++--
 .../angular/example_component_html.md         |  6 ++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v7/toggle/label-placement/index.md  | 16 +++++++++++++--
 .../list/angular/example_component_html.md    | 13 ++++++++++++
 .../list/angular/example_component_ts.md      | 11 ++++++++++
 static/usage/v7/toggle/list/index.md          | 20 +++++++++++++++++--
 .../on-off/angular/example_component_html.md  |  3 +++
 .../on-off/angular/example_component_ts.md    | 11 ++++++++++
 static/usage/v7/toggle/on-off/index.md        | 20 +++++++++++++++++--
 .../colors/angular/example_component_html.md  | 11 ++++++++++
 .../colors/angular/example_component_ts.md    | 11 ++++++++++
 .../usage/v7/toggle/theming/colors/index.md   | 20 +++++++++++++++++--
 .../angular/example_component_html.md         |  4 ++++
 .../alignment/angular/example_component_ts.md | 11 ++++++++++
 static/usage/v8/toggle/alignment/index.md     | 11 ++++++++--
 .../basic/angular/example_component_html.md   |  6 ++++++
 .../basic/angular/example_component_ts.md     | 11 ++++++++++
 static/usage/v8/toggle/basic/index.md         | 20 +++++++++++++++++--
 .../justify/angular/example_component_html.md | 13 ++++++++++++
 .../justify/angular/example_component_ts.md   | 11 ++++++++++
 static/usage/v8/toggle/justify/index.md       | 20 +++++++++++++++++--
 .../angular/example_component_html.md         |  6 ++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v8/toggle/label-placement/index.md  | 16 +++++++++++++--
 .../list/angular/example_component_html.md    | 13 ++++++++++++
 .../list/angular/example_component_ts.md      | 11 ++++++++++
 static/usage/v8/toggle/list/index.md          | 20 +++++++++++++++++--
 .../on-off/angular/example_component_html.md  |  3 +++
 .../on-off/angular/example_component_ts.md    | 11 ++++++++++
 static/usage/v8/toggle/on-off/index.md        | 20 +++++++++++++++++--
 .../colors/angular/example_component_html.md  | 11 ++++++++++
 .../colors/angular/example_component_ts.md    | 11 ++++++++++
 .../usage/v8/toggle/theming/colors/index.md   | 20 +++++++++++++++++--
 42 files changed, 492 insertions(+), 28 deletions(-)
 create mode 100644 static/usage/v7/toggle/alignment/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/alignment/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/justify/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/justify/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/list/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/list/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/on-off/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/on-off/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/alignment/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/alignment/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/justify/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/justify/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/list/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/list/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/on-off/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/on-off/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/v8/toggle/theming/colors/angular/example_component_ts.md

diff --git a/static/usage/v7/toggle/alignment/angular/example_component_html.md b/static/usage/v7/toggle/alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2395fa81f6a
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle labelPlacement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked" alignment="center">Aligned to the Center</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/alignment/angular/example_component_ts.md b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/alignment/index.md b/static/usage/v7/toggle/alignment/index.md
index 0d94dbd5e1e..b0a99959669 100644
--- a/static/usage/v7/toggle/alignment/index.md
+++ b/static/usage/v7/toggle/alignment/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/toggle/alignment/demo.html"
 />
diff --git a/static/usage/v7/toggle/basic/angular/example_component_html.md b/static/usage/v7/toggle/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f6f9fd2bb1d
--- /dev/null
+++ b/static/usage/v7/toggle/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-toggle>Default Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
+<ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/basic/angular/example_component_ts.md b/static/usage/v7/toggle/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v7/toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.md
index 565b56f5591..a161ca47460 100644
--- a/static/usage/v7/toggle/basic/index.md
+++ b/static/usage/v7/toggle/basic/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/basic/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/basic/demo.html"
+/>
diff --git a/static/usage/v7/toggle/justify/angular/example_component_html.md b/static/usage/v7/toggle/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/justify/angular/example_component_ts.md b/static/usage/v7/toggle/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..984448e8912
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.md
index 63ae27756f0..d8ed39bb741 100644
--- a/static/usage/v7/toggle/justify/index.md
+++ b/static/usage/v7/toggle/justify/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/justify/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/justify/demo.html"
+/>
diff --git a/static/usage/v7/toggle/label-placement/angular/example_component_html.md b/static/usage/v7/toggle/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..390ea7bda37
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
+<ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked">Stacked Label</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/label-placement/angular/example_component_ts.md b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/label-placement/index.md b/static/usage/v7/toggle/label-placement/index.md
index 160f05db920..61da4858098 100644
--- a/static/usage/v7/toggle/label-placement/index.md
+++ b/static/usage/v7/toggle/label-placement/index.md
@@ -3,11 +3,23 @@ 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"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toggle/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/toggle/list/angular/example_component_html.md b/static/usage/v7/toggle/list/angular/example_component_html.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle>Receive Push Notifications</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Emails</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Text Messages</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/toggle/list/angular/example_component_ts.md b/static/usage/v7/toggle/list/angular/example_component_ts.md
new file mode 100644
index 00000000000..984448e8912
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.md
index ad3aef2e129..91f18ff10df 100644
--- a/static/usage/v7/toggle/list/index.md
+++ b/static/usage/v7/toggle/list/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/list/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/list/demo.html"
+/>
diff --git a/static/usage/v7/toggle/on-off/angular/example_component_html.md b/static/usage/v7/toggle/on-off/angular/example_component_html.md
new file mode 100644
index 00000000000..2b2d75bcc3c
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle [enableOnOffLabels]="true">Enable Notifications</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/on-off/angular/example_component_ts.md b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.md
index 00a4e4800ad..f7660455a4c 100644
--- a/static/usage/v7/toggle/on-off/index.md
+++ b/static/usage/v7/toggle/on-off/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/on-off/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/on-off/demo.html"
+/>
diff --git a/static/usage/v7/toggle/theming/colors/angular/example_component_html.md b/static/usage/v7/toggle/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..20e1b2f0d19
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-toggle aria-label="Primary toggle" color="primary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Secondary toggle" color="secondary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Tertiary toggle" color="tertiary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Success toggle" color="success" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Warning toggle" color="warning" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Danger toggle" color="danger" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Light toggle" color="light" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Medium toggle" color="medium" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Dark toggle" color="dark" [checked]="true"></ion-toggle>
+```
diff --git a/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.md
index e67d2cf0693..af9aa6700ff 100644
--- a/static/usage/v7/toggle/theming/colors/index.md
+++ b/static/usage/v7/toggle/theming/colors/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/theming/colors/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/toggle/alignment/angular/example_component_html.md b/static/usage/v8/toggle/alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2395fa81f6a
--- /dev/null
+++ b/static/usage/v8/toggle/alignment/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle labelPlacement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked" alignment="center">Aligned to the Center</ion-toggle>
+```
diff --git a/static/usage/v8/toggle/alignment/angular/example_component_ts.md b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/alignment/index.md b/static/usage/v8/toggle/alignment/index.md
index 50763c11435..ce079652af8 100644
--- a/static/usage/v8/toggle/alignment/index.md
+++ b/static/usage/v8/toggle/alignment/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/toggle/alignment/demo.html"
 />
diff --git a/static/usage/v8/toggle/basic/angular/example_component_html.md b/static/usage/v8/toggle/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f6f9fd2bb1d
--- /dev/null
+++ b/static/usage/v8/toggle/basic/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-toggle>Default Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
+<ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
+<ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
+```
diff --git a/static/usage/v8/toggle/basic/angular/example_component_ts.md b/static/usage/v8/toggle/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v8/toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/basic/index.md b/static/usage/v8/toggle/basic/index.md
index 8a7695a62bc..58494462ad6 100644
--- a/static/usage/v8/toggle/basic/index.md
+++ b/static/usage/v8/toggle/basic/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/basic/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/basic/demo.html"
+/>
diff --git a/static/usage/v8/toggle/justify/angular/example_component_html.md b/static/usage/v8/toggle/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v8/toggle/justify/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/toggle/justify/angular/example_component_ts.md b/static/usage/v8/toggle/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..984448e8912
--- /dev/null
+++ b/static/usage/v8/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/justify/index.md b/static/usage/v8/toggle/justify/index.md
index 92432d33f7a..1784ddadf94 100644
--- a/static/usage/v8/toggle/justify/index.md
+++ b/static/usage/v8/toggle/justify/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/justify/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/justify/demo.html"
+/>
diff --git a/static/usage/v8/toggle/label-placement/angular/example_component_html.md b/static/usage/v8/toggle/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..390ea7bda37
--- /dev/null
+++ b/static/usage/v8/toggle/label-placement/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
+<ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked">Stacked Label</ion-toggle>
+```
diff --git a/static/usage/v8/toggle/label-placement/angular/example_component_ts.md b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/label-placement/index.md b/static/usage/v8/toggle/label-placement/index.md
index 7a5204f2f9e..023b15fc38e 100644
--- a/static/usage/v8/toggle/label-placement/index.md
+++ b/static/usage/v8/toggle/label-placement/index.md
@@ -3,11 +3,23 @@ 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"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toggle/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/toggle/list/angular/example_component_html.md b/static/usage/v8/toggle/list/angular/example_component_html.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v8/toggle/list/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-toggle>Receive Push Notifications</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Emails</ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-toggle>Receive Text Messages</ion-toggle>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/toggle/list/angular/example_component_ts.md b/static/usage/v8/toggle/list/angular/example_component_ts.md
new file mode 100644
index 00000000000..984448e8912
--- /dev/null
+++ b/static/usage/v8/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/list/index.md b/static/usage/v8/toggle/list/index.md
index 66a8b51a026..f9f3bc75c51 100644
--- a/static/usage/v8/toggle/list/index.md
+++ b/static/usage/v8/toggle/list/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/list/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/list/demo.html"
+/>
diff --git a/static/usage/v8/toggle/on-off/angular/example_component_html.md b/static/usage/v8/toggle/on-off/angular/example_component_html.md
new file mode 100644
index 00000000000..2b2d75bcc3c
--- /dev/null
+++ b/static/usage/v8/toggle/on-off/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-toggle [enableOnOffLabels]="true">Enable Notifications</ion-toggle>
+```
diff --git a/static/usage/v8/toggle/on-off/angular/example_component_ts.md b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/on-off/index.md b/static/usage/v8/toggle/on-off/index.md
index ff1d95d2f81..e54975f66bb 100644
--- a/static/usage/v8/toggle/on-off/index.md
+++ b/static/usage/v8/toggle/on-off/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/on-off/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/on-off/demo.html"
+/>
diff --git a/static/usage/v8/toggle/theming/colors/angular/example_component_html.md b/static/usage/v8/toggle/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..20e1b2f0d19
--- /dev/null
+++ b/static/usage/v8/toggle/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-toggle aria-label="Primary toggle" color="primary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Secondary toggle" color="secondary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Tertiary toggle" color="tertiary" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Success toggle" color="success" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Warning toggle" color="warning" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Danger toggle" color="danger" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Light toggle" color="light" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Medium toggle" color="medium" [checked]="true"></ion-toggle>
+<ion-toggle aria-label="Dark toggle" color="dark" [checked]="true"></ion-toggle>
+```
diff --git a/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..9acdfc7d09b
--- /dev/null
+++ b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/colors/index.md b/static/usage/v8/toggle/theming/colors/index.md
index 44fc0a52e8d..bf0a1e5ca42 100644
--- a/static/usage/v8/toggle/theming/colors/index.md
+++ b/static/usage/v8/toggle/theming/colors/index.md
@@ -3,6 +3,22 @@ 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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/theming/colors/demo.html" />
+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"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/theming/colors/demo.html"
+/>

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

---
 static/usage/v7/toggle/alignment/angular/example_component_ts.md | 1 +
 static/usage/v7/toggle/basic/angular/example_component_ts.md     | 1 +
 static/usage/v7/toggle/justify/angular/example_component_ts.md   | 1 +
 .../v7/toggle/label-placement/angular/example_component_ts.md    | 1 +
 static/usage/v7/toggle/list/angular/example_component_ts.md      | 1 +
 static/usage/v7/toggle/on-off/angular/example_component_ts.md    | 1 +
 .../v7/toggle/theming/colors/angular/example_component_ts.md     | 1 +
 static/usage/v8/toggle/alignment/angular/example_component_ts.md | 1 +
 static/usage/v8/toggle/basic/angular/example_component_ts.md     | 1 +
 static/usage/v8/toggle/justify/angular/example_component_ts.md   | 1 +
 .../v8/toggle/label-placement/angular/example_component_ts.md    | 1 +
 static/usage/v8/toggle/list/angular/example_component_ts.md      | 1 +
 static/usage/v8/toggle/on-off/angular/example_component_ts.md    | 1 +
 .../v8/toggle/theming/colors/angular/example_component_ts.md     | 1 +
 14 files changed, 14 insertions(+)

diff --git a/static/usage/v7/toggle/alignment/angular/example_component_ts.md b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v7/toggle/alignment/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/basic/angular/example_component_ts.md b/static/usage/v7/toggle/basic/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v7/toggle/basic/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/justify/angular/example_component_ts.md b/static/usage/v7/toggle/justify/angular/example_component_ts.md
index 984448e8912..80a17959d02 100644
--- a/static/usage/v7/toggle/justify/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/justify/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/label-placement/angular/example_component_ts.md b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/list/angular/example_component_ts.md b/static/usage/v7/toggle/list/angular/example_component_ts.md
index 984448e8912..80a17959d02 100644
--- a/static/usage/v7/toggle/list/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/list/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/on-off/angular/example_component_ts.md b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v7/toggle/on-off/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/alignment/angular/example_component_ts.md b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v8/toggle/alignment/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/basic/angular/example_component_ts.md b/static/usage/v8/toggle/basic/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v8/toggle/basic/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/justify/angular/example_component_ts.md b/static/usage/v8/toggle/justify/angular/example_component_ts.md
index 984448e8912..80a17959d02 100644
--- a/static/usage/v8/toggle/justify/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/justify/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/label-placement/angular/example_component_ts.md b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/list/angular/example_component_ts.md b/static/usage/v8/toggle/list/angular/example_component_ts.md
index 984448e8912..80a17959d02 100644
--- a/static/usage/v8/toggle/list/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/list/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/on-off/angular/example_component_ts.md b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v8/toggle/on-off/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
index 9acdfc7d09b..7bcffbfd88f 100644
--- a/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonToggle } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonToggle],
 })
 export class ExampleComponent {}

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

---
 static/usage/v7/toggle/alignment/angular.md         |  4 ----
 static/usage/v7/toggle/basic/angular.md             |  6 ------
 static/usage/v7/toggle/justify/angular.md           | 13 -------------
 static/usage/v7/toggle/label-placement/angular.md   |  6 ------
 static/usage/v7/toggle/list/angular.md              | 13 -------------
 static/usage/v7/toggle/on-off/angular.md            |  3 ---
 static/usage/v7/toggle/theming/colors/angular.md    | 11 -----------
 .../css-properties/angular/example_component_ts.md  | 12 ++++++++++++
 .../usage/v7/toggle/theming/css-properties/index.md |  6 ++++--
 .../angular/example_component_ts.md                 | 12 ++++++++++++
 .../v7/toggle/theming/css-shadow-parts/index.md     |  6 ++++--
 static/usage/v8/toggle/alignment/angular.md         |  4 ----
 static/usage/v8/toggle/basic/angular.md             |  6 ------
 static/usage/v8/toggle/justify/angular.md           | 13 -------------
 static/usage/v8/toggle/label-placement/angular.md   |  6 ------
 static/usage/v8/toggle/list/angular.md              | 13 -------------
 static/usage/v8/toggle/on-off/angular.md            |  3 ---
 static/usage/v8/toggle/theming/colors/angular.md    | 11 -----------
 .../css-properties/angular/example_component_ts.md  | 12 ++++++++++++
 .../usage/v8/toggle/theming/css-properties/index.md |  6 ++++--
 .../angular/example_component_ts.md                 | 12 ++++++++++++
 .../v8/toggle/theming/css-shadow-parts/index.md     |  6 ++++--
 22 files changed, 64 insertions(+), 120 deletions(-)
 delete mode 100644 static/usage/v7/toggle/alignment/angular.md
 delete mode 100644 static/usage/v7/toggle/basic/angular.md
 delete mode 100644 static/usage/v7/toggle/justify/angular.md
 delete mode 100644 static/usage/v7/toggle/label-placement/angular.md
 delete mode 100644 static/usage/v7/toggle/list/angular.md
 delete mode 100644 static/usage/v7/toggle/on-off/angular.md
 delete mode 100644 static/usage/v7/toggle/theming/colors/angular.md
 create mode 100644 static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/toggle/alignment/angular.md
 delete mode 100644 static/usage/v8/toggle/basic/angular.md
 delete mode 100644 static/usage/v8/toggle/justify/angular.md
 delete mode 100644 static/usage/v8/toggle/label-placement/angular.md
 delete mode 100644 static/usage/v8/toggle/list/angular.md
 delete mode 100644 static/usage/v8/toggle/on-off/angular.md
 delete mode 100644 static/usage/v8/toggle/theming/colors/angular.md
 create mode 100644 static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md

diff --git a/static/usage/v7/toggle/alignment/angular.md b/static/usage/v7/toggle/alignment/angular.md
deleted file mode 100644
index 2395fa81f6a..00000000000
--- a/static/usage/v7/toggle/alignment/angular.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```html
-<ion-toggle labelPlacement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
-<ion-toggle labelPlacement="stacked" alignment="center">Aligned to the Center</ion-toggle>
-```
diff --git a/static/usage/v7/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular.md
deleted file mode 100644
index f6f9fd2bb1d..00000000000
--- a/static/usage/v7/toggle/basic/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-toggle>Default Toggle</ion-toggle><br /><br />
-<ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
-<ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
-<ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
-```
diff --git a/static/usage/v7/toggle/justify/angular.md b/static/usage/v7/toggle/justify/angular.md
deleted file mode 100644
index 0dbb0ebc9ad..00000000000
--- a/static/usage/v7/toggle/justify/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular.md
deleted file mode 100644
index 390ea7bda37..00000000000
--- a/static/usage/v7/toggle/label-placement/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
-<ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
-<ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
-<ion-toggle labelPlacement="stacked">Stacked Label</ion-toggle>
-```
diff --git a/static/usage/v7/toggle/list/angular.md b/static/usage/v7/toggle/list/angular.md
deleted file mode 100644
index 5a731705335..00000000000
--- a/static/usage/v7/toggle/list/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-toggle>Receive Push Notifications</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle>Receive Emails</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle>Receive Text Messages</ion-toggle>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular.md
deleted file mode 100644
index 2b2d75bcc3c..00000000000
--- a/static/usage/v7/toggle/on-off/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-toggle [enableOnOffLabels]="true">Enable Notifications</ion-toggle>
-```
diff --git a/static/usage/v7/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular.md
deleted file mode 100644
index 20e1b2f0d19..00000000000
--- a/static/usage/v7/toggle/theming/colors/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-toggle aria-label="Primary toggle" color="primary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Secondary toggle" color="secondary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Tertiary toggle" color="tertiary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Success toggle" color="success" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Warning toggle" color="warning" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Danger toggle" color="danger" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Light toggle" color="light" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Medium toggle" color="medium" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Dark toggle" color="dark" [checked]="true"></ion-toggle>
-```
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.md
index b7f767691f7..fceacaf0007 100644
--- a/static/usage/v7/toggle/theming/css-properties/index.md
+++ b/static/usage/v7/toggle/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 00000000000..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/index.md b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
index 6241f8b029f..4e6c98b9185 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/toggle/alignment/angular.md b/static/usage/v8/toggle/alignment/angular.md
deleted file mode 100644
index 2395fa81f6a..00000000000
--- a/static/usage/v8/toggle/alignment/angular.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```html
-<ion-toggle labelPlacement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
-<ion-toggle labelPlacement="stacked" alignment="center">Aligned to the Center</ion-toggle>
-```
diff --git a/static/usage/v8/toggle/basic/angular.md b/static/usage/v8/toggle/basic/angular.md
deleted file mode 100644
index f6f9fd2bb1d..00000000000
--- a/static/usage/v8/toggle/basic/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-toggle>Default Toggle</ion-toggle><br /><br />
-<ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
-<ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
-<ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
-```
diff --git a/static/usage/v8/toggle/justify/angular.md b/static/usage/v8/toggle/justify/angular.md
deleted file mode 100644
index 0dbb0ebc9ad..00000000000
--- a/static/usage/v8/toggle/justify/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-toggle justify="start">Packed at the Start of Line</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle justify="end">Packed at the End of Line</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle justify="space-between">Space Between Label and Control</ion-toggle>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/toggle/label-placement/angular.md b/static/usage/v8/toggle/label-placement/angular.md
deleted file mode 100644
index 390ea7bda37..00000000000
--- a/static/usage/v8/toggle/label-placement/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
-<ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
-<ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
-<ion-toggle labelPlacement="stacked">Stacked Label</ion-toggle>
-```
diff --git a/static/usage/v8/toggle/list/angular.md b/static/usage/v8/toggle/list/angular.md
deleted file mode 100644
index 5a731705335..00000000000
--- a/static/usage/v8/toggle/list/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-toggle>Receive Push Notifications</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle>Receive Emails</ion-toggle>
-  </ion-item>
-  <ion-item>
-    <ion-toggle>Receive Text Messages</ion-toggle>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/toggle/on-off/angular.md b/static/usage/v8/toggle/on-off/angular.md
deleted file mode 100644
index 2b2d75bcc3c..00000000000
--- a/static/usage/v8/toggle/on-off/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-toggle [enableOnOffLabels]="true">Enable Notifications</ion-toggle>
-```
diff --git a/static/usage/v8/toggle/theming/colors/angular.md b/static/usage/v8/toggle/theming/colors/angular.md
deleted file mode 100644
index 20e1b2f0d19..00000000000
--- a/static/usage/v8/toggle/theming/colors/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-toggle aria-label="Primary toggle" color="primary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Secondary toggle" color="secondary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Tertiary toggle" color="tertiary" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Success toggle" color="success" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Warning toggle" color="warning" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Danger toggle" color="danger" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Light toggle" color="light" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Medium toggle" color="medium" [checked]="true"></ion-toggle>
-<ion-toggle aria-label="Dark toggle" color="dark" [checked]="true"></ion-toggle>
-```
diff --git a/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/css-properties/index.md b/static/usage/v8/toggle/theming/css-properties/index.md
index a136177ef9d..553ef9c1fe3 100644
--- a/static/usage/v8/toggle/theming/css-properties/index.md
+++ b/static/usage/v8/toggle/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 00000000000..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/index.md b/static/usage/v8/toggle/theming/css-shadow-parts/index.md
index 771fc1621d9..0af01bb85f3 100644
--- a/static/usage/v8/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/toggle/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}