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

---
 .../angular/example_component_html.md         | 10 ++++++++++
 .../autogrow/angular/example_component_ts.md  | 11 ++++++++++
 static/usage/v7/textarea/autogrow/index.md    | 16 +++++++++++++--
 .../basic/angular/example_component_html.md   | 13 ++++++++++++
 .../basic/angular/example_component_ts.md     | 11 ++++++++++
 static/usage/v7/textarea/basic/index.md       | 16 +++++++++++++--
 .../angular/example_component_html.md         |  6 ++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v7/textarea/clear-on-edit/index.md  | 16 +++++++++++++--
 .../counter/angular/example_component_ts.md   |  2 ++
 .../fill/angular/example_component_html.md    |  7 +++++++
 .../fill/angular/example_component_ts.md      | 11 ++++++++++
 static/usage/v7/textarea/fill/index.md        | 16 +++++++++++++--
 .../angular/example_component_html.md         | 11 ++++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v7/textarea/helper-error/index.md   | 11 ++++++++--
 .../angular/example_component_html.md         | 16 +++++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../v7/textarea/label-placement/index.md      | 16 +++++++++++++--
 .../angular/example_component_html.md         |  9 +++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 static/usage/v7/textarea/label-slot/index.md  | 20 +++++++++++++++++--
 .../angular/example_component_html.md         |  7 +++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../v7/textarea/no-visible-label/index.md     | 20 +++++++++++++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 10 ++++++++++
 .../autogrow/angular/example_component_ts.md  | 11 ++++++++++
 static/usage/v8/textarea/autogrow/index.md    | 16 +++++++++++++--
 .../basic/angular/example_component_html.md   | 13 ++++++++++++
 .../basic/angular/example_component_ts.md     | 11 ++++++++++
 static/usage/v8/textarea/basic/index.md       | 16 +++++++++++++--
 .../angular/example_component_html.md         |  6 ++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v8/textarea/clear-on-edit/index.md  | 16 +++++++++++++--
 .../counter/angular/example_component_ts.md   |  2 ++
 .../fill/angular/example_component_html.md    |  7 +++++++
 .../fill/angular/example_component_ts.md      | 11 ++++++++++
 static/usage/v8/textarea/fill/index.md        | 16 +++++++++++++--
 .../angular/example_component_html.md         | 11 ++++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../usage/v8/textarea/helper-error/index.md   | 11 ++++++++--
 .../angular/example_component_html.md         | 16 +++++++++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../v8/textarea/label-placement/index.md      | 16 +++++++++++++--
 .../angular/example_component_html.md         |  9 +++++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 static/usage/v8/textarea/label-slot/index.md  | 20 +++++++++++++++++--
 .../angular/example_component_html.md         |  7 +++++++
 .../angular/example_component_ts.md           | 11 ++++++++++
 .../v8/textarea/no-visible-label/index.md     | 20 +++++++++++++++++--
 .../angular/example_component_ts.md           |  2 ++
 52 files changed, 572 insertions(+), 32 deletions(-)
 create mode 100644 static/usage/v7/textarea/autogrow/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/autogrow/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/fill/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/fill/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/label-slot/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/label-slot/angular/example_component_ts.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/angular/example_component_html.md
 create mode 100644 static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/autogrow/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/autogrow/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/fill/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/fill/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/helper-error/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/helper-error/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/label-placement/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/label-placement/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/label-slot/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/label-slot/angular/example_component_ts.md
 create mode 100644 static/usage/v8/textarea/no-visible-label/angular/example_component_html.md
 create mode 100644 static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md

diff --git a/static/usage/v7/textarea/autogrow/angular/example_component_html.md b/static/usage/v7/textarea/autogrow/angular/example_component_html.md
new file mode 100644
index 00000000000..03de94359b6
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-item>
+  <ion-textarea
+    placeholder="Type something here"
+    [autoGrow]="true"
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum."
+  >
+  </ion-textarea>
+</ion-item>
+```
diff --git a/static/usage/v7/textarea/autogrow/angular/example_component_ts.md b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
new file mode 100644
index 00000000000..635914731ff
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md
index 9dd79cbd7cd..043d89b9f45 100644
--- a/static/usage/v7/textarea/autogrow/index.md
+++ b/static/usage/v7/textarea/autogrow/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="small"
-  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/textarea/autogrow/demo.html"
 />
diff --git a/static/usage/v7/textarea/basic/angular/example_component_html.md b/static/usage/v7/textarea/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..af32fc35b03
--- /dev/null
+++ b/static/usage/v7/textarea/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea [readonly]="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea [disabled]="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/basic/angular/example_component_ts.md b/static/usage/v7/textarea/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v7/textarea/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md
index 3070fbea859..181f202fdc9 100644
--- a/static/usage/v7/textarea/basic/index.md
+++ b/static/usage/v7/textarea/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="250px"
-  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/textarea/basic/demo.html"
 />
diff --git a/static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-textarea
+  placeholder="Enter text, leave the textarea, come back, and type to clear"
+  [clearOnEdit]="true"
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md
index cc1e09366e2..d69f619b8b7 100644
--- a/static/usage/v7/textarea/clear-on-edit/index.md
+++ b/static/usage/v7/textarea/clear-on-edit/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="xsmall"
-  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/textarea/clear-on-edit/demo.html"
 />
diff --git a/static/usage/v7/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md
index 2c08dc06fc2..7006ab2f976 100644
--- a/static/usage/v7/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/counter/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonTextarea],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v7/textarea/fill/angular/example_component_html.md b/static/usage/v7/textarea/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..38bcfa1067d
--- /dev/null
+++ b/static/usage/v7/textarea/fill/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-textarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
+
+<br />
+
+<ion-textarea label="Outline textarea" labelPlacement="floating" fill="outline" placeholder="Enter text"></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/fill/angular/example_component_ts.md b/static/usage/v7/textarea/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v7/textarea/fill/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md
index bfc5b54da5d..50cb3a62279 100644
--- a/static/usage/v7/textarea/fill/index.md
+++ b/static/usage/v7/textarea/fill/index.md
@@ -3,12 +3,24 @@ 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="250px"
-  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/textarea/fill/demo.html"
   mode="md"
 />
diff --git a/static/usage/v7/textarea/helper-error/angular/example_component_html.md b/static/usage/v7/textarea/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..3095fd27ead
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-textarea
+  fill="solid"
+  label="Email"
+  labelPlacement="floating"
+  helperText="Enter a valid email"
+  errorText="Invalid email"
+  ngModel
+  email
+></ion-textarea>
+```
diff --git a/static/usage/v7/textarea/helper-error/angular/example_component_ts.md b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md
index 5d4ca92e487..c8b578ce9c7 100644
--- a/static/usage/v7/textarea/helper-error/index.md
+++ b/static/usage/v7/textarea/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/textarea/helper-error/demo.html"
   size="200px"
diff --git a/static/usage/v7/textarea/label-placement/angular/example_component_html.md b/static/usage/v7/textarea/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..ef14c919fb8
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-placement/angular/example_component_ts.md b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md
index 8ced2454c74..b1a25eacc30 100644
--- a/static/usage/v7/textarea/label-placement/index.md
+++ b/static/usage/v7/textarea/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/textarea/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/textarea/label-slot/angular/example_component_html.md b/static/usage/v7/textarea/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..9c8e09ec88a
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea labelPlacement="floating" value="Lorem Ipsum">
+      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+    </ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/label-slot/angular/example_component_ts.md b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..5c2f2648e30
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonText, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md
index a9f9136612b..824120c8388 100644
--- a/static/usage/v7/textarea/label-slot/index.md
+++ b/static/usage/v7/textarea/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/textarea/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/textarea/no-visible-label/angular/example_component_html.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..2f4baaa7511
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md
index 411fc52d502..0928d01334b 100644
--- a/static/usage/v7/textarea/no-visible-label/index.md
+++ b/static/usage/v7/textarea/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/textarea/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
index 899f7a826a3..c110f8c1596 100644
--- a/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/textarea/autogrow/angular/example_component_html.md b/static/usage/v8/textarea/autogrow/angular/example_component_html.md
new file mode 100644
index 00000000000..03de94359b6
--- /dev/null
+++ b/static/usage/v8/textarea/autogrow/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-item>
+  <ion-textarea
+    placeholder="Type something here"
+    [autoGrow]="true"
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum."
+  >
+  </ion-textarea>
+</ion-item>
+```
diff --git a/static/usage/v8/textarea/autogrow/angular/example_component_ts.md b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
new file mode 100644
index 00000000000..635914731ff
--- /dev/null
+++ b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/autogrow/index.md b/static/usage/v8/textarea/autogrow/index.md
index d4288d0da5c..f1a7eea0565 100644
--- a/static/usage/v8/textarea/autogrow/index.md
+++ b/static/usage/v8/textarea/autogrow/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="small"
-  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/textarea/autogrow/demo.html"
 />
diff --git a/static/usage/v8/textarea/basic/angular/example_component_html.md b/static/usage/v8/textarea/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..af32fc35b03
--- /dev/null
+++ b/static/usage/v8/textarea/basic/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea [readonly]="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea [disabled]="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/textarea/basic/angular/example_component_ts.md b/static/usage/v8/textarea/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v8/textarea/basic/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/basic/index.md b/static/usage/v8/textarea/basic/index.md
index 61d4251c86b..5e5fa9afb78 100644
--- a/static/usage/v8/textarea/basic/index.md
+++ b/static/usage/v8/textarea/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="250px"
-  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/textarea/basic/demo.html"
 />
diff --git a/static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+<ion-textarea
+  placeholder="Enter text, leave the textarea, come back, and type to clear"
+  [clearOnEdit]="true"
+></ion-textarea>
+```
diff --git a/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/clear-on-edit/index.md b/static/usage/v8/textarea/clear-on-edit/index.md
index 5f2d928b215..9f617c997ae 100644
--- a/static/usage/v8/textarea/clear-on-edit/index.md
+++ b/static/usage/v8/textarea/clear-on-edit/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="xsmall"
-  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/textarea/clear-on-edit/demo.html"
 />
diff --git a/static/usage/v8/textarea/counter/angular/example_component_ts.md b/static/usage/v8/textarea/counter/angular/example_component_ts.md
index 2c08dc06fc2..7006ab2f976 100644
--- a/static/usage/v8/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/counter/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonTextarea],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v8/textarea/fill/angular/example_component_html.md b/static/usage/v8/textarea/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..38bcfa1067d
--- /dev/null
+++ b/static/usage/v8/textarea/fill/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-textarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
+
+<br />
+
+<ion-textarea label="Outline textarea" labelPlacement="floating" fill="outline" placeholder="Enter text"></ion-textarea>
+```
diff --git a/static/usage/v8/textarea/fill/angular/example_component_ts.md b/static/usage/v8/textarea/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v8/textarea/fill/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/fill/index.md b/static/usage/v8/textarea/fill/index.md
index 73d6beae803..e3ebf6621d7 100644
--- a/static/usage/v8/textarea/fill/index.md
+++ b/static/usage/v8/textarea/fill/index.md
@@ -3,12 +3,24 @@ 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="250px"
-  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/textarea/fill/demo.html"
   mode="md"
 />
diff --git a/static/usage/v8/textarea/helper-error/angular/example_component_html.md b/static/usage/v8/textarea/helper-error/angular/example_component_html.md
new file mode 100644
index 00000000000..3095fd27ead
--- /dev/null
+++ b/static/usage/v8/textarea/helper-error/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+<ion-textarea
+  fill="solid"
+  label="Email"
+  labelPlacement="floating"
+  helperText="Enter a valid email"
+  errorText="Invalid email"
+  ngModel
+  email
+></ion-textarea>
+```
diff --git a/static/usage/v8/textarea/helper-error/angular/example_component_ts.md b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddc0e77e4c4
--- /dev/null
+++ b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/helper-error/index.md b/static/usage/v8/textarea/helper-error/index.md
index 2a0d896e83a..b6d3e084d07 100644
--- a/static/usage/v8/textarea/helper-error/index.md
+++ b/static/usage/v8/textarea/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/textarea/helper-error/demo.html"
   size="200px"
diff --git a/static/usage/v8/textarea/label-placement/angular/example_component_html.md b/static/usage/v8/textarea/label-placement/angular/example_component_html.md
new file mode 100644
index 00000000000..ef14c919fb8
--- /dev/null
+++ b/static/usage/v8/textarea/label-placement/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+  <ion-item>
+    <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/textarea/label-placement/angular/example_component_ts.md b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/label-placement/index.md b/static/usage/v8/textarea/label-placement/index.md
index a3a49592376..684baaf1002 100644
--- a/static/usage/v8/textarea/label-placement/index.md
+++ b/static/usage/v8/textarea/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/textarea/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/textarea/label-slot/angular/example_component_html.md b/static/usage/v8/textarea/label-slot/angular/example_component_html.md
new file mode 100644
index 00000000000..9c8e09ec88a
--- /dev/null
+++ b/static/usage/v8/textarea/label-slot/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea labelPlacement="floating" value="Lorem Ipsum">
+      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
+    </ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/textarea/label-slot/angular/example_component_ts.md b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
new file mode 100644
index 00000000000..5c2f2648e30
--- /dev/null
+++ b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonText, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/label-slot/index.md b/static/usage/v8/textarea/label-slot/index.md
index baf22ad55b5..64d7ff6cb0f 100644
--- a/static/usage/v8/textarea/label-slot/index.md
+++ b/static/usage/v8/textarea/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/textarea/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/textarea/label-slot/demo.html"
+/>
diff --git a/static/usage/v8/textarea/no-visible-label/angular/example_component_html.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_html.md
new file mode 100644
index 00000000000..2f4baaa7511
--- /dev/null
+++ b/static/usage/v8/textarea/no-visible-label/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f0a4c3b3c3
--- /dev/null
+++ b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/no-visible-label/index.md b/static/usage/v8/textarea/no-visible-label/index.md
index 7274f4734fe..626f04e63e4 100644
--- a/static/usage/v8/textarea/no-visible-label/index.md
+++ b/static/usage/v8/textarea/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/textarea/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/textarea/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
index 899f7a826a3..c110f8c1596 100644
--- a/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {
   constructor() {

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

---
 .../usage/v7/textarea/autogrow/angular/example_component_ts.md   | 1 +
 static/usage/v7/textarea/basic/angular/example_component_ts.md   | 1 +
 .../v7/textarea/clear-on-edit/angular/example_component_ts.md    | 1 +
 static/usage/v7/textarea/counter/angular/example_component_ts.md | 1 +
 static/usage/v7/textarea/fill/angular/example_component_ts.md    | 1 +
 .../v7/textarea/helper-error/angular/example_component_ts.md     | 1 +
 .../v7/textarea/label-placement/angular/example_component_ts.md  | 1 +
 .../usage/v7/textarea/label-slot/angular/example_component_ts.md | 1 +
 .../v7/textarea/no-visible-label/angular/example_component_ts.md | 1 +
 .../usage/v8/textarea/autogrow/angular/example_component_ts.md   | 1 +
 static/usage/v8/textarea/basic/angular/example_component_ts.md   | 1 +
 .../v8/textarea/clear-on-edit/angular/example_component_ts.md    | 1 +
 static/usage/v8/textarea/counter/angular/example_component_ts.md | 1 +
 static/usage/v8/textarea/fill/angular/example_component_ts.md    | 1 +
 .../v8/textarea/helper-error/angular/example_component_ts.md     | 1 +
 .../v8/textarea/label-placement/angular/example_component_ts.md  | 1 +
 .../usage/v8/textarea/label-slot/angular/example_component_ts.md | 1 +
 .../v8/textarea/no-visible-label/angular/example_component_ts.md | 1 +
 18 files changed, 18 insertions(+)

diff --git a/static/usage/v7/textarea/autogrow/angular/example_component_ts.md b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
index 635914731ff..a407eaef3ba 100644
--- a/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/basic/angular/example_component_ts.md b/static/usage/v7/textarea/basic/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v7/textarea/basic/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md
index 7006ab2f976..2b46bbe6dad 100644
--- a/static/usage/v7/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/counter/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/textarea/fill/angular/example_component_ts.md b/static/usage/v7/textarea/fill/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v7/textarea/fill/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/fill/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/helper-error/angular/example_component_ts.md b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/label-placement/angular/example_component_ts.md b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/label-slot/angular/example_component_ts.md b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
index 5c2f2648e30..874d21ed018 100644
--- a/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalon
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonText, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/autogrow/angular/example_component_ts.md b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
index 635914731ff..a407eaef3ba 100644
--- a/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/basic/angular/example_component_ts.md b/static/usage/v8/textarea/basic/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v8/textarea/basic/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/counter/angular/example_component_ts.md b/static/usage/v8/textarea/counter/angular/example_component_ts.md
index 7006ab2f976..2b46bbe6dad 100644
--- a/static/usage/v8/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/counter/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/textarea/fill/angular/example_component_ts.md b/static/usage/v8/textarea/fill/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v8/textarea/fill/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/fill/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/helper-error/angular/example_component_ts.md b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
index ddc0e77e4c4..ddae482aec7 100644
--- a/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/label-placement/angular/example_component_ts.md b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/label-slot/angular/example_component_ts.md b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
index 5c2f2648e30..874d21ed018 100644
--- a/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalon
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonText, IonTextarea],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
index 5f0a4c3b3c3..5e8570222df 100644
--- a/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {}

From 2c18cedafbc4a7d62b59fff59828b44ff8c39f16 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 27 Dec 2024 14:13:52 -0500
Subject: [PATCH 3/3] docs(textarea): update angular to standalone

---
 static/usage/v7/textarea/autogrow/angular.md     | 10 ----------
 static/usage/v7/textarea/basic/angular.md        | 13 -------------
 .../usage/v7/textarea/clear-on-edit/angular.md   |  6 ------
 static/usage/v7/textarea/fill/angular.md         |  7 -------
 static/usage/v7/textarea/helper-error/angular.md | 11 -----------
 .../usage/v7/textarea/label-placement/angular.md | 16 ----------------
 static/usage/v7/textarea/label-slot/angular.md   |  9 ---------
 .../v7/textarea/no-visible-label/angular.md      |  7 -------
 .../theming/angular/example_component_ts.md      | 12 ++++++++++++
 static/usage/v7/textarea/theming/index.md        |  4 +++-
 static/usage/v8/textarea/autogrow/angular.md     | 10 ----------
 static/usage/v8/textarea/basic/angular.md        | 13 -------------
 .../usage/v8/textarea/clear-on-edit/angular.md   |  6 ------
 static/usage/v8/textarea/fill/angular.md         |  7 -------
 static/usage/v8/textarea/helper-error/angular.md | 11 -----------
 .../usage/v8/textarea/label-placement/angular.md | 16 ----------------
 static/usage/v8/textarea/label-slot/angular.md   |  9 ---------
 .../v8/textarea/no-visible-label/angular.md      |  7 -------
 .../theming/angular/example_component_ts.md      | 12 ++++++++++++
 static/usage/v8/textarea/theming/index.md        |  4 +++-
 20 files changed, 30 insertions(+), 160 deletions(-)
 delete mode 100644 static/usage/v7/textarea/autogrow/angular.md
 delete mode 100644 static/usage/v7/textarea/basic/angular.md
 delete mode 100644 static/usage/v7/textarea/clear-on-edit/angular.md
 delete mode 100644 static/usage/v7/textarea/fill/angular.md
 delete mode 100644 static/usage/v7/textarea/helper-error/angular.md
 delete mode 100644 static/usage/v7/textarea/label-placement/angular.md
 delete mode 100644 static/usage/v7/textarea/label-slot/angular.md
 delete mode 100644 static/usage/v7/textarea/no-visible-label/angular.md
 create mode 100644 static/usage/v7/textarea/theming/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/textarea/autogrow/angular.md
 delete mode 100644 static/usage/v8/textarea/basic/angular.md
 delete mode 100644 static/usage/v8/textarea/clear-on-edit/angular.md
 delete mode 100644 static/usage/v8/textarea/fill/angular.md
 delete mode 100644 static/usage/v8/textarea/helper-error/angular.md
 delete mode 100644 static/usage/v8/textarea/label-placement/angular.md
 delete mode 100644 static/usage/v8/textarea/label-slot/angular.md
 delete mode 100644 static/usage/v8/textarea/no-visible-label/angular.md
 create mode 100644 static/usage/v8/textarea/theming/angular/example_component_ts.md

diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md
deleted file mode 100644
index 03de94359b6..00000000000
--- a/static/usage/v7/textarea/autogrow/angular.md
+++ /dev/null
@@ -1,10 +0,0 @@
-```html
-<ion-item>
-  <ion-textarea
-    placeholder="Type something here"
-    [autoGrow]="true"
-    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum."
-  >
-  </ion-textarea>
-</ion-item>
-```
diff --git a/static/usage/v7/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular.md
deleted file mode 100644
index af32fc35b03..00000000000
--- a/static/usage/v7/textarea/basic/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea [readonly]="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea [disabled]="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/textarea/clear-on-edit/angular.md b/static/usage/v7/textarea/clear-on-edit/angular.md
deleted file mode 100644
index 409362189a3..00000000000
--- a/static/usage/v7/textarea/clear-on-edit/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-textarea
-  placeholder="Enter text, leave the textarea, come back, and type to clear"
-  [clearOnEdit]="true"
-></ion-textarea>
-```
diff --git a/static/usage/v7/textarea/fill/angular.md b/static/usage/v7/textarea/fill/angular.md
deleted file mode 100644
index 38bcfa1067d..00000000000
--- a/static/usage/v7/textarea/fill/angular.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-<ion-textarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
-
-<br />
-
-<ion-textarea label="Outline textarea" labelPlacement="floating" fill="outline" placeholder="Enter text"></ion-textarea>
-```
diff --git a/static/usage/v7/textarea/helper-error/angular.md b/static/usage/v7/textarea/helper-error/angular.md
deleted file mode 100644
index 3095fd27ead..00000000000
--- a/static/usage/v7/textarea/helper-error/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-textarea
-  fill="solid"
-  label="Email"
-  labelPlacement="floating"
-  helperText="Enter a valid email"
-  errorText="Invalid email"
-  ngModel
-  email
-></ion-textarea>
-```
diff --git a/static/usage/v7/textarea/label-placement/angular.md b/static/usage/v7/textarea/label-placement/angular.md
deleted file mode 100644
index ef14c919fb8..00000000000
--- a/static/usage/v7/textarea/label-placement/angular.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular.md
deleted file mode 100644
index 9c8e09ec88a..00000000000
--- a/static/usage/v7/textarea/label-slot/angular.md
+++ /dev/null
@@ -1,9 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea labelPlacement="floating" value="Lorem Ipsum">
-      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
-    </ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular.md
deleted file mode 100644
index 2f4baaa7511..00000000000
--- a/static/usage/v7/textarea/no-visible-label/angular.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_ts.md b/static/usage/v7/textarea/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddae482aec7
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md
index 3a50362dcee..f128fc8e772 100644
--- a/static/usage/v7/textarea/theming/index.md
+++ b/static/usage/v7/textarea/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,8 +26,9 @@ import angular_global_css from './angular/global_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/textarea/autogrow/angular.md b/static/usage/v8/textarea/autogrow/angular.md
deleted file mode 100644
index 03de94359b6..00000000000
--- a/static/usage/v8/textarea/autogrow/angular.md
+++ /dev/null
@@ -1,10 +0,0 @@
-```html
-<ion-item>
-  <ion-textarea
-    placeholder="Type something here"
-    [autoGrow]="true"
-    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus sem, auctor accumsan egestas sed, venenatis at ex. Nam consequat ex odio, suscipit rhoncus orci dictum eget. Aenean sit amet ligula varius felis facilisis lacinia nec volutpat nulla. Duis ullamcorper sit amet turpis sed blandit. Integer pretium massa eu faucibus interdum."
-  >
-  </ion-textarea>
-</ion-item>
-```
diff --git a/static/usage/v8/textarea/basic/angular.md b/static/usage/v8/textarea/basic/angular.md
deleted file mode 100644
index af32fc35b03..00000000000
--- a/static/usage/v8/textarea/basic/angular.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea label="Regular textarea" placeholder="Type something here"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea [readonly]="true" label="Readonly textarea" placeholder="Can't edit this"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea [disabled]="true" label="Disabled textarea" placeholder="Can't type here"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/textarea/clear-on-edit/angular.md b/static/usage/v8/textarea/clear-on-edit/angular.md
deleted file mode 100644
index 409362189a3..00000000000
--- a/static/usage/v8/textarea/clear-on-edit/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-textarea
-  placeholder="Enter text, leave the textarea, come back, and type to clear"
-  [clearOnEdit]="true"
-></ion-textarea>
-```
diff --git a/static/usage/v8/textarea/fill/angular.md b/static/usage/v8/textarea/fill/angular.md
deleted file mode 100644
index 38bcfa1067d..00000000000
--- a/static/usage/v8/textarea/fill/angular.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-<ion-textarea label="Solid textarea" labelPlacement="floating" fill="solid" placeholder="Enter text"></ion-textarea>
-
-<br />
-
-<ion-textarea label="Outline textarea" labelPlacement="floating" fill="outline" placeholder="Enter text"></ion-textarea>
-```
diff --git a/static/usage/v8/textarea/helper-error/angular.md b/static/usage/v8/textarea/helper-error/angular.md
deleted file mode 100644
index 3095fd27ead..00000000000
--- a/static/usage/v8/textarea/helper-error/angular.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```html
-<ion-textarea
-  fill="solid"
-  label="Email"
-  labelPlacement="floating"
-  helperText="Enter a valid email"
-  errorText="Invalid email"
-  ngModel
-  email
-></ion-textarea>
-```
diff --git a/static/usage/v8/textarea/label-placement/angular.md b/static/usage/v8/textarea/label-placement/angular.md
deleted file mode 100644
index ef14c919fb8..00000000000
--- a/static/usage/v8/textarea/label-placement/angular.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea label="Default label" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-textarea label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/textarea/label-slot/angular.md b/static/usage/v8/textarea/label-slot/angular.md
deleted file mode 100644
index 9c8e09ec88a..00000000000
--- a/static/usage/v8/textarea/label-slot/angular.md
+++ /dev/null
@@ -1,9 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea labelPlacement="floating" value="Lorem Ipsum">
-      <div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
-    </ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/textarea/no-visible-label/angular.md b/static/usage/v8/textarea/no-visible-label/angular.md
deleted file mode 100644
index 2f4baaa7511..00000000000
--- a/static/usage/v8/textarea/no-visible-label/angular.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-<ion-list>
-  <ion-item>
-    <ion-textarea aria-label="Comments" value="Lorem Ipsum"></ion-textarea>
-  </ion-item>
-</ion-list>
-```
diff --git a/static/usage/v8/textarea/theming/angular/example_component_ts.md b/static/usage/v8/textarea/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..ddae482aec7
--- /dev/null
+++ b/static/usage/v8/textarea/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/theming/index.md b/static/usage/v8/textarea/theming/index.md
index 76004eb4ed6..97747123ddc 100644
--- a/static/usage/v8/textarea/theming/index.md
+++ b/static/usage/v8/textarea/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,8 +26,9 @@ import angular_global_css from './angular/global_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },