diff --git a/static/usage/v7/toggle/alignment/angular.md b/static/usage/v7/toggle/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/alignment/angular.md
rename to static/usage/v7/toggle/alignment/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/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/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.md b/static/usage/v7/toggle/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/basic/angular.md
rename to static/usage/v7/toggle/basic/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/basic/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/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.md b/static/usage/v7/toggle/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/justify/angular.md
rename to static/usage/v7/toggle/justify/angular/example_component_html.md
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..80a17959d02
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+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/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.md b/static/usage/v7/toggle/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/label-placement/angular.md
rename to static/usage/v7/toggle/label-placement/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/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/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.md b/static/usage/v7/toggle/list/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/list/angular.md
rename to static/usage/v7/toggle/list/angular/example_component_html.md
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..80a17959d02
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+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/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.md b/static/usage/v7/toggle/on-off/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/on-off/angular.md
rename to static/usage/v7/toggle/on-off/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/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/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.md b/static/usage/v7/toggle/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/theming/colors/angular.md
rename to static/usage/v7/toggle/theming/colors/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/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/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/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/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/alignment/angular.md
rename to static/usage/v8/toggle/alignment/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/alignment/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/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.md b/static/usage/v8/toggle/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/basic/angular.md
rename to static/usage/v8/toggle/basic/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/basic/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/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.md b/static/usage/v8/toggle/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/justify/angular.md
rename to static/usage/v8/toggle/justify/angular/example_component_html.md
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..80a17959d02
--- /dev/null
+++ b/static/usage/v8/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+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/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.md b/static/usage/v8/toggle/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/label-placement/angular.md
rename to static/usage/v8/toggle/label-placement/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/label-placement/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/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.md b/static/usage/v8/toggle/list/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/list/angular.md
rename to static/usage/v8/toggle/list/angular/example_component_html.md
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..80a17959d02
--- /dev/null
+++ b/static/usage/v8/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+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/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.md b/static/usage/v8/toggle/on-off/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/on-off/angular.md
rename to static/usage/v8/toggle/on-off/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/on-off/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/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.md b/static/usage/v8/toggle/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/theming/colors/angular.md
rename to static/usage/v8/toggle/theming/colors/angular/example_component_html.md
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..7bcffbfd88f
--- /dev/null
+++ b/static/usage/v8/toggle/theming/colors/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/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"
+/>
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,
       },
     },
   }}