From 413795ce8d8f4b304d66038b394773b69f106cb5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 18 Dec 2024 20:14:56 -0500
Subject: [PATCH 1/2] docs(grid): update angular to standalone

---
 .../v7/grid/basic/angular/example_component_ts.md    | 12 ++++++++++++
 static/usage/v7/grid/basic/index.md                  |  2 ++
 .../column-number/angular/example_component_ts.md    | 12 ++++++++++++
 .../usage/v7/grid/customizing/column-number/index.md |  2 ++
 .../padding/angular/example_component_ts.md          | 12 ++++++++++++
 static/usage/v7/grid/customizing/padding/index.md    |  2 ++
 .../width/angular/example_component_ts.md            | 12 ++++++++++++
 static/usage/v7/grid/customizing/width/index.md      |  2 ++
 .../v7/grid/fixed/angular/example_component_ts.md    | 12 ++++++++++++
 static/usage/v7/grid/fixed/index.md                  |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v7/grid/horizontal-alignment/index.md   |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v7/grid/offset-responsive/index.md      |  2 ++
 .../v7/grid/offset/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v7/grid/offset/index.md                 |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v7/grid/push-pull-responsive/index.md   |  2 ++
 .../grid/push-pull/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v7/grid/push-pull/index.md              |  2 ++
 .../grid/size-auto/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v7/grid/size-auto/index.md              |  2 ++
 .../size-responsive/angular/example_component_ts.md  | 12 ++++++++++++
 static/usage/v7/grid/size-responsive/index.md        |  2 ++
 .../v7/grid/size/angular/example_component_ts.md     | 12 ++++++++++++
 static/usage/v7/grid/size/index.md                   |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v7/grid/vertical-alignment/index.md     |  2 ++
 .../v8/grid/basic/angular/example_component_ts.md    | 12 ++++++++++++
 static/usage/v8/grid/basic/index.md                  |  2 ++
 .../column-number/angular/example_component_ts.md    | 12 ++++++++++++
 .../usage/v8/grid/customizing/column-number/index.md |  2 ++
 .../padding/angular/example_component_ts.md          | 12 ++++++++++++
 static/usage/v8/grid/customizing/padding/index.md    |  2 ++
 .../width/angular/example_component_ts.md            | 12 ++++++++++++
 static/usage/v8/grid/customizing/width/index.md      |  2 ++
 .../v8/grid/fixed/angular/example_component_ts.md    | 12 ++++++++++++
 static/usage/v8/grid/fixed/index.md                  |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v8/grid/horizontal-alignment/index.md   |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v8/grid/offset-responsive/index.md      |  2 ++
 .../v8/grid/offset/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v8/grid/offset/index.md                 |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v8/grid/push-pull-responsive/index.md   |  2 ++
 .../grid/push-pull/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v8/grid/push-pull/index.md              |  2 ++
 .../grid/size-auto/angular/example_component_ts.md   | 12 ++++++++++++
 static/usage/v8/grid/size-auto/index.md              |  2 ++
 .../size-responsive/angular/example_component_ts.md  | 12 ++++++++++++
 static/usage/v8/grid/size-responsive/index.md        |  2 ++
 .../v8/grid/size/angular/example_component_ts.md     | 12 ++++++++++++
 static/usage/v8/grid/size/index.md                   |  2 ++
 .../angular/example_component_ts.md                  | 12 ++++++++++++
 static/usage/v8/grid/vertical-alignment/index.md     |  2 ++
 56 files changed, 392 insertions(+)
 create mode 100644 static/usage/v7/grid/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/customizing/padding/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/customizing/width/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/fixed/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/offset-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/offset/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/push-pull/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/size-auto/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/size-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/size/angular/example_component_ts.md
 create mode 100644 static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/customizing/padding/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/customizing/width/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/fixed/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/offset-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/offset/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/push-pull/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/size-auto/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/size-responsive/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/size/angular/example_component_ts.md
 create mode 100644 static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md

diff --git a/static/usage/v7/grid/basic/angular/example_component_ts.md b/static/usage/v7/grid/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.md
index 6945d9ba91b..69b6f42c8ed 100644
--- a/static/usage/v7/grid/basic/index.md
+++ b/static/usage/v7/grid/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/index.md b/static/usage/v7/grid/customizing/column-number/index.md
index eed737ae21f..bad6acd3b73 100644
--- a/static/usage/v7/grid/customizing/column-number/index.md
+++ b/static/usage/v7/grid/customizing/column-number/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md b/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/padding/index.md b/static/usage/v7/grid/customizing/padding/index.md
index ea5280cc8f1..48e7f363769 100644
--- a/static/usage/v7/grid/customizing/padding/index.md
+++ b/static/usage/v7/grid/customizing/padding/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_ts.md b/static/usage/v7/grid/customizing/width/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/width/index.md b/static/usage/v7/grid/customizing/width/index.md
index 99ea8710f85..71390dc2fca 100644
--- a/static/usage/v7/grid/customizing/width/index.md
+++ b/static/usage/v7/grid/customizing/width/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/fixed/angular/example_component_ts.md b/static/usage/v7/grid/fixed/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/fixed/index.md b/static/usage/v7/grid/fixed/index.md
index bede2ed6bc7..6479c56219b 100644
--- a/static/usage/v7/grid/fixed/index.md
+++ b/static/usage/v7/grid/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/index.md b/static/usage/v7/grid/horizontal-alignment/index.md
index aa44db5ad2d..501413e47e9 100644
--- a/static/usage/v7/grid/horizontal-alignment/index.md
+++ b/static/usage/v7/grid/horizontal-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md b/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md
index 8ed07e871b5..d28812f684b 100644
--- a/static/usage/v7/grid/offset-responsive/index.md
+++ b/static/usage/v7/grid/offset-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/offset/angular/example_component_ts.md b/static/usage/v7/grid/offset/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md
index 27a55412d53..5aaabfd4f90 100644
--- a/static/usage/v7/grid/offset/index.md
+++ b/static/usage/v7/grid/offset/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md
index cd608eaae70..d9fb4d8ca05 100644
--- a/static/usage/v7/grid/push-pull-responsive/index.md
+++ b/static/usage/v7/grid/push-pull-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_ts.md b/static/usage/v7/grid/push-pull/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md
index a723dfd08f1..b46e98a6f1a 100644
--- a/static/usage/v7/grid/push-pull/index.md
+++ b/static/usage/v7/grid/push-pull/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_ts.md b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size-auto/index.md b/static/usage/v7/grid/size-auto/index.md
index 2da3611d3be..6e09fc94eeb 100644
--- a/static/usage/v7/grid/size-auto/index.md
+++ b/static/usage/v7/grid/size-auto/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_ts.md b/static/usage/v7/grid/size-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size-responsive/index.md b/static/usage/v7/grid/size-responsive/index.md
index 3c46f6ab5de..242c08f5915 100644
--- a/static/usage/v7/grid/size-responsive/index.md
+++ b/static/usage/v7/grid/size-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size/angular/example_component_ts.md b/static/usage/v7/grid/size/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size/index.md b/static/usage/v7/grid/size/index.md
index 132f75c639a..b3b7340b7b9 100644
--- a/static/usage/v7/grid/size/index.md
+++ b/static/usage/v7/grid/size/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/index.md b/static/usage/v7/grid/vertical-alignment/index.md
index 74d347e49a5..66c0b3c9d4c 100644
--- a/static/usage/v7/grid/vertical-alignment/index.md
+++ b/static/usage/v7/grid/vertical-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/basic/angular/example_component_ts.md b/static/usage/v8/grid/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/basic/index.md b/static/usage/v8/grid/basic/index.md
index d438994ef44..ddc0d2f680e 100644
--- a/static/usage/v8/grid/basic/index.md
+++ b/static/usage/v8/grid/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/column-number/index.md b/static/usage/v8/grid/customizing/column-number/index.md
index 9e9066c2927..85e832601e1 100644
--- a/static/usage/v8/grid/customizing/column-number/index.md
+++ b/static/usage/v8/grid/customizing/column-number/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md b/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/padding/index.md b/static/usage/v8/grid/customizing/padding/index.md
index 817304bc595..e3c837e9264 100644
--- a/static/usage/v8/grid/customizing/padding/index.md
+++ b/static/usage/v8/grid/customizing/padding/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_ts.md b/static/usage/v8/grid/customizing/width/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/width/index.md b/static/usage/v8/grid/customizing/width/index.md
index b2c7742a7d6..a61c57a2493 100644
--- a/static/usage/v8/grid/customizing/width/index.md
+++ b/static/usage/v8/grid/customizing/width/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/fixed/angular/example_component_ts.md b/static/usage/v8/grid/fixed/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/fixed/index.md b/static/usage/v8/grid/fixed/index.md
index 92b6716bc89..e35c507b828 100644
--- a/static/usage/v8/grid/fixed/index.md
+++ b/static/usage/v8/grid/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/index.md b/static/usage/v8/grid/horizontal-alignment/index.md
index 6e2270521f7..3d9da3cedab 100644
--- a/static/usage/v8/grid/horizontal-alignment/index.md
+++ b/static/usage/v8/grid/horizontal-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md b/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/offset-responsive/index.md b/static/usage/v8/grid/offset-responsive/index.md
index 0e0231f3ecd..9545573c7de 100644
--- a/static/usage/v8/grid/offset-responsive/index.md
+++ b/static/usage/v8/grid/offset-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/offset/angular/example_component_ts.md b/static/usage/v8/grid/offset/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/offset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/offset/index.md b/static/usage/v8/grid/offset/index.md
index 4cd5a0cb0d2..c42d056e007 100644
--- a/static/usage/v8/grid/offset/index.md
+++ b/static/usage/v8/grid/offset/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/index.md b/static/usage/v8/grid/push-pull-responsive/index.md
index cc4eea60fe8..0e57de6dc9e 100644
--- a/static/usage/v8/grid/push-pull-responsive/index.md
+++ b/static/usage/v8/grid/push-pull-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/push-pull/angular/example_component_ts.md b/static/usage/v8/grid/push-pull/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/push-pull/index.md b/static/usage/v8/grid/push-pull/index.md
index dd9c8a59f6a..b7a4b094599 100644
--- a/static/usage/v8/grid/push-pull/index.md
+++ b/static/usage/v8/grid/push-pull/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size-auto/angular/example_component_ts.md b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size-auto/index.md b/static/usage/v8/grid/size-auto/index.md
index 29e5aaa6549..afdfbf80c92 100644
--- a/static/usage/v8/grid/size-auto/index.md
+++ b/static/usage/v8/grid/size-auto/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_ts.md b/static/usage/v8/grid/size-responsive/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size-responsive/index.md b/static/usage/v8/grid/size-responsive/index.md
index 3f52e520adf..8179858fc21 100644
--- a/static/usage/v8/grid/size-responsive/index.md
+++ b/static/usage/v8/grid/size-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size/angular/example_component_ts.md b/static/usage/v8/grid/size/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size/index.md b/static/usage/v8/grid/size/index.md
index 2b27666f0a8..d364626a517 100644
--- a/static/usage/v8/grid/size/index.md
+++ b/static/usage/v8/grid/size/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md
new file mode 100644
index 00000000000..993d724b887
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/vertical-alignment/index.md b/static/usage/v8/grid/vertical-alignment/index.md
index 10a271ce436..6ba19d37178 100644
--- a/static/usage/v8/grid/vertical-alignment/index.md
+++ b/static/usage/v8/grid/vertical-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}

From 0a29ee3c45d7b4882059872a5d18432f1e991e8b Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:42:47 -0500
Subject: [PATCH 2/2] docs(grid): update angular to standalone

---
 .../usage/v7/grid/size-auto/angular/example_component_ts.md   | 4 ++--
 .../usage/v8/grid/size-auto/angular/example_component_ts.md   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/usage/v7/grid/size-auto/angular/example_component_ts.md b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
index 993d724b887..875c999aa3d 100644
--- a/static/usage/v7/grid/size-auto/angular/example_component_ts.md
+++ b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
@@ -1,12 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonCol, IonGrid, IonRow],
+  imports: [IonCol, IonGrid, IonInput, IonRow],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/grid/size-auto/angular/example_component_ts.md b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
index 993d724b887..875c999aa3d 100644
--- a/static/usage/v8/grid/size-auto/angular/example_component_ts.md
+++ b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
@@ -1,12 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonCol, IonGrid, IonRow],
+  imports: [IonCol, IonGrid, IonInput, IonRow],
 })
 export class ExampleComponent {}
 ```