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

---
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/basic/multiple-selection/index.md  | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../v7/select/basic/single-selection/index.md | 16 +++++++--
 .../angular/example_component_html.md         | 23 ++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/customization/button-text/index.md | 16 +++++++--
 .../angular/example_component_html.md         | 17 +++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../custom-toggle-icons/index.md              | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../fill/angular/example_component_html.md    | 15 ++++++++
 .../fill/angular/example_component_ts.md      | 11 ++++++
 static/usage/v7/select/fill/index.md          | 16 +++++++--
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/interfaces/action-sheet/index.md   | 16 +++++++--
 .../popover/angular/example_component_html.md | 11 ++++++
 .../popover/angular/example_component_ts.md   | 11 ++++++
 .../v7/select/interfaces/popover/index.md     | 16 +++++++--
 .../justify/angular/example_component_html.md | 23 ++++++++++++
 .../justify/angular/example_component_ts.md   | 11 ++++++
 static/usage/v7/select/justify/index.md       | 16 +++++++--
 .../angular/example_component_html.md         | 35 +++++++++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../usage/v7/select/label-placement/index.md  | 16 +++++++--
 .../angular/example_component_html.md         | 12 +++++++
 .../angular/example_component_ts.md           | 11 ++++++
 static/usage/v7/select/label-slot/index.md    | 16 +++++++--
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../usage/v7/select/no-visible-label/index.md | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../typeahead/angular/example_component_ts.md |  2 ++
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/basic/multiple-selection/index.md  | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../v8/select/basic/single-selection/index.md | 16 +++++++--
 .../angular/example_component_html.md         | 23 ++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/customization/button-text/index.md | 16 +++++++--
 .../angular/example_component_html.md         | 17 +++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../custom-toggle-icons/index.md              | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../fill/angular/example_component_html.md    | 15 ++++++++
 .../fill/angular/example_component_ts.md      | 11 ++++++
 static/usage/v8/select/fill/index.md          | 16 +++++++--
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../select/interfaces/action-sheet/index.md   | 16 +++++++--
 .../modal/angular/example_component_html.md   | 11 ++++++
 .../modal/angular/example_component_ts.md     | 11 ++++++
 .../usage/v8/select/interfaces/modal/index.md | 16 +++++++--
 .../popover/angular/example_component_html.md | 11 ++++++
 .../popover/angular/example_component_ts.md   | 11 ++++++
 .../v8/select/interfaces/popover/index.md     | 16 +++++++--
 .../justify/angular/example_component_html.md | 23 ++++++++++++
 .../justify/angular/example_component_ts.md   | 11 ++++++
 static/usage/v8/select/justify/index.md       | 16 +++++++--
 .../angular/example_component_html.md         | 35 +++++++++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../usage/v8/select/label-placement/index.md  | 16 +++++++--
 .../angular/example_component_html.md         | 12 +++++++
 .../angular/example_component_ts.md           | 11 ++++++
 static/usage/v8/select/label-slot/index.md    | 16 +++++++--
 .../angular/example_component_html.md         | 11 ++++++
 .../angular/example_component_ts.md           | 11 ++++++
 .../usage/v8/select/no-visible-label/index.md | 16 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../typeahead/angular/example_component_ts.md |  2 ++
 85 files changed, 978 insertions(+), 46 deletions(-)
 create mode 100644 static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/basic/single-selection/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/button-text/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/button-text/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/fill/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/fill/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/interfaces/popover/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/justify/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/justify/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/label-slot/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/label-slot/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/no-visible-label/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/no-visible-label/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/basic/single-selection/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/customization/button-text/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/customization/button-text/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/fill/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/fill/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/interfaces/modal/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/interfaces/popover/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/justify/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/justify/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/label-slot/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/label-slot/angular/example_component_ts.md
 create mode 100644 static/usage/v8/select/no-visible-label/angular/example_component_html.md
 create mode 100644 static/usage/v8/select/no-visible-label/angular/example_component_ts.md

diff --git a/static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..e65d1ace014
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" [multiple]="true">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.md
index 2523a47bcc6..36f20a19ee2 100644
--- a/static/usage/v7/select/basic/multiple-selection/index.md
+++ b/static/usage/v7/select/basic/multiple-selection/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="300px"
-  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/select/basic/multiple-selection/demo.html"
 />
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
index fb51c040a2f..bed34e462f2 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   handleChange(e) {
diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_html.md b/static/usage/v7/select/basic/single-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..9c587d71a67
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="fruit" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md
index 1fc60d79fe6..22f6b1f7708 100644
--- a/static/usage/v7/select/basic/single-selection/index.md
+++ b/static/usage/v7/select/basic/single-selection/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="300px"
-  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/select/basic/single-selection/demo.html"
 />
diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_html.md b/static/usage/v7/select/customization/button-text/angular/example_component_html.md
new file mode 100644
index 00000000000..3d1ab2ab3a1
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Alert Interface" placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-select
+      label="Action Sheet Interface"
+      interface="action-sheet"
+      placeholder="Select fruit"
+      cancelText="Cancel Choice"
+    >
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md
index 9e1a07063f8..c5a6fc0923c 100644
--- a/static/usage/v7/select/customization/button-text/index.md
+++ b/static/usage/v7/select/customization/button-text/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="350px"
-  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/select/customization/button-text/demo.html"
 />
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md
new file mode 100644
index 00000000000..429435daa6a
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      interface="popover"
+      toggleIcon="add"
+      expandedIcon="remove"
+      aria-label="fruit"
+      placeholder="Select fruit"
+    >
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md
index 0617a54da77..86f22e705ff 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/index.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/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="400px"
-  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/select/customization/custom-toggle-icons/demo.html"
 />
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
index 4db53a836a9..efa11c163f9 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
index c3f34d0adaf..7198ca40550 100644
--- a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
index 4db53a836a9..1b377b77218 100644
--- a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/select/fill/angular/example_component_html.md b/static/usage/v7/select/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..fcfe25bfe2c
--- /dev/null
+++ b/static/usage/v7/select/fill/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-select label="Solid select" label-placement="floating" fill="solid">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+
+<br />
+
+<ion-select label="Outline select" label-placement="floating" fill="outline">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+```
diff --git a/static/usage/v7/select/fill/angular/example_component_ts.md b/static/usage/v7/select/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..d2dcc8d7556
--- /dev/null
+++ b/static/usage/v7/select/fill/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md
index 393a8af448a..16a28199741 100644
--- a/static/usage/v7/select/fill/index.md
+++ b/static/usage/v7/select/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/fill/demo.html"
   size="300px"
   mode="md"
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md
new file mode 100644
index 00000000000..f8d864e3a7c
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="action-sheet" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/index.md b/static/usage/v7/select/interfaces/action-sheet/index.md
index 1dc5472394e..b0f69a4a49a 100644
--- a/static/usage/v7/select/interfaces/action-sheet/index.md
+++ b/static/usage/v7/select/interfaces/action-sheet/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/select/interfaces/action-sheet/demo.html"
 />
diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_html.md b/static/usage/v7/select/interfaces/popover/angular/example_component_html.md
new file mode 100644
index 00000000000..fe01597afa5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md
index ae4fa7b7521..4519e559ec0 100644
--- a/static/usage/v7/select/interfaces/popover/index.md
+++ b/static/usage/v7/select/interfaces/popover/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="400px"
-  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/select/interfaces/popover/demo.html"
 />
diff --git a/static/usage/v7/select/justify/angular/example_component_html.md b/static/usage/v7/select/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v7/select/justify/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-item>
+  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="end" label="End" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+```
diff --git a/static/usage/v7/select/justify/angular/example_component_ts.md b/static/usage/v7/select/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..a238c8538f6
--- /dev/null
+++ b/static/usage/v7/select/justify/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md
index 17356a84665..1142c6f8dc0 100644
--- a/static/usage/v7/select/justify/index.md
+++ b/static/usage/v7/select/justify/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/justify/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/label-placement/angular/example_component_html.md b/static/usage/v7/select/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v7/select/label-placement/angular/example_component_html.md
@@ -0,0 +1,35 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Default label" placeholder="Favorite Fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Stacked label" label-placement="stacked">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Floating label" label-placement="floating">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/label-placement/angular/example_component_ts.md b/static/usage/v7/select/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md
index b0464726fb4..ceeb3cf6653 100644
--- a/static/usage/v7/select/label-placement/index.md
+++ b/static/usage/v7/select/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/label-slot/angular/example_component_html.md b/static/usage/v7/select/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..93790d050e2
--- /dev/null
+++ b/static/usage/v7/select/label-slot/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select a Fruit">
+      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/label-slot/angular/example_component_ts.md b/static/usage/v7/select/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..4fc2b05baa7
--- /dev/null
+++ b/static/usage/v7/select/label-slot/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md
index 1b25e6b83f6..cefb2b96fdc 100644
--- a/static/usage/v7/select/label-slot/index.md
+++ b/static/usage/v7/select/label-slot/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/label-slot/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_html.md b/static/usage/v7/select/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..1c14ab03008
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Favorite Fruit" value="apple">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md
index 214708de577..2fc29ce2679 100644
--- a/static/usage/v7/select/no-visible-label/index.md
+++ b/static/usage/v7/select/no-visible-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"
-  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/select/no-visible-label/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index c33570deec9..2ebfa25a027 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   foods = [
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 20d05fa847f..25f22bc043d 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   foods = [
diff --git a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
index f7717b55dc1..4cdf6bc2b32 100644
--- a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, leaf } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
index ded6fa60b0f..ba5031eee6a 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
 import { IonModal } from '@ionic/angular';
 import { Item } from './types';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
diff --git a/static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..e65d1ace014
--- /dev/null
+++ b/static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" [multiple]="true">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/basic/multiple-selection/index.md b/static/usage/v8/select/basic/multiple-selection/index.md
index 7bf4cf9e40d..b39d998d9d9 100644
--- a/static/usage/v8/select/basic/multiple-selection/index.md
+++ b/static/usage/v8/select/basic/multiple-selection/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="300px"
-  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/select/basic/multiple-selection/demo.html"
 />
diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
index fb51c040a2f..bed34e462f2 100644
--- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   handleChange(e) {
diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_html.md b/static/usage/v8/select/basic/single-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..9c587d71a67
--- /dev/null
+++ b/static/usage/v8/select/basic/single-selection/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="fruit" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/basic/single-selection/index.md b/static/usage/v8/select/basic/single-selection/index.md
index 820ab1cccf2..14036fc96ab 100644
--- a/static/usage/v8/select/basic/single-selection/index.md
+++ b/static/usage/v8/select/basic/single-selection/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="300px"
-  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/select/basic/single-selection/demo.html"
 />
diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_html.md b/static/usage/v8/select/customization/button-text/angular/example_component_html.md
new file mode 100644
index 00000000000..3d1ab2ab3a1
--- /dev/null
+++ b/static/usage/v8/select/customization/button-text/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Alert Interface" placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-select
+      label="Action Sheet Interface"
+      interface="action-sheet"
+      placeholder="Select fruit"
+      cancelText="Cancel Choice"
+    >
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/customization/button-text/index.md b/static/usage/v8/select/customization/button-text/index.md
index cc9d2417caf..be21f778b8a 100644
--- a/static/usage/v8/select/customization/button-text/index.md
+++ b/static/usage/v8/select/customization/button-text/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="350px"
-  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/select/customization/button-text/demo.html"
 />
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md
new file mode 100644
index 00000000000..429435daa6a
--- /dev/null
+++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select
+      interface="popover"
+      toggleIcon="add"
+      expandedIcon="remove"
+      aria-label="fruit"
+      placeholder="Select fruit"
+    >
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/index.md b/static/usage/v8/select/customization/custom-toggle-icons/index.md
index 228945fc15c..90b1f857c2e 100644
--- a/static/usage/v8/select/customization/custom-toggle-icons/index.md
+++ b/static/usage/v8/select/customization/custom-toggle-icons/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="400px"
-  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/select/customization/custom-toggle-icons/demo.html"
 />
diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
index 4db53a836a9..efa11c163f9 100644
--- a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
index 5f8bc6929ca..fa4fa6e6446 100644
--- a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
index 4db53a836a9..1b377b77218 100644
--- a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/select/fill/angular/example_component_html.md b/static/usage/v8/select/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..fcfe25bfe2c
--- /dev/null
+++ b/static/usage/v8/select/fill/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-select label="Solid select" label-placement="floating" fill="solid">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+
+<br />
+
+<ion-select label="Outline select" label-placement="floating" fill="outline">
+  <ion-select-option value="apple">Apple</ion-select-option>
+  <ion-select-option value="banana">Banana</ion-select-option>
+  <ion-select-option value="orange">Orange</ion-select-option>
+</ion-select>
+```
diff --git a/static/usage/v8/select/fill/angular/example_component_ts.md b/static/usage/v8/select/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..d2dcc8d7556
--- /dev/null
+++ b/static/usage/v8/select/fill/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/fill/index.md b/static/usage/v8/select/fill/index.md
index 9666f49d0d8..edf11822c4f 100644
--- a/static/usage/v8/select/fill/index.md
+++ b/static/usage/v8/select/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/fill/demo.html"
   size="300px"
   mode="md"
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md
new file mode 100644
index 00000000000..f8d864e3a7c
--- /dev/null
+++ b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="action-sheet" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/action-sheet/index.md b/static/usage/v8/select/interfaces/action-sheet/index.md
index 8b83f6103ac..ccab87716fe 100644
--- a/static/usage/v8/select/interfaces/action-sheet/index.md
+++ b/static/usage/v8/select/interfaces/action-sheet/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/select/interfaces/action-sheet/demo.html"
 />
diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_html.md b/static/usage/v8/select/interfaces/modal/angular/example_component_html.md
new file mode 100644
index 00000000000..ac93580e0c3
--- /dev/null
+++ b/static/usage/v8/select/interfaces/modal/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/modal/index.md b/static/usage/v8/select/interfaces/modal/index.md
index 9f79261c280..4920aab389a 100644
--- a/static/usage/v8/select/interfaces/modal/index.md
+++ b/static/usage/v8/select/interfaces/modal/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="400px"
-  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/select/interfaces/modal/demo.html"
 />
diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_html.md b/static/usage/v8/select/interfaces/popover/angular/example_component_html.md
new file mode 100644
index 00000000000..fe01597afa5
--- /dev/null
+++ b/static/usage/v8/select/interfaces/popover/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/popover/index.md b/static/usage/v8/select/interfaces/popover/index.md
index b33bd96e53b..167e36dee4b 100644
--- a/static/usage/v8/select/interfaces/popover/index.md
+++ b/static/usage/v8/select/interfaces/popover/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="400px"
-  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/select/interfaces/popover/demo.html"
 />
diff --git a/static/usage/v8/select/justify/angular/example_component_html.md b/static/usage/v8/select/justify/angular/example_component_html.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v8/select/justify/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-item>
+  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="end" label="End" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+<ion-item>
+  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
+    <ion-select-option value="apple">Apple</ion-select-option>
+    <ion-select-option value="banana">Banana</ion-select-option>
+    <ion-select-option value="orange">Orange</ion-select-option>
+  </ion-select>
+</ion-item>
+```
diff --git a/static/usage/v8/select/justify/angular/example_component_ts.md b/static/usage/v8/select/justify/angular/example_component_ts.md
new file mode 100644
index 00000000000..a238c8538f6
--- /dev/null
+++ b/static/usage/v8/select/justify/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/justify/index.md b/static/usage/v8/select/justify/index.md
index 751948aa47c..b1be55c0ba0 100644
--- a/static/usage/v8/select/justify/index.md
+++ b/static/usage/v8/select/justify/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/justify/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/label-placement/angular/example_component_html.md b/static/usage/v8/select/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v8/select/label-placement/angular/example_component_html.md
@@ -0,0 +1,35 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select label="Default label" placeholder="Favorite Fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Stacked label" label-placement="stacked">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-select label="Floating label" label-placement="floating">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/label-placement/angular/example_component_ts.md b/static/usage/v8/select/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/label-placement/index.md b/static/usage/v8/select/label-placement/index.md
index 694b6b3f4ea..49800fb0536 100644
--- a/static/usage/v8/select/label-placement/index.md
+++ b/static/usage/v8/select/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/label-slot/angular/example_component_html.md b/static/usage/v8/select/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..93790d050e2
--- /dev/null
+++ b/static/usage/v8/select/label-slot/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select placeholder="Select a Fruit">
+      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/label-slot/angular/example_component_ts.md b/static/usage/v8/select/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..4fc2b05baa7
--- /dev/null
+++ b/static/usage/v8/select/label-slot/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/label-slot/index.md b/static/usage/v8/select/label-slot/index.md
index c7d0382d140..a9269a7e266 100644
--- a/static/usage/v8/select/label-slot/index.md
+++ b/static/usage/v8/select/label-slot/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/label-slot/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_html.md b/static/usage/v8/select/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..1c14ab03008
--- /dev/null
+++ b/static/usage/v8/select/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Favorite Fruit" value="apple">
+      <ion-select-option value="apple">Apple</ion-select-option>
+      <ion-select-option value="banana">Banana</ion-select-option>
+      <ion-select-option value="orange">Orange</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1687d8c97b
--- /dev/null
+++ b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/no-visible-label/index.md b/static/usage/v8/select/no-visible-label/index.md
index f09ead1ad1a..09dea4d4c00 100644
--- a/static/usage/v8/select/no-visible-label/index.md
+++ b/static/usage/v8/select/no-visible-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"
-  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/select/no-visible-label/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index c33570deec9..2ebfa25a027 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   foods = [
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 20d05fa847f..25f22bc043d 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   foods = [
diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
index f7717b55dc1..4cdf6bc2b32 100644
--- a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, leaf } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md
index ded6fa60b0f..ba5031eee6a 100644
--- a/static/usage/v8/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
 import { IonModal } from '@ionic/angular';
 import { Item } from './types';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;

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

---
 .../basic/multiple-selection/angular/example_component_ts.md     | 1 +
 .../responding-to-interaction/angular/example_component_ts.md    | 1 +
 .../basic/single-selection/angular/example_component_ts.md       | 1 +
 .../customization/button-text/angular/example_component_ts.md    | 1 +
 .../custom-toggle-icons/angular/example_component_ts.md          | 1 +
 .../interface-options/angular/example_component_ts.md            | 1 +
 static/usage/v7/select/fill/angular/example_component_ts.md      | 1 +
 .../interfaces/action-sheet/angular/example_component_ts.md      | 1 +
 .../v7/select/interfaces/popover/angular/example_component_ts.md | 1 +
 static/usage/v7/select/justify/angular/example_component_ts.md   | 1 +
 .../v7/select/label-placement/angular/example_component_ts.md    | 1 +
 .../usage/v7/select/label-slot/angular/example_component_ts.md   | 1 +
 .../v7/select/no-visible-label/angular/example_component_ts.md   | 1 +
 .../multiple-selection/angular/example_component_ts.md           | 1 +
 .../using-comparewith/angular/example_component_ts.md            | 1 +
 static/usage/v7/select/typeahead/angular/example_component_ts.md | 1 +
 .../basic/multiple-selection/angular/example_component_ts.md     | 1 +
 .../responding-to-interaction/angular/example_component_ts.md    | 1 +
 .../basic/single-selection/angular/example_component_ts.md       | 1 +
 .../customization/button-text/angular/example_component_ts.md    | 1 +
 .../custom-toggle-icons/angular/example_component_ts.md          | 1 +
 .../interface-options/angular/example_component_ts.md            | 1 +
 static/usage/v8/select/fill/angular/example_component_ts.md      | 1 +
 .../interfaces/action-sheet/angular/example_component_ts.md      | 1 +
 .../v8/select/interfaces/modal/angular/example_component_ts.md   | 1 +
 .../v8/select/interfaces/popover/angular/example_component_ts.md | 1 +
 static/usage/v8/select/justify/angular/example_component_ts.md   | 1 +
 .../v8/select/label-placement/angular/example_component_ts.md    | 1 +
 .../usage/v8/select/label-slot/angular/example_component_ts.md   | 1 +
 .../v8/select/no-visible-label/angular/example_component_ts.md   | 1 +
 .../multiple-selection/angular/example_component_ts.md           | 1 +
 .../using-comparewith/angular/example_component_ts.md            | 1 +
 static/usage/v8/select/typeahead/angular/example_component_ts.md | 1 +
 33 files changed, 33 insertions(+)

diff --git a/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
index bed34e462f2..0d5d80441f6 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
index 7198ca40550..2ab0bd1d62a 100644
--- a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/select/fill/angular/example_component_ts.md b/static/usage/v7/select/fill/angular/example_component_ts.md
index d2dcc8d7556..1b377b77218 100644
--- a/static/usage/v7/select/fill/angular/example_component_ts.md
+++ b/static/usage/v7/select/fill/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
+++ b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
+++ b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/justify/angular/example_component_ts.md b/static/usage/v7/select/justify/angular/example_component_ts.md
index a238c8538f6..edeb5fb2170 100644
--- a/static/usage/v7/select/justify/angular/example_component_ts.md
+++ b/static/usage/v7/select/justify/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/label-placement/angular/example_component_ts.md b/static/usage/v7/select/label-placement/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/label-placement/angular/example_component_ts.md
+++ b/static/usage/v7/select/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/label-slot/angular/example_component_ts.md b/static/usage/v7/select/label-slot/angular/example_component_ts.md
index 4fc2b05baa7..a8cb5c497c5 100644
--- a/static/usage/v7/select/label-slot/angular/example_component_ts.md
+++ b/static/usage/v7/select/label-slot/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/an
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
+++ b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 2ebfa25a027..1bf5fb489f9 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 25f22bc043d..f387b7f9858 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
index ba5031eee6a..ce3a4118578 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { Item } from './types';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
index bed34e462f2..0d5d80441f6 100644
--- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
index fa4fa6e6446..ad2e2a9b6bb 100644
--- a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/select/fill/angular/example_component_ts.md b/static/usage/v8/select/fill/angular/example_component_ts.md
index d2dcc8d7556..1b377b77218 100644
--- a/static/usage/v8/select/fill/angular/example_component_ts.md
+++ b/static/usage/v8/select/fill/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
+++ b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
+++ b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
+++ b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/justify/angular/example_component_ts.md b/static/usage/v8/select/justify/angular/example_component_ts.md
index a238c8538f6..edeb5fb2170 100644
--- a/static/usage/v8/select/justify/angular/example_component_ts.md
+++ b/static/usage/v8/select/justify/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/label-placement/angular/example_component_ts.md b/static/usage/v8/select/label-placement/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/label-placement/angular/example_component_ts.md
+++ b/static/usage/v8/select/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/label-slot/angular/example_component_ts.md b/static/usage/v8/select/label-slot/angular/example_component_ts.md
index 4fc2b05baa7..a8cb5c497c5 100644
--- a/static/usage/v8/select/label-slot/angular/example_component_ts.md
+++ b/static/usage/v8/select/label-slot/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/an
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
index f1687d8c97b..efa11c163f9 100644
--- a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
+++ b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 2ebfa25a027..1bf5fb489f9 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 25f22bc043d..f387b7f9858 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md
index ba5031eee6a..ce3a4118578 100644
--- a/static/usage/v8/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { Item } from './types';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
 })
 export class ExampleComponent {

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

---
 .../basic/multiple-selection/angular.md       | 11 -----
 .../angular/example_component_ts.md           |  4 +-
 .../select/basic/single-selection/angular.md  | 11 -----
 .../customization/button-text/angular.md      | 23 ---------
 .../custom-toggle-icons/angular.md            | 17 -------
 .../angular/example_component_ts.md           | 14 +++++-
 .../angular/example_component_ts.md           | 14 +++++-
 static/usage/v7/select/fill/angular.md        | 15 ------
 .../select/interfaces/action-sheet/angular.md | 11 -----
 .../v7/select/interfaces/popover/angular.md   | 11 -----
 static/usage/v7/select/justify/angular.md     | 23 ---------
 .../v7/select/label-placement/angular.md      | 35 --------------
 static/usage/v7/select/label-slot/angular.md  | 12 -----
 .../v7/select/no-visible-label/angular.md     | 11 -----
 .../angular/example_component_html.md         |  4 +-
 .../angular/example_component_ts.md           | 15 ++++--
 .../angular/example_component_html.md         |  4 +-
 .../angular/example_component_ts.md           | 15 ++++--
 .../select/typeahead/angular/app_module_ts.md | 19 --------
 .../typeahead/angular/example_component_ts.md | 19 ++++++--
 .../angular/typeahead_component_html.md}      |  4 +-
 ...ponent_ts.md => typeahead_component_ts.md} | 47 ++++++++++++++-----
 static/usage/v7/select/typeahead/index.md     | 10 ++--
 .../basic/multiple-selection/angular.md       | 11 -----
 .../angular/example_component_ts.md           |  4 +-
 .../select/basic/single-selection/angular.md  | 11 -----
 .../customization/button-text/angular.md      | 23 ---------
 .../custom-toggle-icons/angular.md            | 17 -------
 .../angular/example_component_ts.md           | 14 +++++-
 .../angular/example_component_ts.md           | 14 +++++-
 static/usage/v8/select/fill/angular.md        | 15 ------
 .../select/interfaces/action-sheet/angular.md | 11 -----
 .../v8/select/interfaces/modal/angular.md     | 11 -----
 .../v8/select/interfaces/popover/angular.md   | 11 -----
 static/usage/v8/select/justify/angular.md     | 23 ---------
 .../v8/select/label-placement/angular.md      | 35 --------------
 static/usage/v8/select/label-slot/angular.md  | 12 -----
 .../v8/select/no-visible-label/angular.md     | 11 -----
 .../angular/example_component_html.md         |  4 +-
 .../angular/example_component_ts.md           | 15 ++++--
 .../angular/example_component_html.md         |  4 +-
 .../angular/example_component_ts.md           | 15 ++++--
 .../select/typeahead/angular/app_module_ts.md | 19 --------
 .../typeahead/angular/example_component_ts.md | 19 ++++++--
 .../angular/typeahead_component_html.md}      |  4 +-
 ...ponent_ts.md => typeahead_component_ts.md} | 47 ++++++++++++++-----
 static/usage/v8/select/typeahead/index.md     | 10 ++--
 47 files changed, 222 insertions(+), 487 deletions(-)
 delete mode 100644 static/usage/v7/select/basic/multiple-selection/angular.md
 delete mode 100644 static/usage/v7/select/basic/single-selection/angular.md
 delete mode 100644 static/usage/v7/select/customization/button-text/angular.md
 delete mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular.md
 delete mode 100644 static/usage/v7/select/fill/angular.md
 delete mode 100644 static/usage/v7/select/interfaces/action-sheet/angular.md
 delete mode 100644 static/usage/v7/select/interfaces/popover/angular.md
 delete mode 100644 static/usage/v7/select/justify/angular.md
 delete mode 100644 static/usage/v7/select/label-placement/angular.md
 delete mode 100644 static/usage/v7/select/label-slot/angular.md
 delete mode 100644 static/usage/v7/select/no-visible-label/angular.md
 delete mode 100644 static/usage/v7/select/typeahead/angular/app_module_ts.md
 rename static/usage/{v8/select/typeahead/angular/modal-example_component_html.md => v7/select/typeahead/angular/typeahead_component_html.md} (90%)
 rename static/usage/v7/select/typeahead/angular/{modal-example_component_ts.md => typeahead_component_ts.md} (67%)
 delete mode 100644 static/usage/v8/select/basic/multiple-selection/angular.md
 delete mode 100644 static/usage/v8/select/basic/single-selection/angular.md
 delete mode 100644 static/usage/v8/select/customization/button-text/angular.md
 delete mode 100644 static/usage/v8/select/customization/custom-toggle-icons/angular.md
 delete mode 100644 static/usage/v8/select/fill/angular.md
 delete mode 100644 static/usage/v8/select/interfaces/action-sheet/angular.md
 delete mode 100644 static/usage/v8/select/interfaces/modal/angular.md
 delete mode 100644 static/usage/v8/select/interfaces/popover/angular.md
 delete mode 100644 static/usage/v8/select/justify/angular.md
 delete mode 100644 static/usage/v8/select/label-placement/angular.md
 delete mode 100644 static/usage/v8/select/label-slot/angular.md
 delete mode 100644 static/usage/v8/select/no-visible-label/angular.md
 delete mode 100644 static/usage/v8/select/typeahead/angular/app_module_ts.md
 rename static/usage/{v7/select/typeahead/angular/modal-example_component_html.md => v8/select/typeahead/angular/typeahead_component_html.md} (90%)
 rename static/usage/v8/select/typeahead/angular/{modal-example_component_ts.md => typeahead_component_ts.md} (67%)

diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular.md
deleted file mode 100644
index e65d1ace014..00000000000
--- a/static/usage/v7/select/basic/multiple-selection/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" [multiple]="true">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
index 0d5d80441f6..fb988662d59 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -9,8 +9,8 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  handleChange(e) {
-    console.log('ionChange fired with value: ' + e.detail.value);
+  handleChange(event: CustomEvent) {
+    console.log('ionChange fired with value: ' + event.detail.value);
   }
 
   handleCancel() {
diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular.md
deleted file mode 100644
index 9c587d71a67..00000000000
--- a/static/usage/v7/select/basic/single-selection/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="fruit" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular.md
deleted file mode 100644
index 3d1ab2ab3a1..00000000000
--- a/static/usage/v7/select/customization/button-text/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select label="Alert Interface" placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-  <ion-item>
-    <ion-select
-      label="Action Sheet Interface"
-      interface="action-sheet"
-      placeholder="Select fruit"
-      cancelText="Cancel Choice"
-    >
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
deleted file mode 100644
index 429435daa6a..00000000000
--- a/static/usage/v7/select/customization/custom-toggle-icons/angular.md
+++ /dev/null
@@ -1,17 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select
-      interface="popover"
-      toggleIcon="add"
-      expandedIcon="remove"
-      aria-label="fruit"
-      placeholder="Select fruit"
-    >
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
index efa11c163f9..61e221a24b6 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { add, remove } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ add, remove });
+  }
+}
 ```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
index efa11c163f9..d85d4166365 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { caretDownSharp } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDownSharp });
+  }
+}
 ```
diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular.md
deleted file mode 100644
index fcfe25bfe2c..00000000000
--- a/static/usage/v7/select/fill/angular.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```html
-<ion-select label="Solid select" label-placement="floating" fill="solid">
-  <ion-select-option value="apple">Apple</ion-select-option>
-  <ion-select-option value="banana">Banana</ion-select-option>
-  <ion-select-option value="orange">Orange</ion-select-option>
-</ion-select>
-
-<br />
-
-<ion-select label="Outline select" label-placement="floating" fill="outline">
-  <ion-select-option value="apple">Apple</ion-select-option>
-  <ion-select-option value="banana">Banana</ion-select-option>
-  <ion-select-option value="orange">Orange</ion-select-option>
-</ion-select>
-```
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular.md b/static/usage/v7/select/interfaces/action-sheet/angular.md
deleted file mode 100644
index f8d864e3a7c..00000000000
--- a/static/usage/v7/select/interfaces/action-sheet/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" interface="action-sheet" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular.md
deleted file mode 100644
index fe01597afa5..00000000000
--- a/static/usage/v7/select/interfaces/popover/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/justify/angular.md b/static/usage/v7/select/justify/angular.md
deleted file mode 100644
index a3951bb1a59..00000000000
--- a/static/usage/v7/select/justify/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-item>
-  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-<ion-item>
-  <ion-select justify="end" label="End" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-<ion-item>
-  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-```
diff --git a/static/usage/v7/select/label-placement/angular.md b/static/usage/v7/select/label-placement/angular.md
deleted file mode 100644
index 063c257914d..00000000000
--- a/static/usage/v7/select/label-placement/angular.md
+++ /dev/null
@@ -1,35 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select label="Default label" placeholder="Favorite Fruit">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Stacked label" label-placement="stacked">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Floating label" label-placement="floating">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular.md
deleted file mode 100644
index 93790d050e2..00000000000
--- a/static/usage/v7/select/label-slot/angular.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select placeholder="Select a Fruit">
-      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular.md
deleted file mode 100644
index 1c14ab03008..00000000000
--- a/static/usage/v7/select/no-visible-label/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Favorite Fruit" value="apple">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
index af00be1957e..361cfbad1b8 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -8,7 +8,9 @@
       (ionChange)="handleChange($event)"
       [multiple]="true"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 1bf5fb489f9..976de91ea50 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -2,6 +2,12 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -9,7 +15,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -27,7 +33,7 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | Food[] | null): boolean {
     if (!o1 || !o2) {
       return o1 === o2;
     }
@@ -39,8 +45,9 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
index 7354647f224..808a9743cc2 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -7,7 +7,9 @@
       placeholder="Select food"
       (ionChange)="handleChange($event)"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index f387b7f9858..e984a6f6544 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -2,6 +2,12 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -9,7 +15,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -27,12 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | null): boolean {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md
deleted file mode 100644
index 0fa58037717..00000000000
--- a/static/usage/v7/select/typeahead/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { TypeaheadComponent } from './typeahead.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
index ce3a4118578..9276b8b13e5 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -1,14 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
 import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
-import { IonModal } from '@ionic/angular';
 import { Item } from './types';
 
+import { TypeaheadComponent } from './typeahead.component';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
@@ -44,15 +45,23 @@ export class ExampleComponent {
     { text: 'Strawberry', value: 'strawberry' },
   ];
 
-  private formatData(data: string[]) {
+  /**
+   * Formats the display text based on the selected fruits.
+   * @param data - Array of selected fruit values
+   * @returns A formatted string for display
+   */
+  private formatData(data: string[]): string {
     if (data.length === 1) {
       const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
-      return fruit.text;
+      return fruit ? fruit.text : '';
     }
-
     return `${data.length} items`;
   }
 
+  /**
+   * Handles fruit selection changes and updates the selected fruits and text.
+   * @param fruits - Array of selected fruit values
+   */
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md
similarity index 90%
rename from static/usage/v8/select/typeahead/angular/modal-example_component_html.md
rename to static/usage/v7/select/typeahead/angular/typeahead_component_html.md
index 64da05a7a9d..ed147c64254 100644
--- a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md
@@ -16,11 +16,13 @@
 
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
-    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+    @for (item of filteredItems; track item.value) {
+    <ion-item>
       <ion-checkbox [value]="item.value" [checked]="isChecked(item.value)" (ionChange)="checkboxChange($event)"
         >{{ item.text }}</ion-checkbox
       >
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
similarity index 67%
rename from static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
rename to static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
index 9bd21f1b404..f9de32444d0 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
@@ -1,11 +1,37 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import type { OnInit } from '@angular/core';
+
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
 import { Item } from './types';
 
 @Component({
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
+  imports: [
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonList,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
@@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit {
     this.workingSelectedValues = [...this.selectedItems];
   }
 
-  trackItems(index: number, item: Item) {
-    return item.value;
-  }
-
   cancelChanges() {
     this.selectionCancel.emit();
   }
@@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev) {
-    this.filterList(ev.target.value);
+  searchbarInput(ev: Event) {
+    const inputElement = ev.target as HTMLInputElement;
+    this.filterList(inputElement.value);
   }
 
   /**
@@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit {
      * If no search query is defined,
      * return all options.
      */
-    if (searchQuery === undefined) {
+    if (searchQuery === undefined || searchQuery.trim() === '') {
       this.filteredItems = [...this.items];
     } else {
       /**
@@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      this.filteredItems = this.items.filter((item) => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      });
+      this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery));
     }
   }
 
-  isChecked(value: string) {
-    return this.workingSelectedValues.find((item) => item === value);
+  isChecked(value: string): boolean {
+    return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev) {
+  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
     const { checked, value } = ev.detail;
 
     if (checked) {
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
index e81d8b0aa56..86565f33705 100644
--- a/static/usage/v7/select/typeahead/index.md
+++ b/static/usage/v7/select/typeahead/index.md
@@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md';
 import vue_types_ts from './vue/vue_types_ts.md';
 import vue_typeahead_component from './vue/typeahead_component_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md';
-import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+import angular_typeahead_component_ts from './angular/typeahead_component_ts.md';
+import angular_typeahead_component_html from './angular/typeahead_component_html.md';
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
@@ -39,9 +38,8 @@ import angular_types_ts from './angular/angular_types_ts.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/typeahead.component.html': angular_modal_example_component_html,
-        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/typeahead.component.html': angular_typeahead_component_html,
+        'src/app/typeahead.component.ts': angular_typeahead_component_ts,
         'src/app/types.ts': angular_types_ts,
       },
     },
diff --git a/static/usage/v8/select/basic/multiple-selection/angular.md b/static/usage/v8/select/basic/multiple-selection/angular.md
deleted file mode 100644
index e65d1ace014..00000000000
--- a/static/usage/v8/select/basic/multiple-selection/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" [multiple]="true">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
index 0d5d80441f6..fb988662d59 100644
--- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -9,8 +9,8 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  handleChange(e) {
-    console.log('ionChange fired with value: ' + e.detail.value);
+  handleChange(event: CustomEvent) {
+    console.log('ionChange fired with value: ' + event.detail.value);
   }
 
   handleCancel() {
diff --git a/static/usage/v8/select/basic/single-selection/angular.md b/static/usage/v8/select/basic/single-selection/angular.md
deleted file mode 100644
index 9c587d71a67..00000000000
--- a/static/usage/v8/select/basic/single-selection/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="fruit" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/customization/button-text/angular.md b/static/usage/v8/select/customization/button-text/angular.md
deleted file mode 100644
index 3d1ab2ab3a1..00000000000
--- a/static/usage/v8/select/customization/button-text/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select label="Alert Interface" placeholder="Select fruit" okText="Choose Fruit" cancelText="Cancel Choice">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-  <ion-item>
-    <ion-select
-      label="Action Sheet Interface"
-      interface="action-sheet"
-      placeholder="Select fruit"
-      cancelText="Cancel Choice"
-    >
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular.md b/static/usage/v8/select/customization/custom-toggle-icons/angular.md
deleted file mode 100644
index 429435daa6a..00000000000
--- a/static/usage/v8/select/customization/custom-toggle-icons/angular.md
+++ /dev/null
@@ -1,17 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select
-      interface="popover"
-      toggleIcon="add"
-      expandedIcon="remove"
-      aria-label="fruit"
-      placeholder="Select fruit"
-    >
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
index efa11c163f9..61e221a24b6 100644
--- a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { add, remove } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ add, remove });
+  }
+}
 ```
diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
index efa11c163f9..d85d4166365 100644
--- a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { caretDownSharp } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDownSharp });
+  }
+}
 ```
diff --git a/static/usage/v8/select/fill/angular.md b/static/usage/v8/select/fill/angular.md
deleted file mode 100644
index fcfe25bfe2c..00000000000
--- a/static/usage/v8/select/fill/angular.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```html
-<ion-select label="Solid select" label-placement="floating" fill="solid">
-  <ion-select-option value="apple">Apple</ion-select-option>
-  <ion-select-option value="banana">Banana</ion-select-option>
-  <ion-select-option value="orange">Orange</ion-select-option>
-</ion-select>
-
-<br />
-
-<ion-select label="Outline select" label-placement="floating" fill="outline">
-  <ion-select-option value="apple">Apple</ion-select-option>
-  <ion-select-option value="banana">Banana</ion-select-option>
-  <ion-select-option value="orange">Orange</ion-select-option>
-</ion-select>
-```
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular.md b/static/usage/v8/select/interfaces/action-sheet/angular.md
deleted file mode 100644
index f8d864e3a7c..00000000000
--- a/static/usage/v8/select/interfaces/action-sheet/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" interface="action-sheet" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/interfaces/modal/angular.md b/static/usage/v8/select/interfaces/modal/angular.md
deleted file mode 100644
index ac93580e0c3..00000000000
--- a/static/usage/v8/select/interfaces/modal/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/interfaces/popover/angular.md b/static/usage/v8/select/interfaces/popover/angular.md
deleted file mode 100644
index fe01597afa5..00000000000
--- a/static/usage/v8/select/interfaces/popover/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
-      <ion-select-option value="apples">Apples</ion-select-option>
-      <ion-select-option value="oranges">Oranges</ion-select-option>
-      <ion-select-option value="bananas">Bananas</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/justify/angular.md b/static/usage/v8/select/justify/angular.md
deleted file mode 100644
index a3951bb1a59..00000000000
--- a/static/usage/v8/select/justify/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-item>
-  <ion-select justify="start" label="Start" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-<ion-item>
-  <ion-select justify="end" label="End" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-<ion-item>
-  <ion-select justify="space-between" label="Space Between" placeholder="Favorite fruit">
-    <ion-select-option value="apple">Apple</ion-select-option>
-    <ion-select-option value="banana">Banana</ion-select-option>
-    <ion-select-option value="orange">Orange</ion-select-option>
-  </ion-select>
-</ion-item>
-```
diff --git a/static/usage/v8/select/label-placement/angular.md b/static/usage/v8/select/label-placement/angular.md
deleted file mode 100644
index 063c257914d..00000000000
--- a/static/usage/v8/select/label-placement/angular.md
+++ /dev/null
@@ -1,35 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select label="Default label" placeholder="Favorite Fruit">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Stacked label" label-placement="stacked">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-select label="Floating label" label-placement="floating">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/label-slot/angular.md b/static/usage/v8/select/label-slot/angular.md
deleted file mode 100644
index 93790d050e2..00000000000
--- a/static/usage/v8/select/label-slot/angular.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select placeholder="Select a Fruit">
-      <div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/no-visible-label/angular.md b/static/usage/v8/select/no-visible-label/angular.md
deleted file mode 100644
index 1c14ab03008..00000000000
--- a/static/usage/v8/select/no-visible-label/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-select aria-label="Favorite Fruit" value="apple">
-      <ion-select-option value="apple">Apple</ion-select-option>
-      <ion-select-option value="banana">Banana</ion-select-option>
-      <ion-select-option value="orange">Orange</ion-select-option>
-    </ion-select>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
index af00be1957e..361cfbad1b8 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -8,7 +8,9 @@
       (ionChange)="handleChange($event)"
       [multiple]="true"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 1bf5fb489f9..976de91ea50 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -2,6 +2,12 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -9,7 +15,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -27,7 +33,7 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | Food[] | null): boolean {
     if (!o1 || !o2) {
       return o1 === o2;
     }
@@ -39,8 +45,9 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
index 7354647f224..808a9743cc2 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -7,7 +7,9 @@
       placeholder="Select food"
       (ionChange)="handleChange($event)"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index f387b7f9858..e984a6f6544 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -2,6 +2,12 @@
 import { Component } from '@angular/core';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -9,7 +15,7 @@ import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/sta
   imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -27,12 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | null): boolean {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v8/select/typeahead/angular/app_module_ts.md b/static/usage/v8/select/typeahead/angular/app_module_ts.md
deleted file mode 100644
index 0fa58037717..00000000000
--- a/static/usage/v8/select/typeahead/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { TypeaheadComponent } from './typeahead.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md
index ce3a4118578..9276b8b13e5 100644
--- a/static/usage/v8/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md
@@ -1,14 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
 import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
-import { IonModal } from '@ionic/angular';
 import { Item } from './types';
 
+import { TypeaheadComponent } from './typeahead.component';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonContent, IonItem, IonLabel, IonList, IonModal],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
@@ -44,15 +45,23 @@ export class ExampleComponent {
     { text: 'Strawberry', value: 'strawberry' },
   ];
 
-  private formatData(data: string[]) {
+  /**
+   * Formats the display text based on the selected fruits.
+   * @param data - Array of selected fruit values
+   * @returns A formatted string for display
+   */
+  private formatData(data: string[]): string {
     if (data.length === 1) {
       const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
-      return fruit.text;
+      return fruit ? fruit.text : '';
     }
-
     return `${data.length} items`;
   }
 
+  /**
+   * Handles fruit selection changes and updates the selected fruits and text.
+   * @param fruits - Array of selected fruit values
+   */
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md
similarity index 90%
rename from static/usage/v7/select/typeahead/angular/modal-example_component_html.md
rename to static/usage/v8/select/typeahead/angular/typeahead_component_html.md
index 64da05a7a9d..ed147c64254 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md
@@ -16,11 +16,13 @@
 
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
-    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+    @for (item of filteredItems; track item.value) {
+    <ion-item>
       <ion-checkbox [value]="item.value" [checked]="isChecked(item.value)" (ionChange)="checkboxChange($event)"
         >{{ item.text }}</ion-checkbox
       >
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
similarity index 67%
rename from static/usage/v8/select/typeahead/angular/modal-example_component_ts.md
rename to static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
index 9bd21f1b404..f9de32444d0 100644
--- a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
@@ -1,11 +1,37 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import type { OnInit } from '@angular/core';
+
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
 import { Item } from './types';
 
 @Component({
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
+  imports: [
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonList,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
@@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit {
     this.workingSelectedValues = [...this.selectedItems];
   }
 
-  trackItems(index: number, item: Item) {
-    return item.value;
-  }
-
   cancelChanges() {
     this.selectionCancel.emit();
   }
@@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev) {
-    this.filterList(ev.target.value);
+  searchbarInput(ev: Event) {
+    const inputElement = ev.target as HTMLInputElement;
+    this.filterList(inputElement.value);
   }
 
   /**
@@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit {
      * If no search query is defined,
      * return all options.
      */
-    if (searchQuery === undefined) {
+    if (searchQuery === undefined || searchQuery.trim() === '') {
       this.filteredItems = [...this.items];
     } else {
       /**
@@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      this.filteredItems = this.items.filter((item) => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      });
+      this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery));
     }
   }
 
-  isChecked(value: string) {
-    return this.workingSelectedValues.find((item) => item === value);
+  isChecked(value: string): boolean {
+    return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev) {
+  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
     const { checked, value } = ev.detail;
 
     if (checked) {
diff --git a/static/usage/v8/select/typeahead/index.md b/static/usage/v8/select/typeahead/index.md
index c7978e18190..7ce89c665a0 100644
--- a/static/usage/v8/select/typeahead/index.md
+++ b/static/usage/v8/select/typeahead/index.md
@@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md';
 import vue_types_ts from './vue/vue_types_ts.md';
 import vue_typeahead_component from './vue/typeahead_component_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md';
-import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+import angular_typeahead_component_ts from './angular/typeahead_component_ts.md';
+import angular_typeahead_component_html from './angular/typeahead_component_html.md';
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
@@ -39,9 +38,8 @@ import angular_types_ts from './angular/angular_types_ts.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/typeahead.component.html': angular_modal_example_component_html,
-        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/typeahead.component.html': angular_typeahead_component_html,
+        'src/app/typeahead.component.ts': angular_typeahead_component_ts,
         'src/app/types.ts': angular_types_ts,
       },
     },