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

---
 .../basic/angular/example_component_html.md      |  3 +++
 .../basic/angular/example_component_ts.md        | 11 +++++++++++
 static/usage/v7/datetime/basic/index.md          | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../buttons/customizing-button-texts/index.md    | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  9 +++++++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../buttons/customizing-buttons/index.md         | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../showing-confirmation-buttons/index.md        | 16 ++++++++++++++--
 .../advanced/angular/example_component_ts.md     |  2 ++
 .../max-min/angular/example_component_html.md    |  3 +++
 .../max-min/angular/example_component_ts.md      | 11 +++++++++++
 .../datetime/date-constraints/max-min/index.md   | 16 ++++++++++++++--
 .../values/angular/example_component_html.md     |  3 +++
 .../values/angular/example_component_ts.md       | 11 +++++++++++
 .../v7/datetime/date-constraints/values/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            | 11 +++++++++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 static/usage/v7/datetime/format-options/index.md | 11 +++++++++--
 .../array/angular/example_component_ts.md        |  2 ++
 .../callback/angular/example_component_ts.md     |  2 ++
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../datetime/localization/custom-locale/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../localization/first-day-of-week/index.md      | 16 ++++++++++++++--
 .../hour-cycle/angular/example_component_html.md |  3 +++
 .../hour-cycle/angular/example_component_ts.md   | 11 +++++++++++
 .../v7/datetime/localization/hour-cycle/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../localization/locale-extension-tags/index.md  | 16 ++++++++++++++--
 .../time-label/angular/example_component_html.md |  5 +++++
 .../time-label/angular/example_component_ts.md   | 11 +++++++++++
 .../v7/datetime/localization/time-label/index.md | 16 ++++++++++++++--
 .../multiple/angular/example_component_html.md   |  3 +++
 .../multiple/angular/example_component_ts.md     | 11 +++++++++++
 static/usage/v7/datetime/multiple/index.md       | 16 ++++++++++++++--
 .../date/angular/example_component_html.md       |  3 +++
 .../date/angular/example_component_ts.md         | 11 +++++++++++
 .../usage/v7/datetime/presentation/date/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../presentation/month-and-year/index.md         | 16 ++++++++++++++--
 .../time/angular/example_component_html.md       |  3 +++
 .../time/angular/example_component_ts.md         | 11 +++++++++++
 .../usage/v7/datetime/presentation/time/index.md | 16 ++++++++++++++--
 .../wheel/angular/example_component_html.md      |  3 +++
 .../wheel/angular/example_component_ts.md        | 11 +++++++++++
 .../v7/datetime/presentation/wheel/index.md      | 16 ++++++++++++++--
 .../angular/example_component_ts.md              |  2 ++
 .../angular/example_component_ts.md              |  2 ++
 .../angular/example_component_html.md            |  5 +++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../v7/datetime/title/customizing-title/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../title/showing-default-title/index.md         | 16 ++++++++++++++--
 .../basic/angular/example_component_html.md      |  3 +++
 .../basic/angular/example_component_ts.md        | 11 +++++++++++
 static/usage/v8/datetime/basic/index.md          | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../buttons/customizing-button-texts/index.md    | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  9 +++++++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../buttons/customizing-buttons/index.md         | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../showing-confirmation-buttons/index.md        | 16 ++++++++++++++--
 .../advanced/angular/example_component_ts.md     |  2 ++
 .../max-min/angular/example_component_html.md    |  3 +++
 .../max-min/angular/example_component_ts.md      | 11 +++++++++++
 .../datetime/date-constraints/max-min/index.md   | 16 ++++++++++++++--
 .../values/angular/example_component_html.md     |  3 +++
 .../values/angular/example_component_ts.md       | 11 +++++++++++
 .../v8/datetime/date-constraints/values/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            | 11 +++++++++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 static/usage/v8/datetime/format-options/index.md | 11 +++++++++--
 .../array/angular/example_component_ts.md        |  2 ++
 .../callback/angular/example_component_ts.md     |  2 ++
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../datetime/localization/custom-locale/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../localization/first-day-of-week/index.md      | 16 ++++++++++++++--
 .../hour-cycle/angular/example_component_html.md |  3 +++
 .../hour-cycle/angular/example_component_ts.md   | 11 +++++++++++
 .../v8/datetime/localization/hour-cycle/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../localization/locale-extension-tags/index.md  | 16 ++++++++++++++--
 .../time-label/angular/example_component_html.md |  5 +++++
 .../time-label/angular/example_component_ts.md   | 11 +++++++++++
 .../v8/datetime/localization/time-label/index.md | 16 ++++++++++++++--
 .../multiple/angular/example_component_html.md   |  3 +++
 .../multiple/angular/example_component_ts.md     | 11 +++++++++++
 static/usage/v8/datetime/multiple/index.md       | 16 ++++++++++++++--
 .../date/angular/example_component_html.md       |  3 +++
 .../date/angular/example_component_ts.md         | 11 +++++++++++
 .../usage/v8/datetime/presentation/date/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../presentation/month-and-year/index.md         | 16 ++++++++++++++--
 .../time/angular/example_component_html.md       |  3 +++
 .../time/angular/example_component_ts.md         | 11 +++++++++++
 .../usage/v8/datetime/presentation/time/index.md | 16 ++++++++++++++--
 .../wheel/angular/example_component_html.md      |  3 +++
 .../wheel/angular/example_component_ts.md        | 11 +++++++++++
 .../v8/datetime/presentation/wheel/index.md      | 16 ++++++++++++++--
 .../angular/example_component_ts.md              |  2 ++
 .../angular/example_component_ts.md              |  2 ++
 .../angular/example_component_html.md            |  5 +++++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../v8/datetime/title/customizing-title/index.md | 16 ++++++++++++++--
 .../angular/example_component_html.md            |  3 +++
 .../angular/example_component_ts.md              | 11 +++++++++++
 .../title/showing-default-title/index.md         | 16 ++++++++++++++--
 124 files changed, 1110 insertions(+), 76 deletions(-)
 create mode 100644 static/usage/v7/datetime/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/format-options/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/format-options/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/multiple/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/multiple/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/presentation/date/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/presentation/time/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/format-options/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/format-options/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/localization/time-label/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/multiple/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/multiple/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/presentation/date/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/presentation/time/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md
 create mode 100644 static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md

diff --git a/static/usage/v7/datetime/basic/angular/example_component_html.md b/static/usage/v7/datetime/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v7/datetime/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/basic/angular/example_component_ts.md b/static/usage/v7/datetime/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.md
index 99e893af493..7c9181c4341 100644
--- a/static/usage/v7/datetime/basic/index.md
+++ b/static/usage/v7/datetime/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"
   size="medium"
-  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/datetime/basic/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md
new file mode 100644
index 00000000000..f9d6b66b986
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
index 7b03b2ff8f7..ac1d29dc5a3 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/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"
   size="500px"
-  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/datetime/buttons/customizing-button-texts/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..c5f1c5d8b9f
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-datetime #datetime>
+  <ion-buttons slot="buttons">
+    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
+    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
+    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
+  </ion-buttons>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..6b0d9d94fee
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
index 4224357f528..a133ce5eac3 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/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"
   size="500px"
-  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/datetime/buttons/customizing-buttons/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..bf3bb712166
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultButtons]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
index 2510a15e899..77ad7161e88 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/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"
   size="500px"
-  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/datetime/buttons/showing-confirmation-buttons/demo.html"
 />
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
index 3021390e188..e10ed597687 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md
new file mode 100644
index 00000000000..f37914bd457
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.md
index 808fa7bf756..13219e583f8 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/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"
   size="medium"
-  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/datetime/date-constraints/max-min/demo.html"
 />
diff --git a/static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md
new file mode 100644
index 00000000000..ab31d1fad20
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.md
index dc33ed9ac87..57b17c21e27 100644
--- a/static/usage/v7/datetime/date-constraints/values/index.md
+++ b/static/usage/v7/datetime/date-constraints/values/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"
   size="medium"
-  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/datetime/date-constraints/values/demo.html"
 />
diff --git a/static/usage/v7/datetime/format-options/angular/example_component_html.md b/static/usage/v7/datetime/format-options/angular/example_component_html.md
new file mode 100644
index 00000000000..8453ac416e8
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-datetime
+  value="2023-11-02T01:22:00"
+  [formatOptions]="{
+      time: { hour: '2-digit', minute: '2-digit' },
+      date: { day: '2-digit', month: 'long' },
+    }"
+>
+  <span slot="title">Select Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/format-options/angular/example_component_ts.md b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md
index f12a9dc3bd2..bb5c3770fe0 100644
--- a/static/usage/v7/datetime/format-options/index.md
+++ b/static/usage/v7/datetime/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/datetime/format-options/demo.html"
 />
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index 4ca93b85f44..f415202affe 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index 60f9c700d05..ed2d0eb0611 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = (isoString) => {
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="es-ES"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.md
index 566363cc089..ecbef0b093f 100644
--- a/static/usage/v7/datetime/localization/custom-locale/index.md
+++ b/static/usage/v7/datetime/localization/custom-locale/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"
   size="medium"
-  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/datetime/localization/custom-locale/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md
new file mode 100644
index 00000000000..2281060074e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.md
index 389010b4302..eab3232865b 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/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"
   size="medium"
-  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/datetime/localization/first-day-of-week/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md
new file mode 100644
index 00000000000..aeb27d6152b
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.md
index 5ffaf29bb41..b03b4360a26 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/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"
   size="medium"
-  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/datetime/localization/hour-cycle/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
index 33c92262f9e..1355a443479 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/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"
   size="medium"
-  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/datetime/localization/locale-extension-tags/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/time-label/angular/example_component_html.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_html.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime locale="es-ES">
+  <span slot="time-label">Tiempo</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.md
index e35108abac4..3841888f4ff 100644
--- a/static/usage/v7/datetime/localization/time-label/index.md
+++ b/static/usage/v7/datetime/localization/time-label/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"
   size="medium"
-  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/datetime/localization/time-label/demo.html"
 />
diff --git a/static/usage/v7/datetime/multiple/angular/example_component_html.md b/static/usage/v7/datetime/multiple/angular/example_component_html.md
new file mode 100644
index 00000000000..e26fe9e931d
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/multiple/angular/example_component_ts.md b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.md
index 84405fb740f..250303f71bc 100644
--- a/static/usage/v7/datetime/multiple/index.md
+++ b/static/usage/v7/datetime/multiple/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"
   size="medium"
-  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/datetime/multiple/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/date/angular/example_component_html.md b/static/usage/v7/datetime/presentation/date/angular/example_component_html.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.md
index 97780827260..182b1d07aeb 100644
--- a/static/usage/v7/datetime/presentation/date/index.md
+++ b/static/usage/v7/datetime/presentation/date/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"
   size="medium"
-  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/datetime/presentation/date/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="month-year"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.md
index 524545fb033..b1f841692e4 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/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"
   size="240px"
-  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/datetime/presentation/month-and-year/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/time/angular/example_component_html.md b/static/usage/v7/datetime/presentation/time/angular/example_component_html.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="time"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.md
index 9423cfba0f9..c2482e6f001 100644
--- a/static/usage/v7/datetime/presentation/time/index.md
+++ b/static/usage/v7/datetime/presentation/time/index.md
@@ -3,10 +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';
+
+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/datetime/presentation/time/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md
new file mode 100644
index 00000000000..f98877053c3
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.md
index 47e4923bba6..8305adfc583 100644
--- a/static/usage/v7/datetime/presentation/wheel/index.md
+++ b/static/usage/v7/datetime/presentation/wheel/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"
   size="medium"
-  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/datetime/presentation/wheel/demo.html"
 />
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
index 56c95d0ba0e..0783c6abc64 100644
--- a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent implements OnInit {
   public datetime;
diff --git a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
index 39bac10093c..65416271761 100644
--- a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md b/static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime>
+  <span slot="title">Select a Reservation Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/index.md b/static/usage/v7/datetime/title/customizing-title/index.md
index 82a2b46e45b..40c98b48917 100644
--- a/static/usage/v7/datetime/title/customizing-title/index.md
+++ b/static/usage/v7/datetime/title/customizing-title/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"
   size="large"
-  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/datetime/title/customizing-title/demo.html"
 />
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md
new file mode 100644
index 00000000000..c67e022da04
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultTitle]="true"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.md
index c0efd60dc18..192f93026ba 100644
--- a/static/usage/v7/datetime/title/showing-default-title/index.md
+++ b/static/usage/v7/datetime/title/showing-default-title/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"
   size="large"
-  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/datetime/title/showing-default-title/demo.html"
 />
diff --git a/static/usage/v8/datetime/basic/angular/example_component_html.md b/static/usage/v8/datetime/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v8/datetime/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/basic/angular/example_component_ts.md b/static/usage/v8/datetime/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/basic/index.md b/static/usage/v8/datetime/basic/index.md
index 4d9429d3054..62ae8d73b99 100644
--- a/static/usage/v8/datetime/basic/index.md
+++ b/static/usage/v8/datetime/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"
   size="medium"
-  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/datetime/basic/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md
new file mode 100644
index 00000000000..f9d6b66b986
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
index 8f8e886ca0a..641ef621906 100644
--- a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/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"
   size="500px"
-  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/datetime/buttons/customizing-button-texts/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..c5f1c5d8b9f
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-datetime #datetime>
+  <ion-buttons slot="buttons">
+    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
+    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
+    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
+  </ion-buttons>
+</ion-datetime>
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..6b0d9d94fee
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/index.md b/static/usage/v8/datetime/buttons/customizing-buttons/index.md
index 8c8dd6234a5..0e870411201 100644
--- a/static/usage/v8/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/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"
   size="500px"
-  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/datetime/buttons/customizing-buttons/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..bf3bb712166
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultButtons]="true"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
index 209eb126efe..ea89976eaa5 100644
--- a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/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"
   size="500px"
-  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/datetime/buttons/showing-confirmation-buttons/demo.html"
 />
diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
index 3021390e188..e10ed597687 100644
--- a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md
new file mode 100644
index 00000000000..f37914bd457
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/index.md b/static/usage/v8/datetime/date-constraints/max-min/index.md
index d10c5885604..4c43fcb3fe7 100644
--- a/static/usage/v8/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v8/datetime/date-constraints/max-min/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"
   size="medium"
-  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/datetime/date-constraints/max-min/demo.html"
 />
diff --git a/static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md
new file mode 100644
index 00000000000..ab31d1fad20
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/index.md b/static/usage/v8/datetime/date-constraints/values/index.md
index 3695e380fad..8e4964da788 100644
--- a/static/usage/v8/datetime/date-constraints/values/index.md
+++ b/static/usage/v8/datetime/date-constraints/values/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"
   size="medium"
-  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/datetime/date-constraints/values/demo.html"
 />
diff --git a/static/usage/v8/datetime/format-options/angular/example_component_html.md b/static/usage/v8/datetime/format-options/angular/example_component_html.md
new file mode 100644
index 00000000000..8453ac416e8
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-datetime
+  value="2023-11-02T01:22:00"
+  [formatOptions]="{
+      time: { hour: '2-digit', minute: '2-digit' },
+      date: { day: '2-digit', month: 'long' },
+    }"
+>
+  <span slot="title">Select Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v8/datetime/format-options/angular/example_component_ts.md b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/format-options/index.md b/static/usage/v8/datetime/format-options/index.md
index d6e6eb0ca44..c4321c59338 100644
--- a/static/usage/v8/datetime/format-options/index.md
+++ b/static/usage/v8/datetime/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/datetime/format-options/demo.html"
 />
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
index 4ca93b85f44..f415202affe 100644
--- a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
index 60f9c700d05..ed2d0eb0611 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = (isoString) => {
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="es-ES"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/index.md b/static/usage/v8/datetime/localization/custom-locale/index.md
index 330a1e415bb..b45ae547fe5 100644
--- a/static/usage/v8/datetime/localization/custom-locale/index.md
+++ b/static/usage/v8/datetime/localization/custom-locale/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"
   size="medium"
-  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/datetime/localization/custom-locale/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md
new file mode 100644
index 00000000000..2281060074e
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/index.md b/static/usage/v8/datetime/localization/first-day-of-week/index.md
index 4cc8b4b7bda..0b725341ad3 100644
--- a/static/usage/v8/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v8/datetime/localization/first-day-of-week/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"
   size="medium"
-  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/datetime/localization/first-day-of-week/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md
new file mode 100644
index 00000000000..aeb27d6152b
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/index.md b/static/usage/v8/datetime/localization/hour-cycle/index.md
index 0e15b22a685..1fa52bc59c8 100644
--- a/static/usage/v8/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v8/datetime/localization/hour-cycle/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"
   size="medium"
-  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/datetime/localization/hour-cycle/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/index.md b/static/usage/v8/datetime/localization/locale-extension-tags/index.md
index 0013edd6d6f..e7c706b4534 100644
--- a/static/usage/v8/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/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"
   size="medium"
-  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/datetime/localization/locale-extension-tags/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/time-label/angular/example_component_html.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_html.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime locale="es-ES">
+  <span slot="time-label">Tiempo</span>
+</ion-datetime>
+```
diff --git a/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/time-label/index.md b/static/usage/v8/datetime/localization/time-label/index.md
index 6586c762c06..d2baad09405 100644
--- a/static/usage/v8/datetime/localization/time-label/index.md
+++ b/static/usage/v8/datetime/localization/time-label/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"
   size="medium"
-  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/datetime/localization/time-label/demo.html"
 />
diff --git a/static/usage/v8/datetime/multiple/angular/example_component_html.md b/static/usage/v8/datetime/multiple/angular/example_component_html.md
new file mode 100644
index 00000000000..e26fe9e931d
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/multiple/angular/example_component_ts.md b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/multiple/index.md b/static/usage/v8/datetime/multiple/index.md
index b0542b8b8fc..8b9749c748d 100644
--- a/static/usage/v8/datetime/multiple/index.md
+++ b/static/usage/v8/datetime/multiple/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"
   size="medium"
-  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/datetime/multiple/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/date/angular/example_component_html.md b/static/usage/v8/datetime/presentation/date/angular/example_component_html.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/date/index.md b/static/usage/v8/datetime/presentation/date/index.md
index 7cb18100bd5..569e249c60f 100644
--- a/static/usage/v8/datetime/presentation/date/index.md
+++ b/static/usage/v8/datetime/presentation/date/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"
   size="medium"
-  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/datetime/presentation/date/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="month-year"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/index.md b/static/usage/v8/datetime/presentation/month-and-year/index.md
index d8cb4417e6c..68d952f04af 100644
--- a/static/usage/v8/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v8/datetime/presentation/month-and-year/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"
   size="240px"
-  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/datetime/presentation/month-and-year/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/time/angular/example_component_html.md b/static/usage/v8/datetime/presentation/time/angular/example_component_html.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="time"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/time/index.md b/static/usage/v8/datetime/presentation/time/index.md
index 0dd5b553635..2941c9aff9c 100644
--- a/static/usage/v8/datetime/presentation/time/index.md
+++ b/static/usage/v8/datetime/presentation/time/index.md
@@ -3,10 +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';
+
+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/datetime/presentation/time/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md
new file mode 100644
index 00000000000..f98877053c3
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/index.md b/static/usage/v8/datetime/presentation/wheel/index.md
index 0561288d93b..c0c0b53a308 100644
--- a/static/usage/v8/datetime/presentation/wheel/index.md
+++ b/static/usage/v8/datetime/presentation/wheel/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"
   size="medium"
-  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/datetime/presentation/wheel/demo.html"
 />
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
index 56c95d0ba0e..0783c6abc64 100644
--- a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent implements OnInit {
   public datetime;
diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
index 39bac10093c..65416271761 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-datetime>
+  <span slot="title">Select a Reservation Date</span>
+</ion-datetime>
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/index.md b/static/usage/v8/datetime/title/customizing-title/index.md
index 248c0b86bab..3c1ca1c82f1 100644
--- a/static/usage/v8/datetime/title/customizing-title/index.md
+++ b/static/usage/v8/datetime/title/customizing-title/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"
   size="large"
-  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/datetime/title/customizing-title/demo.html"
 />
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md
new file mode 100644
index 00000000000..c67e022da04
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime [showDefaultTitle]="true"></ion-datetime>
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
new file mode 100644
index 00000000000..c15632f67bc
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/index.md b/static/usage/v8/datetime/title/showing-default-title/index.md
index c053667913e..237eccc68bf 100644
--- a/static/usage/v8/datetime/title/showing-default-title/index.md
+++ b/static/usage/v8/datetime/title/showing-default-title/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"
   size="large"
-  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/datetime/title/showing-default-title/demo.html"
 />

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

---
 static/usage/v7/datetime/basic/angular/example_component_ts.md   | 1 +
 .../customizing-button-texts/angular/example_component_ts.md     | 1 +
 .../buttons/customizing-buttons/angular/example_component_ts.md  | 1 +
 .../showing-confirmation-buttons/angular/example_component_ts.md | 1 +
 .../date-constraints/advanced/angular/example_component_ts.md    | 1 +
 .../date-constraints/max-min/angular/example_component_ts.md     | 1 +
 .../date-constraints/values/angular/example_component_ts.md      | 1 +
 .../v7/datetime/format-options/angular/example_component_ts.md   | 1 +
 .../highlightedDates/array/angular/example_component_ts.md       | 1 +
 .../highlightedDates/callback/angular/example_component_ts.md    | 1 +
 .../localization/custom-locale/angular/example_component_ts.md   | 1 +
 .../first-day-of-week/angular/example_component_ts.md            | 1 +
 .../localization/hour-cycle/angular/example_component_ts.md      | 1 +
 .../locale-extension-tags/angular/example_component_ts.md        | 1 +
 .../localization/time-label/angular/example_component_ts.md      | 1 +
 .../usage/v7/datetime/multiple/angular/example_component_ts.md   | 1 +
 .../datetime/presentation/date/angular/example_component_ts.md   | 1 +
 .../presentation/month-and-year/angular/example_component_ts.md  | 1 +
 .../datetime/presentation/time/angular/example_component_ts.md   | 1 +
 .../datetime/presentation/wheel/angular/example_component_ts.md  | 1 +
 .../title/customizing-title/angular/example_component_ts.md      | 1 +
 .../title/showing-default-title/angular/example_component_ts.md  | 1 +
 static/usage/v8/datetime/basic/angular/example_component_ts.md   | 1 +
 .../customizing-button-texts/angular/example_component_ts.md     | 1 +
 .../buttons/customizing-buttons/angular/example_component_ts.md  | 1 +
 .../showing-confirmation-buttons/angular/example_component_ts.md | 1 +
 .../date-constraints/advanced/angular/example_component_ts.md    | 1 +
 .../date-constraints/max-min/angular/example_component_ts.md     | 1 +
 .../date-constraints/values/angular/example_component_ts.md      | 1 +
 .../v8/datetime/format-options/angular/example_component_ts.md   | 1 +
 .../highlightedDates/array/angular/example_component_ts.md       | 1 +
 .../highlightedDates/callback/angular/example_component_ts.md    | 1 +
 .../localization/custom-locale/angular/example_component_ts.md   | 1 +
 .../first-day-of-week/angular/example_component_ts.md            | 1 +
 .../localization/hour-cycle/angular/example_component_ts.md      | 1 +
 .../locale-extension-tags/angular/example_component_ts.md        | 1 +
 .../localization/time-label/angular/example_component_ts.md      | 1 +
 .../usage/v8/datetime/multiple/angular/example_component_ts.md   | 1 +
 .../datetime/presentation/date/angular/example_component_ts.md   | 1 +
 .../presentation/month-and-year/angular/example_component_ts.md  | 1 +
 .../datetime/presentation/time/angular/example_component_ts.md   | 1 +
 .../datetime/presentation/wheel/angular/example_component_ts.md  | 1 +
 .../title/customizing-title/angular/example_component_ts.md      | 1 +
 .../title/showing-default-title/angular/example_component_ts.md  | 1 +
 44 files changed, 44 insertions(+)

diff --git a/static/usage/v7/datetime/basic/angular/example_component_ts.md b/static/usage/v7/datetime/basic/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/basic/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
index 6b0d9d94fee..9a2b1795d68 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
index e10ed597687..37d9936a824 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/format-options/angular/example_component_ts.md b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/format-options/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index f415202affe..1382b5db0e9 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index ed2d0eb0611..59f7e502e55 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/multiple/angular/example_component_ts.md b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/multiple/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/basic/angular/example_component_ts.md b/static/usage/v8/datetime/basic/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/basic/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
index 6b0d9d94fee..9a2b1795d68 100644
--- a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
index e10ed597687..37d9936a824 100644
--- a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/format-options/angular/example_component_ts.md b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/format-options/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
index f415202affe..1382b5db0e9 100644
--- a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
index ed2d0eb0611..59f7e502e55 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/multiple/angular/example_component_ts.md b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/multiple/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
index c15632f67bc..64d541cb04e 100644
--- a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonDatetime],
 })
 export class ExampleComponent {}

From 46fdb8e0f233e4f22e43423a5868634a93b28a4d Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:13:19 -0500
Subject: [PATCH 3/4] docs(datetime): remove unused files

---
 static/usage/v7/datetime/basic/angular.md             |  3 ---
 .../buttons/customizing-button-texts/angular.md       |  3 ---
 .../datetime/buttons/customizing-buttons/angular.md   |  9 ---------
 .../buttons/showing-confirmation-buttons/angular.md   |  3 ---
 .../v7/datetime/date-constraints/max-min/angular.md   |  3 ---
 .../v7/datetime/date-constraints/values/angular.md    |  3 ---
 static/usage/v7/datetime/format-options/angular.md    | 11 -----------
 .../v7/datetime/localization/custom-locale/angular.md |  3 ---
 .../localization/first-day-of-week/angular.md         |  3 ---
 .../v7/datetime/localization/hour-cycle/angular.md    |  3 ---
 .../localization/locale-extension-tags/angular.md     |  3 ---
 .../v7/datetime/localization/time-label/angular.md    |  5 -----
 static/usage/v7/datetime/multiple/angular.md          |  3 ---
 static/usage/v7/datetime/presentation/date/angular.md |  3 ---
 .../datetime/presentation/month-and-year/angular.md   |  3 ---
 static/usage/v7/datetime/presentation/time/angular.md |  3 ---
 .../usage/v7/datetime/presentation/wheel/angular.md   |  3 ---
 .../v7/datetime/title/customizing-title/angular.md    |  5 -----
 .../datetime/title/showing-default-title/angular.md   |  3 ---
 static/usage/v8/datetime/basic/angular.md             |  3 ---
 .../buttons/customizing-button-texts/angular.md       |  3 ---
 .../datetime/buttons/customizing-buttons/angular.md   |  9 ---------
 .../buttons/showing-confirmation-buttons/angular.md   |  3 ---
 .../v8/datetime/date-constraints/max-min/angular.md   |  3 ---
 .../v8/datetime/date-constraints/values/angular.md    |  3 ---
 static/usage/v8/datetime/format-options/angular.md    | 11 -----------
 .../v8/datetime/localization/custom-locale/angular.md |  3 ---
 .../localization/first-day-of-week/angular.md         |  3 ---
 .../v8/datetime/localization/hour-cycle/angular.md    |  3 ---
 .../localization/locale-extension-tags/angular.md     |  3 ---
 .../v8/datetime/localization/time-label/angular.md    |  5 -----
 static/usage/v8/datetime/multiple/angular.md          |  3 ---
 static/usage/v8/datetime/presentation/date/angular.md |  3 ---
 .../datetime/presentation/month-and-year/angular.md   |  3 ---
 static/usage/v8/datetime/presentation/time/angular.md |  3 ---
 .../usage/v8/datetime/presentation/wheel/angular.md   |  3 ---
 .../v8/datetime/title/customizing-title/angular.md    |  5 -----
 .../datetime/title/showing-default-title/angular.md   |  3 ---
 38 files changed, 150 deletions(-)
 delete mode 100644 static/usage/v7/datetime/basic/angular.md
 delete mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
 delete mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/angular.md
 delete mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
 delete mode 100644 static/usage/v7/datetime/date-constraints/max-min/angular.md
 delete mode 100644 static/usage/v7/datetime/date-constraints/values/angular.md
 delete mode 100644 static/usage/v7/datetime/format-options/angular.md
 delete mode 100644 static/usage/v7/datetime/localization/custom-locale/angular.md
 delete mode 100644 static/usage/v7/datetime/localization/first-day-of-week/angular.md
 delete mode 100644 static/usage/v7/datetime/localization/hour-cycle/angular.md
 delete mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/angular.md
 delete mode 100644 static/usage/v7/datetime/localization/time-label/angular.md
 delete mode 100644 static/usage/v7/datetime/multiple/angular.md
 delete mode 100644 static/usage/v7/datetime/presentation/date/angular.md
 delete mode 100644 static/usage/v7/datetime/presentation/month-and-year/angular.md
 delete mode 100644 static/usage/v7/datetime/presentation/time/angular.md
 delete mode 100644 static/usage/v7/datetime/presentation/wheel/angular.md
 delete mode 100644 static/usage/v7/datetime/title/customizing-title/angular.md
 delete mode 100644 static/usage/v7/datetime/title/showing-default-title/angular.md
 delete mode 100644 static/usage/v8/datetime/basic/angular.md
 delete mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
 delete mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/angular.md
 delete mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
 delete mode 100644 static/usage/v8/datetime/date-constraints/max-min/angular.md
 delete mode 100644 static/usage/v8/datetime/date-constraints/values/angular.md
 delete mode 100644 static/usage/v8/datetime/format-options/angular.md
 delete mode 100644 static/usage/v8/datetime/localization/custom-locale/angular.md
 delete mode 100644 static/usage/v8/datetime/localization/first-day-of-week/angular.md
 delete mode 100644 static/usage/v8/datetime/localization/hour-cycle/angular.md
 delete mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/angular.md
 delete mode 100644 static/usage/v8/datetime/localization/time-label/angular.md
 delete mode 100644 static/usage/v8/datetime/multiple/angular.md
 delete mode 100644 static/usage/v8/datetime/presentation/date/angular.md
 delete mode 100644 static/usage/v8/datetime/presentation/month-and-year/angular.md
 delete mode 100644 static/usage/v8/datetime/presentation/time/angular.md
 delete mode 100644 static/usage/v8/datetime/presentation/wheel/angular.md
 delete mode 100644 static/usage/v8/datetime/title/customizing-title/angular.md
 delete mode 100644 static/usage/v8/datetime/title/showing-default-title/angular.md

diff --git a/static/usage/v7/datetime/basic/angular.md b/static/usage/v7/datetime/basic/angular.md
deleted file mode 100644
index 676d4c61c18..00000000000
--- a/static/usage/v7/datetime/basic/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
deleted file mode 100644
index f9d6b66b986..00000000000
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
-```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
deleted file mode 100644
index c5f1c5d8b9f..00000000000
--- a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
+++ /dev/null
@@ -1,9 +0,0 @@
-```html
-<ion-datetime #datetime>
-  <ion-buttons slot="buttons">
-    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
-    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
-    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
-  </ion-buttons>
-</ion-datetime>
-```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
deleted file mode 100644
index bf3bb712166..00000000000
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultButtons]="true"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular.md b/static/usage/v7/datetime/date-constraints/max-min/angular.md
deleted file mode 100644
index f37914bd457..00000000000
--- a/static/usage/v7/datetime/date-constraints/max-min/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular.md
deleted file mode 100644
index ab31d1fad20..00000000000
--- a/static/usage/v7/datetime/date-constraints/values/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/format-options/angular.md b/static/usage/v7/datetime/format-options/angular.md
deleted file mode 100644
index 8453ac416e8..00000000000
--- a/static/usage/v7/datetime/format-options/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-datetime
-  value="2023-11-02T01:22:00"
-  [formatOptions]="{
-      time: { hour: '2-digit', minute: '2-digit' },
-      date: { day: '2-digit', month: 'long' },
-    }"
->
-  <span slot="title">Select Date</span>
-</ion-datetime>
-```
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular.md b/static/usage/v7/datetime/localization/custom-locale/angular.md
deleted file mode 100644
index c3697585c67..00000000000
--- a/static/usage/v7/datetime/localization/custom-locale/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="es-ES"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular.md b/static/usage/v7/datetime/localization/first-day-of-week/angular.md
deleted file mode 100644
index 2281060074e..00000000000
--- a/static/usage/v7/datetime/localization/first-day-of-week/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular.md b/static/usage/v7/datetime/localization/hour-cycle/angular.md
deleted file mode 100644
index aeb27d6152b..00000000000
--- a/static/usage/v7/datetime/localization/hour-cycle/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
deleted file mode 100644
index 828f85eeb0a..00000000000
--- a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/localization/time-label/angular.md b/static/usage/v7/datetime/localization/time-label/angular.md
deleted file mode 100644
index 38f0e697d3a..00000000000
--- a/static/usage/v7/datetime/localization/time-label/angular.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-datetime locale="es-ES">
-  <span slot="time-label">Tiempo</span>
-</ion-datetime>
-```
diff --git a/static/usage/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular.md
deleted file mode 100644
index e26fe9e931d..00000000000
--- a/static/usage/v7/datetime/multiple/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/presentation/date/angular.md b/static/usage/v7/datetime/presentation/date/angular.md
deleted file mode 100644
index 8694e723b1a..00000000000
--- a/static/usage/v7/datetime/presentation/date/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular.md b/static/usage/v7/datetime/presentation/month-and-year/angular.md
deleted file mode 100644
index fee755e147f..00000000000
--- a/static/usage/v7/datetime/presentation/month-and-year/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="month-year"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/presentation/time/angular.md b/static/usage/v7/datetime/presentation/time/angular.md
deleted file mode 100644
index d54dd466706..00000000000
--- a/static/usage/v7/datetime/presentation/time/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="time"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/presentation/wheel/angular.md b/static/usage/v7/datetime/presentation/wheel/angular.md
deleted file mode 100644
index f98877053c3..00000000000
--- a/static/usage/v7/datetime/presentation/wheel/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
-```
diff --git a/static/usage/v7/datetime/title/customizing-title/angular.md b/static/usage/v7/datetime/title/customizing-title/angular.md
deleted file mode 100644
index 5f0ded69fbc..00000000000
--- a/static/usage/v7/datetime/title/customizing-title/angular.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-datetime>
-  <span slot="title">Select a Reservation Date</span>
-</ion-datetime>
-```
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular.md b/static/usage/v7/datetime/title/showing-default-title/angular.md
deleted file mode 100644
index c67e022da04..00000000000
--- a/static/usage/v7/datetime/title/showing-default-title/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultTitle]="true"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/basic/angular.md b/static/usage/v8/datetime/basic/angular.md
deleted file mode 100644
index 676d4c61c18..00000000000
--- a/static/usage/v8/datetime/basic/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
deleted file mode 100644
index f9d6b66b986..00000000000
--- a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
-```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular.md
deleted file mode 100644
index c5f1c5d8b9f..00000000000
--- a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md
+++ /dev/null
@@ -1,9 +0,0 @@
-```html
-<ion-datetime #datetime>
-  <ion-buttons slot="buttons">
-    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
-    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
-    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
-  </ion-buttons>
-</ion-datetime>
-```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
deleted file mode 100644
index bf3bb712166..00000000000
--- a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultButtons]="true"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular.md b/static/usage/v8/datetime/date-constraints/max-min/angular.md
deleted file mode 100644
index f37914bd457..00000000000
--- a/static/usage/v8/datetime/date-constraints/max-min/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/date-constraints/values/angular.md b/static/usage/v8/datetime/date-constraints/values/angular.md
deleted file mode 100644
index ab31d1fad20..00000000000
--- a/static/usage/v8/datetime/date-constraints/values/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/format-options/angular.md b/static/usage/v8/datetime/format-options/angular.md
deleted file mode 100644
index 8453ac416e8..00000000000
--- a/static/usage/v8/datetime/format-options/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-datetime
-  value="2023-11-02T01:22:00"
-  [formatOptions]="{
-      time: { hour: '2-digit', minute: '2-digit' },
-      date: { day: '2-digit', month: 'long' },
-    }"
->
-  <span slot="title">Select Date</span>
-</ion-datetime>
-```
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular.md b/static/usage/v8/datetime/localization/custom-locale/angular.md
deleted file mode 100644
index c3697585c67..00000000000
--- a/static/usage/v8/datetime/localization/custom-locale/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="es-ES"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular.md b/static/usage/v8/datetime/localization/first-day-of-week/angular.md
deleted file mode 100644
index 2281060074e..00000000000
--- a/static/usage/v8/datetime/localization/first-day-of-week/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular.md b/static/usage/v8/datetime/localization/hour-cycle/angular.md
deleted file mode 100644
index aeb27d6152b..00000000000
--- a/static/usage/v8/datetime/localization/hour-cycle/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular.md
deleted file mode 100644
index 828f85eeb0a..00000000000
--- a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/localization/time-label/angular.md b/static/usage/v8/datetime/localization/time-label/angular.md
deleted file mode 100644
index 38f0e697d3a..00000000000
--- a/static/usage/v8/datetime/localization/time-label/angular.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-datetime locale="es-ES">
-  <span slot="time-label">Tiempo</span>
-</ion-datetime>
-```
diff --git a/static/usage/v8/datetime/multiple/angular.md b/static/usage/v8/datetime/multiple/angular.md
deleted file mode 100644
index e26fe9e931d..00000000000
--- a/static/usage/v8/datetime/multiple/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/presentation/date/angular.md b/static/usage/v8/datetime/presentation/date/angular.md
deleted file mode 100644
index 8694e723b1a..00000000000
--- a/static/usage/v8/datetime/presentation/date/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular.md b/static/usage/v8/datetime/presentation/month-and-year/angular.md
deleted file mode 100644
index fee755e147f..00000000000
--- a/static/usage/v8/datetime/presentation/month-and-year/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="month-year"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/presentation/time/angular.md b/static/usage/v8/datetime/presentation/time/angular.md
deleted file mode 100644
index d54dd466706..00000000000
--- a/static/usage/v8/datetime/presentation/time/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="time"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/presentation/wheel/angular.md b/static/usage/v8/datetime/presentation/wheel/angular.md
deleted file mode 100644
index f98877053c3..00000000000
--- a/static/usage/v8/datetime/presentation/wheel/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/title/customizing-title/angular.md b/static/usage/v8/datetime/title/customizing-title/angular.md
deleted file mode 100644
index 5f0ded69fbc..00000000000
--- a/static/usage/v8/datetime/title/customizing-title/angular.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```html
-<ion-datetime>
-  <span slot="title">Select a Reservation Date</span>
-</ion-datetime>
-```
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular.md b/static/usage/v8/datetime/title/showing-default-title/angular.md
deleted file mode 100644
index c67e022da04..00000000000
--- a/static/usage/v8/datetime/title/showing-default-title/angular.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime [showDefaultTitle]="true"></ion-datetime>
-```

From 49d2ea93d10a0b08709d7a700192c684729fa000 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 23 Dec 2024 12:49:45 -0500
Subject: [PATCH 4/4] docs(datetime): update angular to standalone

---
 .../angular/example_component_ts.md           |  6 +++++-
 .../callback/angular/example_component_ts.md  |  2 +-
 .../angular/example_component_ts.md           |  5 +++--
 .../angular/example_component_ts.md           | 12 +++++++++++
 .../global-theming/angular/global_css.md      | 20 +++++++++----------
 .../datetime/styling/global-theming/index.md  |  2 ++
 .../v7/datetime/theming/angular/global_css.md | 20 +++++++++----------
 .../callback/angular/example_component_ts.md  |  2 +-
 .../angular/example_component_ts.md           |  5 +++--
 .../angular/example_component_ts.md           | 12 +++++++++++
 .../datetime/styling/global-theming/index.md  |  2 ++
 11 files changed, 61 insertions(+), 27 deletions(-)
 create mode 100644 static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md
 create mode 100644 static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md

diff --git a/static/usage/v7/datetime/format-options/angular/example_component_ts.md b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
index 64d541cb04e..d762802859f 100644
--- a/static/usage/v7/datetime/format-options/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
@@ -1,5 +1,5 @@
 ```ts
-import { Component } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
@@ -7,6 +7,10 @@ import { IonDatetime } from '@ionic/angular/standalone';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonDatetime],
+  // This schema is used to bypass an issue in Ionic Framework v7
+  // where formatOptions is not exported. Upgrade to Ionic
+  // Framework 8.1.1 or later to remove this workaround.
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index 59f7e502e55..b877e31c7e5 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -9,7 +9,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
   imports: [IonDatetime],
 })
 export class ExampleComponent {
-  highlightedDates = (isoString) => {
+  highlightedDates = (isoString: string) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
index 0783c6abc64..20df0e860fc 100644
--- a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,6 +1,7 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { IonDatetime } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -10,10 +11,10 @@ import { IonDatetime } from '@ionic/angular/standalone';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
-  imports: [IonDatetime],
+  imports: [IonDatetime, FormsModule],
 })
 export class ExampleComponent implements OnInit {
-  public datetime;
+  public datetime!: string;
 
   ngOnInit() {
     const date = new Date();
diff --git a/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..64d541cb04e
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
index 4ec3d3ecdf9..08a64bf203e 100644
--- a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
+++ b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
@@ -1,19 +1,19 @@
 ```css
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
 
 :root {
   --ion-color-rose: #831843;
diff --git a/static/usage/v7/datetime/styling/global-theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.md
index f8824304f07..d566af6e990 100644
--- a/static/usage/v7/datetime/styling/global-theming/index.md
+++ b/static/usage/v7/datetime/styling/global-theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,6 +26,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md
index 4ec3d3ecdf9..08a64bf203e 100644
--- a/static/usage/v7/datetime/theming/angular/global_css.md
+++ b/static/usage/v7/datetime/theming/angular/global_css.md
@@ -1,19 +1,19 @@
 ```css
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
 
 :root {
   --ion-color-rose: #831843;
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
index 59f7e502e55..b877e31c7e5 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -9,7 +9,7 @@ import { IonDatetime } from '@ionic/angular/standalone';
   imports: [IonDatetime],
 })
 export class ExampleComponent {
-  highlightedDates = (isoString) => {
+  highlightedDates = (isoString: string) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
index 0783c6abc64..20df0e860fc 100644
--- a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,6 +1,7 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { IonDatetime } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -10,10 +11,10 @@ import { IonDatetime } from '@ionic/angular/standalone';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
-  imports: [IonDatetime],
+  imports: [IonDatetime, FormsModule],
 })
 export class ExampleComponent implements OnInit {
-  public datetime;
+  public datetime!: string;
 
   ngOnInit() {
     const date = new Date();
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..64d541cb04e
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md
index f87d6e8fad5..a8cc488ac3e 100644
--- a/static/usage/v8/datetime/styling/global-theming/index.md
+++ b/static/usage/v8/datetime/styling/global-theming/index.md
@@ -9,6 +9,7 @@ import vue_example from './vue/example_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';
 
 import variables_css from './theme/variables_css.md';
 
@@ -39,6 +40,7 @@ import variables_css from './theme/variables_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,
         'src/theme/variables.css': variables_css,
       },
     },