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

---
 .../basic/angular/example_component_html.md   | 13 ++++++++
 .../basic/angular/example_component_ts.md     | 11 +++++++
 static/usage/v7/toolbar/basic/index.md        | 16 ++++++++--
 .../buttons/angular/example_component_ts.md   | 10 ++++++
 .../angular/example_component_html.md         |  8 +++++
 .../angular/example_component_ts.md           | 11 +++++++
 .../usage/v7/toolbar/progress-bars/index.md   | 16 ++++++++--
 .../angular/example_component_html.md         | 10 ++++++
 .../angular/example_component_ts.md           | 11 +++++++
 static/usage/v7/toolbar/searchbars/index.md   | 16 ++++++++--
 .../angular/example_component_html.md         | 14 ++++++++
 .../segments/angular/example_component_ts.md  | 11 +++++++
 static/usage/v7/toolbar/segments/index.md     | 16 ++++++++--
 .../colors/angular/example_component_html.md  | 32 +++++++++++++++++++
 .../colors/angular/example_component_ts.md    | 11 +++++++
 .../usage/v7/toolbar/theming/colors/index.md  | 16 ++++++++--
 .../basic/angular/example_component_html.md   | 13 ++++++++
 .../basic/angular/example_component_ts.md     | 11 +++++++
 static/usage/v8/toolbar/basic/index.md        | 16 ++++++++--
 .../buttons/angular/example_component_ts.md   | 10 ++++++
 .../angular/example_component_html.md         |  8 +++++
 .../angular/example_component_ts.md           | 11 +++++++
 .../usage/v8/toolbar/progress-bars/index.md   | 16 ++++++++--
 .../angular/example_component_html.md         | 10 ++++++
 .../angular/example_component_ts.md           | 11 +++++++
 static/usage/v8/toolbar/searchbars/index.md   | 16 ++++++++--
 .../angular/example_component_html.md         | 14 ++++++++
 .../segments/angular/example_component_ts.md  | 11 +++++++
 static/usage/v8/toolbar/segments/index.md     | 16 ++++++++--
 .../colors/angular/example_component_html.md  | 32 +++++++++++++++++++
 .../colors/angular/example_component_ts.md    | 11 +++++++
 .../usage/v8/toolbar/theming/colors/index.md  | 16 ++++++++--
 32 files changed, 424 insertions(+), 20 deletions(-)
 create mode 100644 static/usage/v7/toolbar/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toolbar/searchbars/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toolbar/segments/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/segments/angular/example_component_ts.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toolbar/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/toolbar/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toolbar/progress-bars/angular/example_component_html.md
 create mode 100644 static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toolbar/searchbars/angular/example_component_html.md
 create mode 100644 static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toolbar/segments/angular/example_component_html.md
 create mode 100644 static/usage/v8/toolbar/segments/angular/example_component_ts.md
 create mode 100644 static/usage/v8/toolbar/theming/colors/angular/example_component_html.md
 create mode 100644 static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md

diff --git a/static/usage/v7/toolbar/basic/angular/example_component_html.md b/static/usage/v7/toolbar/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header Toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer Toolbar</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v7/toolbar/basic/angular/example_component_ts.md b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..35c10f38816
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/basic/index.md b/static/usage/v7/toolbar/basic/index.md
index 43cc48e1fe9..9278617495e 100644
--- a/static/usage/v7/toolbar/basic/index.md
+++ b/static/usage/v7/toolbar/basic/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/toolbar/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/buttons/angular/example_component_ts.md b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
index 7af150bd169..94e3d6ef6fa 100644
--- a/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/toolbar/progress-bars/angular/example_component_html.md b/static/usage/v7/toolbar/progress-bars/angular/example_component_html.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+    <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
new file mode 100644
index 00000000000..cb30ef2ce5b
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/progress-bars/index.md b/static/usage/v7/toolbar/progress-bars/index.md
index 067e8bed05f..eef3350c810 100644
--- a/static/usage/v7/toolbar/progress-bars/index.md
+++ b/static/usage/v7/toolbar/progress-bars/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/toolbar/progress-bars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/searchbars/angular/example_component_html.md b/static/usage/v7/toolbar/searchbars/angular/example_component_html.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
new file mode 100644
index 00000000000..d0c76d1deec
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/searchbars/index.md b/static/usage/v7/toolbar/searchbars/index.md
index c1327b9c45a..4c0a044ea2d 100644
--- a/static/usage/v7/toolbar/searchbars/index.md
+++ b/static/usage/v7/toolbar/searchbars/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/toolbar/searchbars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/segments/angular/example_component_html.md b/static/usage/v7/toolbar/segments/angular/example_component_html.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v7/toolbar/segments/angular/example_component_ts.md b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
new file mode 100644
index 00000000000..d06461da00c
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/segments/index.md b/static/usage/v7/toolbar/segments/index.md
index 1cd0613d883..3ab676cfffa 100644
--- a/static/usage/v7/toolbar/segments/index.md
+++ b/static/usage/v7/toolbar/segments/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/toolbar/segments/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/theming/colors/angular/example_component_html.md b/static/usage/v7/toolbar/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<ion-toolbar>
+  <ion-title>Default Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="primary">
+  <ion-title>Primary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="secondary">
+  <ion-title>Secondary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="tertiary">
+  <ion-title>Tertiary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="success">
+  <ion-title>Success Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="warning">
+  <ion-title>Warning Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="danger">
+  <ion-title>Danger Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="light">
+  <ion-title>Light Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="medium">
+  <ion-title>Medium Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="dark">
+  <ion-title>Dark Toolbar</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..f4a4c4ec8fa
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/theming/colors/index.md b/static/usage/v7/toolbar/theming/colors/index.md
index 686cc8df40b..0be07354d24 100644
--- a/static/usage/v7/toolbar/theming/colors/index.md
+++ b/static/usage/v7/toolbar/theming/colors/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/toolbar/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v8/toolbar/basic/angular/example_component_html.md b/static/usage/v8/toolbar/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v8/toolbar/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header Toolbar</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer Toolbar</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v8/toolbar/basic/angular/example_component_ts.md b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..35c10f38816
--- /dev/null
+++ b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/basic/index.md b/static/usage/v8/toolbar/basic/index.md
index 11700886f9f..4f2d4d11f8f 100644
--- a/static/usage/v8/toolbar/basic/index.md
+++ b/static/usage/v8/toolbar/basic/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/toolbar/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/buttons/angular/example_component_ts.md b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
index 7af150bd169..94e3d6ef6fa 100644
--- a/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/toolbar/progress-bars/angular/example_component_html.md b/static/usage/v8/toolbar/progress-bars/angular/example_component_html.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v8/toolbar/progress-bars/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+    <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
new file mode 100644
index 00000000000..cb30ef2ce5b
--- /dev/null
+++ b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/progress-bars/index.md b/static/usage/v8/toolbar/progress-bars/index.md
index 3b6da500f53..cb7eb9468ee 100644
--- a/static/usage/v8/toolbar/progress-bars/index.md
+++ b/static/usage/v8/toolbar/progress-bars/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/toolbar/progress-bars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/searchbars/angular/example_component_html.md b/static/usage/v8/toolbar/searchbars/angular/example_component_html.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v8/toolbar/searchbars/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
new file mode 100644
index 00000000000..d0c76d1deec
--- /dev/null
+++ b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/searchbars/index.md b/static/usage/v8/toolbar/searchbars/index.md
index a8eaac0df25..36441a318cb 100644
--- a/static/usage/v8/toolbar/searchbars/index.md
+++ b/static/usage/v8/toolbar/searchbars/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/toolbar/searchbars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/segments/angular/example_component_html.md b/static/usage/v8/toolbar/segments/angular/example_component_html.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v8/toolbar/segments/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
+        <ion-label>All</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        <ion-label>Favorites</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+```
diff --git a/static/usage/v8/toolbar/segments/angular/example_component_ts.md b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
new file mode 100644
index 00000000000..d06461da00c
--- /dev/null
+++ b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/segments/index.md b/static/usage/v8/toolbar/segments/index.md
index d64efc983ab..228433c3a14 100644
--- a/static/usage/v8/toolbar/segments/index.md
+++ b/static/usage/v8/toolbar/segments/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/toolbar/segments/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/theming/colors/angular/example_component_html.md b/static/usage/v8/toolbar/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v8/toolbar/theming/colors/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+<ion-toolbar>
+  <ion-title>Default Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="primary">
+  <ion-title>Primary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="secondary">
+  <ion-title>Secondary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="tertiary">
+  <ion-title>Tertiary Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="success">
+  <ion-title>Success Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="warning">
+  <ion-title>Warning Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="danger">
+  <ion-title>Danger Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="light">
+  <ion-title>Light Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="medium">
+  <ion-title>Medium Toolbar</ion-title>
+</ion-toolbar>
+<ion-toolbar color="dark">
+  <ion-title>Dark Toolbar</ion-title>
+</ion-toolbar>
+```
diff --git a/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..f4a4c4ec8fa
--- /dev/null
+++ b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/theming/colors/index.md b/static/usage/v8/toolbar/theming/colors/index.md
index 4fbb57b6d22..2dae319b1d4 100644
--- a/static/usage/v8/toolbar/theming/colors/index.md
+++ b/static/usage/v8/toolbar/theming/colors/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/toolbar/theming/colors/demo.html"
   size="large"
 />

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

---
 static/usage/v7/toolbar/basic/angular/example_component_ts.md    | 1 +
 .../v7/toolbar/progress-bars/angular/example_component_ts.md     | 1 +
 .../usage/v7/toolbar/searchbars/angular/example_component_ts.md  | 1 +
 static/usage/v7/toolbar/segments/angular/example_component_ts.md | 1 +
 .../v7/toolbar/theming/colors/angular/example_component_ts.md    | 1 +
 static/usage/v8/toolbar/basic/angular/example_component_ts.md    | 1 +
 .../v8/toolbar/progress-bars/angular/example_component_ts.md     | 1 +
 .../usage/v8/toolbar/searchbars/angular/example_component_ts.md  | 1 +
 static/usage/v8/toolbar/segments/angular/example_component_ts.md | 1 +
 .../v8/toolbar/theming/colors/angular/example_component_ts.md    | 1 +
 10 files changed, 10 insertions(+)

diff --git a/static/usage/v7/toolbar/basic/angular/example_component_ts.md b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
index 35c10f38816..0f1535b112e 100644
--- a/static/usage/v7/toolbar/basic/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/stand
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
index cb30ef2ce5b..989441ea2bd 100644
--- a/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
index d0c76d1deec..994d94b0a90 100644
--- a/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/st
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toolbar/segments/angular/example_component_ts.md b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
index d06461da00c..3dc563173a1 100644
--- a/static/usage/v7/toolbar/segments/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
index f4a4c4ec8fa..680c14e0481 100644
--- a/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toolbar/basic/angular/example_component_ts.md b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
index 35c10f38816..0f1535b112e 100644
--- a/static/usage/v8/toolbar/basic/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/stand
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
index cb30ef2ce5b..989441ea2bd 100644
--- a/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
index d0c76d1deec..994d94b0a90 100644
--- a/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/st
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toolbar/segments/angular/example_component_ts.md b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
index d06461da00c..3dc563173a1 100644
--- a/static/usage/v8/toolbar/segments/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
index f4a4c4ec8fa..680c14e0481 100644
--- a/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTitle, IonToolbar],
 })
 export class ExampleComponent {}

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

---
 static/usage/v7/toolbar/basic/angular.md      | 13 --------
 .../usage/v7/toolbar/progress-bars/angular.md |  8 -----
 static/usage/v7/toolbar/searchbars/angular.md | 10 ------
 static/usage/v7/toolbar/segments/angular.md   | 14 --------
 .../v7/toolbar/theming/colors/angular.md      | 32 -------------------
 .../angular/example_component_ts.md           | 12 +++++++
 .../toolbar/theming/css-properties/index.md   |  2 ++
 static/usage/v8/toolbar/basic/angular.md      | 13 --------
 .../usage/v8/toolbar/progress-bars/angular.md |  8 -----
 static/usage/v8/toolbar/searchbars/angular.md | 10 ------
 static/usage/v8/toolbar/segments/angular.md   | 14 --------
 .../v8/toolbar/theming/colors/angular.md      | 32 -------------------
 .../angular/example_component_ts.md           | 12 +++++++
 .../toolbar/theming/css-properties/index.md   |  2 ++
 14 files changed, 28 insertions(+), 154 deletions(-)
 delete mode 100644 static/usage/v7/toolbar/basic/angular.md
 delete mode 100644 static/usage/v7/toolbar/progress-bars/angular.md
 delete mode 100644 static/usage/v7/toolbar/searchbars/angular.md
 delete mode 100644 static/usage/v7/toolbar/segments/angular.md
 delete mode 100644 static/usage/v7/toolbar/theming/colors/angular.md
 create mode 100644 static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/toolbar/basic/angular.md
 delete mode 100644 static/usage/v8/toolbar/progress-bars/angular.md
 delete mode 100644 static/usage/v8/toolbar/searchbars/angular.md
 delete mode 100644 static/usage/v8/toolbar/segments/angular.md
 delete mode 100644 static/usage/v8/toolbar/theming/colors/angular.md
 create mode 100644 static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md

diff --git a/static/usage/v7/toolbar/basic/angular.md b/static/usage/v7/toolbar/basic/angular.md
deleted file mode 100644
index 40fbd442061..00000000000
--- a/static/usage/v7/toolbar/basic/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Header Toolbar</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer Toolbar</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
diff --git a/static/usage/v7/toolbar/progress-bars/angular.md b/static/usage/v7/toolbar/progress-bars/angular.md
deleted file mode 100644
index 0c80f0f5955..00000000000
--- a/static/usage/v7/toolbar/progress-bars/angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Toolbar</ion-title>
-    <ion-progress-bar type="indeterminate"></ion-progress-bar>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v7/toolbar/searchbars/angular.md b/static/usage/v7/toolbar/searchbars/angular.md
deleted file mode 100644
index 9016e1e04cf..00000000000
--- a/static/usage/v7/toolbar/searchbars/angular.md
+++ /dev/null
@@ -1,10 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Toolbar</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-searchbar></ion-searchbar>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular.md
deleted file mode 100644
index e7cce4323dc..00000000000
--- a/static/usage/v7/toolbar/segments/angular.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-segment value="all">
-      <ion-segment-button value="all">
-        <ion-label>All</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="favorites">
-        <ion-label>Favorites</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v7/toolbar/theming/colors/angular.md b/static/usage/v7/toolbar/theming/colors/angular.md
deleted file mode 100644
index a2763a1c1c7..00000000000
--- a/static/usage/v7/toolbar/theming/colors/angular.md
+++ /dev/null
@@ -1,32 +0,0 @@
-```html
-<ion-toolbar>
-  <ion-title>Default Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="primary">
-  <ion-title>Primary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="secondary">
-  <ion-title>Secondary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="tertiary">
-  <ion-title>Tertiary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="success">
-  <ion-title>Success Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="warning">
-  <ion-title>Warning Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="danger">
-  <ion-title>Danger Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="light">
-  <ion-title>Light Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="medium">
-  <ion-title>Medium Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="dark">
-  <ion-title>Dark Toolbar</ion-title>
-</ion-toolbar>
-```
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..680c14e0481
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.md
index 9ca22f52d07..1e7377339cd 100644
--- a/static/usage/v7/toolbar/theming/css-properties/index.md
+++ b/static/usage/v7/toolbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.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"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         '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/toolbar/basic/angular.md b/static/usage/v8/toolbar/basic/angular.md
deleted file mode 100644
index 40fbd442061..00000000000
--- a/static/usage/v8/toolbar/basic/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Header Toolbar</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer Toolbar</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
diff --git a/static/usage/v8/toolbar/progress-bars/angular.md b/static/usage/v8/toolbar/progress-bars/angular.md
deleted file mode 100644
index 0c80f0f5955..00000000000
--- a/static/usage/v8/toolbar/progress-bars/angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Toolbar</ion-title>
-    <ion-progress-bar type="indeterminate"></ion-progress-bar>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v8/toolbar/searchbars/angular.md b/static/usage/v8/toolbar/searchbars/angular.md
deleted file mode 100644
index 9016e1e04cf..00000000000
--- a/static/usage/v8/toolbar/searchbars/angular.md
+++ /dev/null
@@ -1,10 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Toolbar</ion-title>
-  </ion-toolbar>
-  <ion-toolbar>
-    <ion-searchbar></ion-searchbar>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v8/toolbar/segments/angular.md b/static/usage/v8/toolbar/segments/angular.md
deleted file mode 100644
index e7cce4323dc..00000000000
--- a/static/usage/v8/toolbar/segments/angular.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-segment value="all">
-      <ion-segment-button value="all">
-        <ion-label>All</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="favorites">
-        <ion-label>Favorites</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-</ion-header>
-```
diff --git a/static/usage/v8/toolbar/theming/colors/angular.md b/static/usage/v8/toolbar/theming/colors/angular.md
deleted file mode 100644
index a2763a1c1c7..00000000000
--- a/static/usage/v8/toolbar/theming/colors/angular.md
+++ /dev/null
@@ -1,32 +0,0 @@
-```html
-<ion-toolbar>
-  <ion-title>Default Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="primary">
-  <ion-title>Primary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="secondary">
-  <ion-title>Secondary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="tertiary">
-  <ion-title>Tertiary Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="success">
-  <ion-title>Success Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="warning">
-  <ion-title>Warning Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="danger">
-  <ion-title>Danger Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="light">
-  <ion-title>Light Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="medium">
-  <ion-title>Medium Toolbar</ion-title>
-</ion-toolbar>
-<ion-toolbar color="dark">
-  <ion-title>Dark Toolbar</ion-title>
-</ion-toolbar>
-```
diff --git a/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..680c14e0481
--- /dev/null
+++ b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/theming/css-properties/index.md b/static/usage/v8/toolbar/theming/css-properties/index.md
index 72e5c8117fe..a277fcb21ce 100644
--- a/static/usage/v8/toolbar/theming/css-properties/index.md
+++ b/static/usage/v8/toolbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.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"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         '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,
       },
     },
   }}