From 56e257cb93f25a82ee23d012759d230afb234097 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 18 Jul 2025 15:04:42 -0500
Subject: [PATCH 01/53] docs(v6): update v6 stackblitz setup for Angular and JS

---
 src/components/global/Playground/index.tsx    |   2 +-
 .../global/Playground/stackblitz.utils.ts     |  13 +-
 .../code/stackblitz/v6/angular/angular.json   | 122 ++++++++++--------
 .../stackblitz/v6/angular/app.component.html  |   4 +-
 .../stackblitz/v6/angular/app.component.ts    |   7 +-
 .../v6/angular/app.component.withContent.html |   4 +-
 .../v6/angular/app.component.withContent.ts   |  15 +++
 .../code/stackblitz/v6/angular/app.routes.ts  |  13 ++
 .../v6/angular/example.component.ts           |   5 +-
 static/code/stackblitz/v6/angular/index.html  |  16 +++
 static/code/stackblitz/v6/angular/main.ts     |  19 ++-
 .../code/stackblitz/v6/angular/package.json   |  26 +++-
 .../stackblitz/v6/angular/tsconfig.app.json   |   9 ++
 static/code/stackblitz/v6/html/index.html     |  11 +-
 .../stackblitz/v6/html/index.withContent.html |  11 +-
 static/code/stackblitz/v6/html/package.json   |  17 ++-
 static/code/stackblitz/v6/html/tsconfig.json  |  19 +++
 static/code/stackblitz/v6/html/vite.config.ts |  18 +++
 .../angular/example_component_ts.md           |   4 +-
 .../version-v5/developer-resources/books.md   |   2 +-
 .../version-v6/developer-resources/books.md   |   2 +-
 versions.json                                 |   3 +-
 versionsArchived.json                         |   1 -
 23 files changed, 263 insertions(+), 80 deletions(-)
 create mode 100644 static/code/stackblitz/v6/angular/app.component.withContent.ts
 create mode 100644 static/code/stackblitz/v6/angular/app.routes.ts
 create mode 100644 static/code/stackblitz/v6/angular/index.html
 create mode 100644 static/code/stackblitz/v6/angular/tsconfig.app.json
 create mode 100644 static/code/stackblitz/v6/html/tsconfig.json
 create mode 100644 static/code/stackblitz/v6/html/vite.config.ts

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index 9d7f033b445..3489ae7840b 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -153,7 +153,7 @@ export default function Playground({
    * The major version of Ionic to use in the generated StackBlitz examples.
    * This will also load assets for StackBlitz from the specified version directory.
    */
-  version: number;
+  version: string;
 }) {
   if (!code || Object.keys(code).length === 0) {
     console.warn('No code usage examples provided for this Playground example.');
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 2adb362df0d..a9461afc6d2 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -38,10 +38,10 @@ export interface EditorOptions {
    */
   mode?: string;
 
-  version?: number;
+  version?: string;
 }
 
-const loadSourceFiles = async (files: string[], version: number) => {
+const loadSourceFiles = async (files: string[], version: string) => {
   const versionDir = `v${version}`;
   const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`)));
   return await Promise.all(sourceFiles.map((res) => res.text()));
@@ -155,7 +155,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
     ...options?.files,
   };
 
-  files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
+  if (options?.version === '6') {
+    files[main] = files[main].replace(
+      'importProvidersFrom(IonicModule.forRoot({ }))',
+      `importProvidersFrom(IonicModule.forRoot({ mode: '${options?.mode}' }))`
+    );
+  } else {
+    files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
+  }
 
   sdk.openProject({
     template: 'node',
diff --git a/static/code/stackblitz/v6/angular/angular.json b/static/code/stackblitz/v6/angular/angular.json
index 811624f69b5..167ced0d882 100644
--- a/static/code/stackblitz/v6/angular/angular.json
+++ b/static/code/stackblitz/v6/angular/angular.json
@@ -4,11 +4,10 @@
   "newProjectRoot": "projects",
   "projects": {
     "app": {
+      "projectType": "application",
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -16,38 +15,53 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              }
+            ],
             "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
             "scripts": []
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
-              ]
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -57,8 +71,15 @@
           "configurations": {
             "production": {
               "browserTarget": "app:build:production"
+            },
+            "development": {
+              "browserTarget": "app:build:development"
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -73,46 +94,41 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.css"],
-            "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        }
-      }
-    },
-    "app-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "app:serve"
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              }
+            ],
+            "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
+            "scripts": []
           },
           "configurations": {
-            "production": {
-              "devServerTarget": "app:serve:production"
+            "ci": {
+              "progress": false,
+              "watch": false
             }
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
-  "defaultProject": "app"
+  "cli": {
+    "schematicCollections": ["@ionic/angular-toolkit"]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
+  }
 }
diff --git a/static/code/stackblitz/v6/angular/app.component.html b/static/code/stackblitz/v6/angular/app.component.html
index 1031647a0e0..3aeab946d20 100644
--- a/static/code/stackblitz/v6/angular/app.component.html
+++ b/static/code/stackblitz/v6/angular/app.component.html
@@ -1,3 +1,5 @@
 <ion-app>
-  <app-example class="ion-page"></app-example>
+  <app-example class="ion-page">
+    <router-outlet></router-outlet>
+  </app-example>
 </ion-app>
diff --git a/static/code/stackblitz/v6/angular/app.component.ts b/static/code/stackblitz/v6/angular/app.component.ts
index ed440084f8f..dabad158164 100644
--- a/static/code/stackblitz/v6/angular/app.component.ts
+++ b/static/code/stackblitz/v6/angular/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { RouterOutlet } from '@angular/router';
+import { ExampleComponent } from './example.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  imports: [IonicModule, ExampleComponent, RouterOutlet],
+  standalone: true
 })
 export class AppComponent { }
diff --git a/static/code/stackblitz/v6/angular/app.component.withContent.html b/static/code/stackblitz/v6/angular/app.component.withContent.html
index 96ebf597215..df5c543377f 100644
--- a/static/code/stackblitz/v6/angular/app.component.withContent.html
+++ b/static/code/stackblitz/v6/angular/app.component.withContent.html
@@ -1,5 +1,7 @@
 <ion-app>
   <ion-content class="ion-padding">
-    <app-example></app-example>
+    <app-example>
+      <router-outlet></router-outlet>
+    </app-example>
   </ion-content>
 </ion-app>
diff --git a/static/code/stackblitz/v6/angular/app.component.withContent.ts b/static/code/stackblitz/v6/angular/app.component.withContent.ts
new file mode 100644
index 00000000000..2078352ad98
--- /dev/null
+++ b/static/code/stackblitz/v6/angular/app.component.withContent.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { RouterOutlet } from '@angular/router';
+import { ExampleComponent } from './example.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [IonicModule, ExampleComponent, RouterOutlet],
+  standalone: true
+})
+export class AppComponent {
+  constructor() {}
+}
diff --git a/static/code/stackblitz/v6/angular/app.routes.ts b/static/code/stackblitz/v6/angular/app.routes.ts
new file mode 100644
index 00000000000..4a49853c7f4
--- /dev/null
+++ b/static/code/stackblitz/v6/angular/app.routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'example',
+    loadComponent: () => import('./example.component').then((m) => m.ExampleComponent),
+  },
+  {
+    path: '',
+    redirectTo: 'example',
+    pathMatch: 'full',
+  },
+];
\ No newline at end of file
diff --git a/static/code/stackblitz/v6/angular/example.component.ts b/static/code/stackblitz/v6/angular/example.component.ts
index 6b67261e0b3..b1cd8b6af79 100644
--- a/static/code/stackblitz/v6/angular/example.component.ts
+++ b/static/code/stackblitz/v6/angular/example.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent { }
diff --git a/static/code/stackblitz/v6/angular/index.html b/static/code/stackblitz/v6/angular/index.html
new file mode 100644
index 00000000000..79599e62e32
--- /dev/null
+++ b/static/code/stackblitz/v6/angular/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
+</head>
+
+<body>
+  <app-root>
+  </app-root>
+</body>
+
+</html>
diff --git a/static/code/stackblitz/v6/angular/main.ts b/static/code/stackblitz/v6/angular/main.ts
index 518110491b2..13819b6a52c 100644
--- a/static/code/stackblitz/v6/angular/main.ts
+++ b/static/code/stackblitz/v6/angular/main.ts
@@ -1,7 +1,14 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
+import { IonicRouteStrategy, IonicModule } from '@ionic/angular';
+import { importProvidersFrom } from '@angular/core';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err: any) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    importProvidersFrom(IonicModule.forRoot({ })),
+    provideRouter(routes, withPreloading(PreloadAllModules)),
+  ],
+})
\ No newline at end of file
diff --git a/static/code/stackblitz/v6/angular/package.json b/static/code/stackblitz/v6/angular/package.json
index 0ecc1227dd5..a80e5d13a5f 100644
--- a/static/code/stackblitz/v6/angular/package.json
+++ b/static/code/stackblitz/v6/angular/package.json
@@ -1,7 +1,31 @@
 {
+  "name": "angular-starter",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
   "dependencies": {
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0",
     "@ionic/angular": "^6.0.0",
     "@ionic/core": "^6.0.0",
-    "@angular/platform-browser-dynamic": "17.3.2"
+    "ionicons": "8.0.13"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.0",
+    "@angular/cli": "^15.0.0",
+    "@angular/compiler-cli": "^15.0.0",
+    "typescript": "~4.9.4"
   }
 }
diff --git a/static/code/stackblitz/v6/angular/tsconfig.app.json b/static/code/stackblitz/v6/angular/tsconfig.app.json
new file mode 100644
index 00000000000..f69a169a56e
--- /dev/null
+++ b/static/code/stackblitz/v6/angular/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
diff --git a/static/code/stackblitz/v6/html/index.html b/static/code/stackblitz/v6/html/index.html
index 8a59c2afc0f..fb14e96ba98 100644
--- a/static/code/stackblitz/v6/html/index.html
+++ b/static/code/stackblitz/v6/html/index.html
@@ -1,14 +1,19 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
 </head>
 
 <body>
   <ion-app>
     {{ TEMPLATE }}
   </ion-app>
+
+  <script type="module" src="./index.ts"></script>
 </body>
 
 </html>
diff --git a/static/code/stackblitz/v6/html/index.withContent.html b/static/code/stackblitz/v6/html/index.withContent.html
index 3cd31834675..404344868cd 100644
--- a/static/code/stackblitz/v6/html/index.withContent.html
+++ b/static/code/stackblitz/v6/html/index.withContent.html
@@ -1,8 +1,11 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
 </head>
 
 <body>
@@ -11,6 +14,8 @@
       {{ TEMPLATE }}
     </ion-content>
   </ion-app>
+
+  <script type="module" src="./index.ts"></script>
 </body>
 
 </html>
diff --git a/static/code/stackblitz/v6/html/package.json b/static/code/stackblitz/v6/html/package.json
index b6dbee21fd0..113d2325e30 100644
--- a/static/code/stackblitz/v6/html/package.json
+++ b/static/code/stackblitz/v6/html/package.json
@@ -1,5 +1,20 @@
 {
+  "name": "html-starter",
+  "private": true,
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "start": "vite preview"
+  },
   "dependencies": {
-    "@ionic/core": "^6.0.0"
+    "@ionic/core": "^6.0.0",
+    "ionicons": "8.0.13"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-static-copy": "^3.1.0"
   }
 }
diff --git a/static/code/stackblitz/v6/html/tsconfig.json b/static/code/stackblitz/v6/html/tsconfig.json
new file mode 100644
index 00000000000..0b999e71b8e
--- /dev/null
+++ b/static/code/stackblitz/v6/html/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["esnext", "dom"],
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/static/code/stackblitz/v6/html/vite.config.ts b/static/code/stackblitz/v6/html/vite.config.ts
new file mode 100644
index 00000000000..3e356ac9e72
--- /dev/null
+++ b/static/code/stackblitz/v6/html/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@ionic/core'],
+  },
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/ionicons/dist/svg/*',
+          dest: 'svg'
+        }
+      ]
+    })
+  ]
+});
diff --git a/static/usage/v6/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v6/alert/presenting/controller/angular/example_component_ts.md
index 32583600432..1aa9c3cf014 100644
--- a/static/usage/v6/alert/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/alert/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/versioned_docs/version-v5/developer-resources/books.md b/versioned_docs/version-v5/developer-resources/books.md
index 1a51bc94e8f..4553ac800c3 100644
--- a/versioned_docs/version-v5/developer-resources/books.md
+++ b/versioned_docs/version-v5/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https:://developer.school)
+by [Paul Halliday](https://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.md
index 1a51bc94e8f..4553ac800c3 100644
--- a/versioned_docs/version-v6/developer-resources/books.md
+++ b/versioned_docs/version-v6/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https:://developer.school)
+by [Paul Halliday](https://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versions.json b/versions.json
index 48698a4fdec..ed163ab5c09 100644
--- a/versions.json
+++ b/versions.json
@@ -1,3 +1,4 @@
 [
-  "v7"
+  "v7",
+  "v6"
 ]
diff --git a/versionsArchived.json b/versionsArchived.json
index 9d103a53775..56bd2d5bcb6 100644
--- a/versionsArchived.json
+++ b/versionsArchived.json
@@ -1,4 +1,3 @@
 {
-  "v6": "https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6",
   "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5"
 }

From c625d4dd1886c1653880aa71408e2f0e82b55ddf Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 11:24:17 -0500
Subject: [PATCH 02/53] docs(v6): update Angular examples for accordion

---
 .../angular/example_component_ts.md           |  3 +++
 .../example_component_html.md}                |  0
 .../icons/angular/example_component_ts.md     | 23 +++++++++++++++++++
 .../v6/accordion/customization/icons/index.md | 10 ++++++--
 .../angular/example_component_ts.md           |  3 +++
 .../toggle/angular/example_component_ts.md    |  4 +++-
 6 files changed, 40 insertions(+), 3 deletions(-)
 rename static/usage/v6/accordion/customization/icons/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/accordion/customization/icons/angular/example_component_ts.md

diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
index 4db53a836a9..1b3dae1494b 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/accordion/customization/icons/angular.md b/static/usage/v6/accordion/customization/icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/accordion/customization/icons/angular.md
rename to static/usage/v6/accordion/customization/icons/angular/example_component_html.md
diff --git a/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..e225a168a07
--- /dev/null
+++ b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { caretDownCircle } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDownCircle });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md
index 691d4b933b1..b7668a6ee7c 100644
--- a/static/usage/v6/accordion/customization/icons/index.md
+++ b/static/usage/v6/accordion/customization/icons/index.md
@@ -3,7 +3,8 @@ 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="6"
@@ -11,7 +12,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,
+      },
+    },
   }}
   size="250px"
   src="usage/v6/accordion/customization/icons/demo.html"
diff --git a/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
index c14734aba72..376333ed4c1 100644
--- a/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component, ElementRef, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
diff --git a/static/usage/v6/accordion/toggle/angular/example_component_ts.md b/static/usage/v6/accordion/toggle/angular/example_component_ts.md
index bdcac1d862f..52f252cf2a0 100644
--- a/static/usage/v6/accordion/toggle/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/toggle/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonAccordionGroup } from '@ionic/angular';
+import { IonicModule, IonAccordionGroup } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;

From b595e1e10e8b68857f596169e01b669be83a3855 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 11:25:13 -0500
Subject: [PATCH 03/53] docs(v6): update Angular examples for action-sheet

---
 .../v6/action-sheet/basic/angular/example_component_ts.md     | 4 +++-
 .../theming/css-properties/angular/example_component_ts.md    | 4 +++-
 .../theming/styling/angular/example_component_ts.md           | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/usage/v6/action-sheet/basic/angular/example_component_ts.md b/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
index 3961dc7ff5e..97e780edf31 100644
--- a/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ActionSheetController } from '@ionic/angular';
+import { IonicModule, ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   result: string;
diff --git a/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
index d8f200f27ee..fbca9f2f603 100644
--- a/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ActionSheetController } from '@ionic/angular';
+import { IonicModule, ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
index d8f200f27ee..fbca9f2f603 100644
--- a/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ActionSheetController } from '@ionic/angular';
+import { IonicModule, ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}

From 1170b47cd1536521882103bb830add12c57c5260 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 11:41:47 -0500
Subject: [PATCH 04/53] docs(v6): update Angular examples for alert

---
 static/usage/v6/alert/buttons/angular/example_component_ts.md | 4 +++-
 .../v6/alert/customization/angular/example_component_ts.md    | 4 +++-
 .../v6/alert/inputs/radios/angular/example_component_ts.md    | 4 +++-
 .../alert/inputs/text-inputs/angular/example_component_ts.md  | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/static/usage/v6/alert/buttons/angular/example_component_ts.md b/static/usage/v6/alert/buttons/angular/example_component_ts.md
index f4a7b4e9a18..f03a98e678b 100644
--- a/static/usage/v6/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/alert/buttons/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handlerMessage = '';
diff --git a/static/usage/v6/alert/customization/angular/example_component_ts.md b/static/usage/v6/alert/customization/angular/example_component_ts.md
index 9606aeb72f4..5cef7d8e3a4 100644
--- a/static/usage/v6/alert/customization/angular/example_component_ts.md
+++ b/static/usage/v6/alert/customization/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
index 78b305a0f59..f06812967dc 100644
--- a/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
+++ b/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
index 2c4f2ab04d2..a8ad4eb12a6 100644
--- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
+++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}

From fbbde066bfebd3600abb5eb0e2ec972527421ec0 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 13:52:35 -0500
Subject: [PATCH 05/53] docs(v6): update Angular examples for breadcrumbs

---
 .../angular/example_component_ts.md           |  3 +++
 .../angular/example_component_ts.md           |  4 ++++
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 .../icons/custom-separators/index.md          | 15 ++++++++++--
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 .../breadcrumbs/icons/icons-on-items/index.md | 15 ++++++++++--
 8 files changed, 79 insertions(+), 4 deletions(-)
 rename static/usage/v6/breadcrumbs/icons/custom-separators/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
 rename static/usage/v6/breadcrumbs/icons/icons-on-items/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md

diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
index 8ae69af72a5..38122fed8e3 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   maxBreadcrumbs = 4;
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
index aabfb29a821..22380950ca4 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/breadcrumbs/icons/custom-separators/angular.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_html.md
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
new file mode 100644
index 00000000000..dcd6b853b2b
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { arrowForwardCircle } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ arrowForwardCircle });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
index a9305b79feb..83c578d8742 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
@@ -3,10 +3,21 @@ 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="6"
-  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/v6/breadcrumbs/icons/custom-separators/demo.html"
 />
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md
rename to static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_html.md
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
new file mode 100644
index 00000000000..a679de8d05c
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { home, flash, camera, film } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ home, flash, camera, film });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
index 0f2e9ac47cc..584eec676de 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v6/breadcrumbs/icons/icons-on-items/demo.html"
 />

From 40e55c04874ee500f17c3bd4c3998f9ffabe5d50 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 14:43:25 -0500
Subject: [PATCH 06/53] docs(v6): update Angular examples for content

---
 .../v6/content/scroll-events/angular/example_component_ts.md  | 4 +++-
 .../v6/content/scroll-methods/angular/example_component_ts.md | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/content/scroll-events/angular/example_component_ts.md b/static/usage/v6/content/scroll-events/angular/example_component_ts.md
index 7e3f7625f57..658772dd54e 100644
--- a/static/usage/v6/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v6/content/scroll-events/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ScrollDetail } from '@ionic/angular';
+import { IonicModule, ScrollDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleScrollStart() {
diff --git a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
index 1975fe3b341..bba0e43f6ff 100644
--- a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
+++ b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonContent } from '@ionic/angular';
+import { IonicModule, IonContent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild(IonContent) content: IonContent;

From 9c37e159593181bc8a9f8ef10242d5e4c580222e Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 14:44:19 -0500
Subject: [PATCH 07/53] docs(v6): update Angular examples for datetime

---
 .../date-constraints/advanced/angular/example_component_ts.md  | 3 +++
 .../highlightedDates/array/angular/example_component_ts.md     | 3 +++
 .../highlightedDates/callback/angular/example_component_ts.md  | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
index 3021390e188..8d011a739b5 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index 4ca93b85f44..5efbdc20571 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
index 60f9c700d05..2d4359fee21 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   highlightedDates = (isoString) => {

From edf261ff09af1d381c7fa08ea0eeb24101518732 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 21 Jul 2025 14:52:38 -0500
Subject: [PATCH 08/53] docs(v6): update Angular examples for picker

---
 .../v6/picker/multiple-column/angular/example_component_ts.md | 4 +++-
 .../v6/picker/single-column/angular/example_component_ts.md   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
index ce535b1391a..55b1da9dbd4 100644
--- a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { PickerController } from '@ionic/angular';
+import { IonicModule, PickerController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
diff --git a/static/usage/v6/picker/single-column/angular/example_component_ts.md b/static/usage/v6/picker/single-column/angular/example_component_ts.md
index 849da3f0f16..91001efb481 100644
--- a/static/usage/v6/picker/single-column/angular/example_component_ts.md
+++ b/static/usage/v6/picker/single-column/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { PickerController } from '@ionic/angular';
+import { IonicModule, PickerController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}

From e54bffb61e6d6e556a91e8204f18226e66afc1ee Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 11:10:58 -0500
Subject: [PATCH 09/53] docs(v6): update Angular examples for infinite-scroll

---
 .../infinite-scroll/basic/angular/example_component_ts.md | 7 ++++---
 .../angular/example_component_ts.md                       | 8 +++++---
 .../angular/example_component_ts.md                       | 7 ++++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
index 390ba6b75f1..ebf6b9ed53b 100644
--- a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
@@ -1,12 +1,13 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent implements OnInit {
   items = [];
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..ea0f1eb9cae 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent implements OnInit {
   items = [];
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8b..542b7f41ba9 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -1,12 +1,13 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent implements OnInit {
   items = [];

From a27f649f73aa8f4ed9e08f64e85778e57fd6ea0d Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 11:12:19 -0500
Subject: [PATCH 10/53] docs(v6): update Angular example for icon

---
 .../example_component_html.md}                |  0
 .../basic/angular/example_component_ts.md     | 23 +++++++++++++++++++
 static/usage/v6/icon/basic/index.md           | 20 ++++++++++++++--
 3 files changed, 41 insertions(+), 2 deletions(-)
 rename static/usage/v6/icon/basic/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/icon/basic/angular/example_component_ts.md

diff --git a/static/usage/v6/icon/basic/angular.md b/static/usage/v6/icon/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/icon/basic/angular.md
rename to static/usage/v6/icon/basic/angular/example_component_html.md
diff --git a/static/usage/v6/icon/basic/angular/example_component_ts.md b/static/usage/v6/icon/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..0ca64333da3
--- /dev/null
+++ b/static/usage/v6/icon/basic/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ logoIonic });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
index 6b3a026b7dc..ec92154552f 100644
--- a/static/usage/v6/icon/basic/index.md
+++ b/static/usage/v6/icon/basic/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';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-<Playground version="6" size="xsmall" code={{ javascript, react, vue, angular }} src="usage/v6/icon/basic/demo.html" />
+<Playground
+  version="6"
+  size="xsmall"
+  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/v6/icon/basic/demo.html"
+/>

From f6bbe3e53fad819ae23f714f1ddb8ef1f47baf9b Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 11:25:30 -0500
Subject: [PATCH 11/53] docs(v6): update Angular example for input

---
 .../usage/v6/input/filtering/angular/example_component_ts.md   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md
index b0fc6a3331f..edfd287601c 100644
--- a/static/usage/v6/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v6/input/filtering/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 import type { IonInput } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   inputModel = '';

From 067d6aa95739296e66024cf3ca018bea50078d71 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 11:25:51 -0500
Subject: [PATCH 12/53] docs(v6): update Angular example for item

---
 static/usage/v6/item/counter/angular/example_component_ts.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/usage/v6/item/counter/angular/example_component_ts.md b/static/usage/v6/item/counter/angular/example_component_ts.md
index 2c08dc06fc2..ae875052f85 100644
--- a/static/usage/v6/item/counter/angular/example_component_ts.md
+++ b/static/usage/v6/item/counter/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {

From 09130ffa65a3f329e402da661e776996cdd69bd9 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 12:20:05 -0500
Subject: [PATCH 13/53] docs(v6): update Angular examples for item

---
 .../example_component_html.md}                |  0
 .../buttons/angular/example_component_ts.md   | 23 +++++++++++++++++++
 static/usage/v6/item/buttons/index.md         | 20 ++++++++++++++--
 .../example_component_html.md}                |  0
 .../icons/angular/example_component_ts.md     | 23 +++++++++++++++++++
 static/usage/v6/item/icons/index.md           | 20 ++++++++++++++--
 .../example_component_html.md}                |  0
 .../lines/angular/example_component_ts.md     | 23 +++++++++++++++++++
 static/usage/v6/item/lines/index.md           | 20 ++++++++++++++--
 9 files changed, 123 insertions(+), 6 deletions(-)
 rename static/usage/v6/item/buttons/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/item/buttons/angular/example_component_ts.md
 rename static/usage/v6/item/icons/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/item/icons/angular/example_component_ts.md
 rename static/usage/v6/item/lines/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/item/lines/angular/example_component_ts.md

diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/item/buttons/angular.md
rename to static/usage/v6/item/buttons/angular/example_component_html.md
diff --git a/static/usage/v6/item/buttons/angular/example_component_ts.md b/static/usage/v6/item/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..4a6b6830389
--- /dev/null
+++ b/static/usage/v6/item/buttons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { home, star, navigate } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ home, star, navigate });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
index d46337926bc..09299818a97 100644
--- a/static/usage/v6/item/buttons/index.md
+++ b/static/usage/v6/item/buttons/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';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/buttons/demo.html" size="250px" />
+<Playground
+  version="6"
+  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/v6/item/buttons/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/item/icons/angular.md
rename to static/usage/v6/item/icons/angular/example_component_html.md
diff --git a/static/usage/v6/item/icons/angular/example_component_ts.md b/static/usage/v6/item/icons/angular/example_component_ts.md
new file mode 100644
index 00000000000..fd72c48805d
--- /dev/null
+++ b/static/usage/v6/item/icons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { informationCircle, star } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ informationCircle, star });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
index 97b18d73650..92c2fdc5f3e 100644
--- a/static/usage/v6/item/icons/index.md
+++ b/static/usage/v6/item/icons/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';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/icons/demo.html" size="250px" />
+<Playground
+  version="6"
+  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/v6/item/icons/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/item/lines/angular.md b/static/usage/v6/item/lines/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/item/lines/angular.md
rename to static/usage/v6/item/lines/angular/example_component_html.md
diff --git a/static/usage/v6/item/lines/angular/example_component_ts.md b/static/usage/v6/item/lines/angular/example_component_ts.md
new file mode 100644
index 00000000000..7322fe3faae
--- /dev/null
+++ b/static/usage/v6/item/lines/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { star, informationCircle } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ star, informationCircle });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index f1ccef30f7e..5d7f93525ae 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/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';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/lines/demo.html" size="medium" />
+<Playground
+  version="6"
+  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/v6/item/lines/demo.html"
+  size="medium"
+/>

From 9af634defd1d43454faf5277d84ca3bc0987afd6 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 12:49:08 -0500
Subject: [PATCH 14/53] docs(v6): update Angular example for menu

---
 static/usage/v6/menu/type/angular/example_component_html.md | 2 +-
 static/usage/v6/menu/type/angular/example_component_ts.md   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/usage/v6/menu/type/angular/example_component_html.md b/static/usage/v6/menu/type/angular/example_component_html.md
index fd995d7a32f..738aca5079b 100644
--- a/static/usage/v6/menu/type/angular/example_component_html.md
+++ b/static/usage/v6/menu/type/angular/example_component_html.md
@@ -20,7 +20,7 @@
   </ion-header>
   <ion-content class="ion-padding">
     <h2>Select an overlay type:</h2>
-    <ion-radio-group [(ngModel)]="menuType">
+    <ion-radio-group [(ngModel)]="menuType" #ctrl="ngModel">
       <ion-item>
         <ion-label>
           <code>overlay</code>
diff --git a/static/usage/v6/menu/type/angular/example_component_ts.md b/static/usage/v6/menu/type/angular/example_component_ts.md
index 5f03ec13b76..1950bbb5e86 100644
--- a/static/usage/v6/menu/type/angular/example_component_ts.md
+++ b/static/usage/v6/menu/type/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [FormsModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   menuType: string = 'overlay';

From 710cf8958aa61b11355488cda1e779c9a106755b Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 13:39:32 -0500
Subject: [PATCH 15/53] docs(v6): update Angular examples for modal

---
 .../boolean/angular/example_component_ts.md   |  4 +++-
 .../function/angular/example_component_ts.md  |  4 +++-
 .../angular/example_component_ts.md           |  3 +++
 .../basic/angular/example_component_ts.md     |  3 +++
 .../modal/controller/angular/app_module_ts.md | 19 -------------------
 .../angular/example_component_ts.md           |  4 +++-
 .../angular/modal-example_component_ts.md     |  6 ++++--
 static/usage/v6/modal/controller/index.md     |  2 --
 .../basic/angular/example_component_ts.md     |  5 ++++-
 .../is-open/angular/example_component_ts.md   |  3 +++
 .../angular/example_component_ts.md           |  3 +++
 .../angular/example_component_ts.md           |  4 +++-
 12 files changed, 32 insertions(+), 28 deletions(-)
 delete mode 100644 static/usage/v6/modal/controller/angular/app_module_ts.md

diff --git a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
index b13c147dc2d..88be5262118 100644
--- a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { CheckboxCustomEvent } from '@ionic/angular';
+import { IonicModule, CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   canDismiss = false;
diff --git a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
index a62465cfee3..93cc0c51c83 100644
--- a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ActionSheetController } from '@ionic/angular';
+import { IonicModule, ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   presentingElement = undefined;
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 788b9a14c0f..2721c21e79f 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   async canDismiss(data?: any, role?: string) {
diff --git a/static/usage/v6/modal/card/basic/angular/example_component_ts.md b/static/usage/v6/modal/card/basic/angular/example_component_ts.md
index 5a28a156a32..3fff7fde680 100644
--- a/static/usage/v6/modal/card/basic/angular/example_component_ts.md
+++ b/static/usage/v6/modal/card/basic/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
diff --git a/static/usage/v6/modal/controller/angular/app_module_ts.md b/static/usage/v6/modal/controller/angular/app_module_ts.md
deleted file mode 100644
index e9e4f00dff3..00000000000
--- a/static/usage/v6/modal/controller/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { ModalExampleComponent } from './modal-example.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, ModalExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/modal/controller/angular/example_component_ts.md b/static/usage/v6/modal/controller/angular/example_component_ts.md
index 920a2335257..36e27e8ee33 100644
--- a/static/usage/v6/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v6/modal/controller/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ModalController } from '@ionic/angular';
+import { IonicModule, ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';
diff --git a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
index 621996015b4..c01da56515b 100644
--- a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
+++ b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ModalController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { IonicModule, ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: 'modal-example.component.html',
+  imports: [FormsModule, IonicModule],
+  standalone: true
 })
 export class ModalExampleComponent {
   name: string;
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md
index 2f1d5c9b961..fa08d9ba1be 100644
--- a/static/usage/v6/modal/controller/index.md
+++ b/static/usage/v6/modal/controller/index.md
@@ -6,7 +6,6 @@ import react from './react.md';
 import vue_example from './vue/example_vue.md';
 import vue_modal from './vue/modal_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
@@ -29,7 +28,6 @@ import angular_modal_example_component_html from './angular/modal-example_compon
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/modal-example.component.html': angular_modal_example_component_html,
         'src/app/modal-example.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
   }}
diff --git a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
index a21954ec5f1..8a756a79d36 100644
--- a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { IonicModule, IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [FormsModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild(IonModal) modal: IonModal;
diff --git a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
index 321577939a9..fb4be0a7328 100644
--- a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
index e132d2f84c7..8473fe29d8a 100644
--- a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
+++ b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   count = 0;
diff --git a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
index c4a743b2745..95789450895 100644
--- a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
+++ b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AnimationController } from '@ionic/angular';
+import { IonicModule, AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}

From 89b3478f34c81bf9021d16940e0107e9308d36d9 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 14:53:25 -0500
Subject: [PATCH 16/53] docs(v6): update Angular example for nav

---
 .../v6/nav/nav-link/angular/app_module_ts.md  | 21 -------------------
 .../nav-link/angular/example_component_ts.md  |  4 +++-
 .../nav-link/angular/page_one_component_ts.md |  4 +++-
 .../angular/page_three_component_ts.md        |  3 +++
 .../nav-link/angular/page_two_component_ts.md |  4 +++-
 static/usage/v6/nav/nav-link/index.md         |  2 --
 6 files changed, 12 insertions(+), 26 deletions(-)
 delete mode 100644 static/usage/v6/nav/nav-link/angular/app_module_ts.md

diff --git a/static/usage/v6/nav/nav-link/angular/app_module_ts.md b/static/usage/v6/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v6/nav/nav-link/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/nav/nav-link/angular/example_component_ts.md b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
index b123a4858ce..370b2ed24e1 100644
--- a/static/usage/v6/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342cf..3b6dd80abc4 100644
--- a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageTwoComponent } from './page-two.component';
 
 @Component({
@@ -18,6 +18,8 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed7218..025f44e021f 100644
--- a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,8 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a593..35cbfd185fa 100644
--- a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageThreeComponent } from './page-three.component';
 
 @Component({
@@ -23,6 +23,8 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md
index 2fdeadbbbdd..0f81390a599 100644
--- a/static/usage/v6/nav/nav-link/index.md
+++ b/static/usage/v6/nav/nav-link/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {

From b105668454b583ba756b3631582eecff093521ec Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 15:11:10 -0500
Subject: [PATCH 17/53] docs(v6): update Angular examples for popover

---
 .../angular/example_component_ts.md           |  3 +++
 .../controller/angular/app_module_ts.md       | 19 -------------------
 .../angular/example_component_ts.md           |  4 +++-
 .../angular/popover_component_ts.md           |  4 +++-
 .../v6/popover/presenting/controller/index.md |  2 --
 .../angular/example_component_ts.md           |  3 +++
 6 files changed, 12 insertions(+), 23 deletions(-)
 delete mode 100644 static/usage/v6/popover/presenting/controller/angular/app_module_ts.md

diff --git a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
index 4db53a836a9..1b3dae1494b 100644
--- a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
deleted file mode 100644
index 887ca3acf89..00000000000
--- a/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PopoverComponent } from './popover.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PopoverComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
index bf0e0165d78..bb01bd2c127 100644
--- a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
@@ -1,13 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
 
-import { PopoverController } from '@ionic/angular';
+import { IonicModule, PopoverController } from '@ionic/angular';
 
 import { PopoverComponent } from './popover.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   roleMsg = '';
diff --git a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
index 2900a32240c..ce19e40b408 100644
--- a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { IonicModule, PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md
index 4906017d235..e51317d21fe 100644
--- a/static/usage/v6/popover/presenting/controller/index.md
+++ b/static/usage/v6/popover/presenting/controller/index.md
@@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_popover_component_html from './angular/popover_component_html.md';
 import angular_popover_component_ts from './angular/popover_component_ts.md';
-import angular_app_module from './angular/app_module_ts.md';
 
 <Playground
   version="6"
@@ -30,7 +29,6 @@ import angular_app_module from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/popover.component.html': angular_popover_component_html,
         'src/app/popover.component.ts': angular_popover_component_ts,
-        'src/app/app.module.ts': angular_app_module,
       },
     },
   }}
diff --git a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
index ef604e603d9..91fde982016 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;

From b367f115982451931c127964f3e3e7fc4cc19029 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 15:22:28 -0500
Subject: [PATCH 18/53] docs(v6): update Angular examples for loading

---
 .../v6/loading/controller/angular/example_component_ts.md     | 4 +++-
 .../usage/v6/loading/spinners/angular/example_component_ts.md | 4 +++-
 .../usage/v6/loading/theming/angular/example_component_ts.md  | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/usage/v6/loading/controller/angular/example_component_ts.md b/static/usage/v6/loading/controller/angular/example_component_ts.md
index bd4b86eef29..38ffd0010e4 100644
--- a/static/usage/v6/loading/controller/angular/example_component_ts.md
+++ b/static/usage/v6/loading/controller/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { LoadingController } from '@ionic/angular';
+import { IonicModule, LoadingController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v6/loading/spinners/angular/example_component_ts.md b/static/usage/v6/loading/spinners/angular/example_component_ts.md
index 7e522cb3a64..ba83143f18d 100644
--- a/static/usage/v6/loading/spinners/angular/example_component_ts.md
+++ b/static/usage/v6/loading/spinners/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { LoadingController } from '@ionic/angular';
+import { IonicModule, LoadingController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v6/loading/theming/angular/example_component_ts.md b/static/usage/v6/loading/theming/angular/example_component_ts.md
index 800335c91ad..30bf2c4c8e0 100644
--- a/static/usage/v6/loading/theming/angular/example_component_ts.md
+++ b/static/usage/v6/loading/theming/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { LoadingController } from '@ionic/angular';
+import { IonicModule, LoadingController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}

From 45666ff199f87e2d27838009b55f78d2a391e73d Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 15:35:44 -0500
Subject: [PATCH 19/53] docs(v6): update Angular examples for progress-bar

---
 .../v6/progress-bar/buffer/angular/example_component_ts.md     | 3 +++
 .../progress-bar/determinate/angular/example_component_ts.md   | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
index a876a376204..6b72f5b5232 100644
--- a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
index 971d3d92ed0..8a288deb400 100644
--- a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   public progress = 0;

From 107b465f75ae2e7acb13a9890175e4f2e43a7d7b Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 15:44:41 -0500
Subject: [PATCH 20/53] docs(v6): update Angular example for skeleton-text

---
 .../v6/skeleton-text/basic/angular/example_component_ts.md    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
index 8423962a3e9..40d968506a8 100644
--- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
@@ -1,10 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   public loaded = false;

From 47ef96777eab75f6551041d7919bf4fcff31af58 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 15:54:20 -0500
Subject: [PATCH 21/53] docs(v6): update Angular examples for range

---
 .../v6/range/ion-change-event/angular/example_component_ts.md | 4 +++-
 .../range/ion-knob-move-event/angular/example_component_ts.md | 4 +++-
 static/usage/v6/range/pins/angular/example_component_ts.md    | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/range/ion-change-event/angular/example_component_ts.md b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
index b90eff62d29..5598aea1444 100644
--- a/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonicModule, RangeCustomEvent } from '@ionic/angular';
 import { RangeValue } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   lastEmittedValue: RangeValue;
diff --git a/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
index e4b331a10f2..e9221985fbb 100644
--- a/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonicModule, RangeCustomEvent } from '@ionic/angular';
 import { RangeValue } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   moveStart: RangeValue;
diff --git a/static/usage/v6/range/pins/angular/example_component_ts.md b/static/usage/v6/range/pins/angular/example_component_ts.md
index 8dc875e1bda..07226d94d76 100644
--- a/static/usage/v6/range/pins/angular/example_component_ts.md
+++ b/static/usage/v6/range/pins/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   pinFormatter(value: number) {

From dc66afa5b7065fab0d3045ad6fa8b9cd93573262 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 16:13:21 -0500
Subject: [PATCH 22/53] docs(v6): update Angular examples for refresher

---
 .../advanced/angular/example_component_ts.md      | 15 +++++++++++++++
 .../basic/angular/example_component_ts.md         |  3 +++
 .../angular/example_component_ts.md               |  3 +++
 .../angular/example_component_ts.md               |  3 +++
 .../angular/example_component_ts.md               |  3 +++
 5 files changed, 27 insertions(+)

diff --git a/static/usage/v6/refresher/advanced/angular/example_component_ts.md b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
index 98888ac14fa..6c7bd37d064 100644
--- a/static/usage/v6/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
@@ -1,12 +1,27 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { ellipse } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
+    constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ ellipse });
+  }
+
   public names = [
     'Burt Bear',
     'Charlie Cheetah',
diff --git a/static/usage/v6/refresher/basic/angular/example_component_ts.md b/static/usage/v6/refresher/basic/angular/example_component_ts.md
index 74304953d4e..da645e02fcc 100644
--- a/static/usage/v6/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/basic/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
index 74304953d4e..da645e02fcc 100644
--- a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
index a5ac7eaaa9a..c2d3fc6797e 100644
--- a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
index 74304953d4e..da645e02fcc 100644
--- a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleRefresh(event) {

From 7eea39b8042ce27eeb077b37a80897b6be37a0c4 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 16:36:27 -0500
Subject: [PATCH 23/53] docs(v6): update Angular examples for reorder

---
 .../basic/angular/example_component_ts.md        |  4 +++-
 .../custom-icon/angular/example_component_ts.md  | 16 ++++++++++++++--
 .../angular/example_component_ts.md              |  4 +++-
 .../angular/example_component_ts.md              |  4 +++-
 .../angular/example_component_ts.md              |  6 ++++--
 .../wrapper/angular/example_component_ts.md      |  4 +++-
 6 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/static/usage/v6/reorder/basic/angular/example_component_ts.md b/static/usage/v6/reorder/basic/angular/example_component_ts.md
index 7a5c867f791..bba98788a9a 100644
--- a/static/usage/v6/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/basic/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
index 7a5c867f791..c8d1d3d7d7f 100644
--- a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
@@ -1,13 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { pizza } from 'ionicons/icons'
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ pizza });
+  }
+
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
index 2cd3dd66740..d85638526b6 100644
--- a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,12 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
index af0ff643b26..82b984f02af 100644
--- a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
index 11e2f59d553..70e52c80f30 100644
--- a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
index 7a5c867f791..bba98788a9a 100644
--- a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { ItemReorderEventDetail } from '@ionic/angular';
+import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {

From 1d609aa938399cdacd588d4ec0cbed02424809ef Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 17:02:51 -0500
Subject: [PATCH 24/53] docs(v6): update Angular examples for searchbar

---
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 .../usage/v6/searchbar/cancel-button/index.md | 15 ++++++++++--
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 .../usage/v6/searchbar/clear-button/index.md  | 15 ++++++++++--
 .../debounce/angular/example_component_ts.md  |  4 ++++
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 .../usage/v6/searchbar/search-icon/index.md   | 20 ++++++++++++++--
 10 files changed, 117 insertions(+), 6 deletions(-)
 rename static/usage/v6/searchbar/cancel-button/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
 rename static/usage/v6/searchbar/clear-button/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
 rename static/usage/v6/searchbar/search-icon/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/search-icon/angular/example_component_ts.md

diff --git a/static/usage/v6/searchbar/cancel-button/angular.md b/static/usage/v6/searchbar/cancel-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/searchbar/cancel-button/angular.md
rename to static/usage/v6/searchbar/cancel-button/angular/example_component_html.md
diff --git a/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
new file mode 100644
index 00000000000..15d1ac8b9b8
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { trash } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ trash });
+  }
+}
+```
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index 4ad2c30b731..514ad222d50 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/searchbar/cancel-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v6/searchbar/clear-button/angular.md b/static/usage/v6/searchbar/clear-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/searchbar/clear-button/angular.md
rename to static/usage/v6/searchbar/clear-button/angular/example_component_html.md
diff --git a/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
new file mode 100644
index 00000000000..de602d23876
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { trashBin } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ trashBin });
+  }
+}
+```
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
index aa821ec048b..1aa1969a5e0 100644
--- a/static/usage/v6/searchbar/clear-button/index.md
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/searchbar/clear-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
index 1017ac602f9..f0b1bc3058a 100644
--- a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   public data = [
diff --git a/static/usage/v6/searchbar/search-icon/angular.md b/static/usage/v6/searchbar/search-icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/searchbar/search-icon/angular.md
rename to static/usage/v6/searchbar/search-icon/angular/example_component_html.md
diff --git a/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..ca4327f025d
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { searchCircle } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ searchCircle });
+  }
+}
+```
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
index c3611623923..e7dbf671773 100644
--- a/static/usage/v6/searchbar/search-icon/index.md
+++ b/static/usage/v6/searchbar/search-icon/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';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/search-icon/demo.html" />
+<Playground
+  version="6"
+  size="xsmall"
+  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/v6/searchbar/search-icon/demo.html"
+/>

From 143d9ef0ed8cff9c808476e6d78112958760068d Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 23 Jul 2025 17:27:00 -0500
Subject: [PATCH 25/53] docs(v6): update Angular examples for segment

---
 .../example_component_html.md}                |  0
 .../angular/example_component_ts.md           | 23 +++++++++++++++++++
 static/usage/v6/segment/scrollable/index.md   | 15 ++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 rename static/usage/v6/segment/scrollable/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/segment/scrollable/angular/example_component_ts.md

diff --git a/static/usage/v6/segment/scrollable/angular.md b/static/usage/v6/segment/scrollable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/segment/scrollable/angular.md
rename to static/usage/v6/segment/scrollable/angular/example_component_html.md
diff --git a/static/usage/v6/segment/scrollable/angular/example_component_ts.md b/static/usage/v6/segment/scrollable/angular/example_component_ts.md
new file mode 100644
index 00000000000..cc1db4d8b9e
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ home, heart, pin, star, call, globe, basket, barbell, trash, person });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
index de206ca652a..99fb5dd2b5b 100644
--- a/static/usage/v6/segment/scrollable/index.md
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/segment/scrollable/demo.html"
   size="100px"
 />

From 34fcc9b4c88a47d1fe37aac85f81b10eeb0833bd Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 24 Jul 2025 11:34:58 -0500
Subject: [PATCH 26/53] docs(v6): update Angular examples for segment-button

---
 .../example_component_html.md}                |  0
 .../layout/angular/example_component_ts.md    | 23 +++++++++++++++++++
 .../usage/v6/segment-button/layout/index.md   | 15 ++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 rename static/usage/v6/segment-button/layout/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/segment-button/layout/angular/example_component_ts.md

diff --git a/static/usage/v6/segment-button/layout/angular.md b/static/usage/v6/segment-button/layout/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/segment-button/layout/angular.md
rename to static/usage/v6/segment-button/layout/angular/example_component_html.md
diff --git a/static/usage/v6/segment-button/layout/angular/example_component_ts.md b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..a28895e2963
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { call, heart, pin } from 'ionicons/icons';
+
+@Component({
+    selector: 'app-example',
+    templateUrl: 'example.component.html',
+    imports: [IonicModule],
+    standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ call, heart, pin });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
index 5ddcc6a17b8..7667f27685c 100644
--- a/static/usage/v6/segment-button/layout/index.md
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/segment-button/layout/demo.html"
   size="medium"
 />

From 050151398ee917ba80f1e5bd9ce75335a2207f30 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 24 Jul 2025 11:48:19 -0500
Subject: [PATCH 27/53] docs(v6): update Angular example for segment-button

---
 .../segment-button/layout/angular/example_component_ts.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/usage/v6/segment-button/layout/angular/example_component_ts.md b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
index a28895e2963..d9efe5ebb6b 100644
--- a/static/usage/v6/segment-button/layout/angular/example_component_ts.md
+++ b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { call, heart, pin } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor() {

From 626a46f4499171cc181a72646440b839702fe54c Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 24 Jul 2025 12:57:58 -0500
Subject: [PATCH 28/53] docs(v6): update Angular examples for select

---
 .../angular/example_component_ts.md           |  4 ++++
 .../angular/example_component_ts.md           |  3 +++
 .../angular/example_component_ts.md           |  3 +++
 .../angular/example_component_ts.md           |  4 ++++
 .../angular/example_component_ts.md           |  4 ++++
 .../select/typeahead/angular/app_module_ts.md | 19 -------------------
 .../typeahead/angular/example_component_ts.md |  5 ++++-
 .../angular/modal-example_component_ts.md     |  7 +++++--
 static/usage/v6/select/typeahead/index.md     |  2 --
 9 files changed, 27 insertions(+), 24 deletions(-)
 delete mode 100644 static/usage/v6/select/typeahead/angular/app_module_ts.md

diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
index 18c0b1eaa1b..bb9cd83a61d 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   logs: string[] = [];
diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
index c3f34d0adaf..182ba06c748 100644
--- a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
index 4db53a836a9..1b3dae1494b 100644
--- a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 76fa7e51e49..b40026fbcc5 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   currentFood = undefined;
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index afbd5f454cd..c4702a09f86 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   currentFood = undefined;
diff --git a/static/usage/v6/select/typeahead/angular/app_module_ts.md b/static/usage/v6/select/typeahead/angular/app_module_ts.md
deleted file mode 100644
index 0fa58037717..00000000000
--- a/static/usage/v6/select/typeahead/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { TypeaheadComponent } from './typeahead.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md
index ded6fa60b0f..261d85387f2 100644
--- a/static/usage/v6/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { IonicModule, IonModal } from '@ionic/angular';
+import { TypeaheadComponent } from './typeahead.component';
 import { Item } from './types';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule, TypeaheadComponent],
+  standalone: true
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
index 9bd21f1b404..7fa35713398 100644
--- a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import type { OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 import { Item } from './types';
 
 @Component({
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
+  imports: [CommonModule, IonicModule],
+  standalone: true
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md
index aa76c597de1..bd7317bc117 100644
--- a/static/usage/v6/select/typeahead/index.md
+++ b/static/usage/v6/select/typeahead/index.md
@@ -10,7 +10,6 @@ import vue_example from './vue/example_vue.md';
 import vue_types_ts from './vue/vue_types_ts.md';
 import vue_typeahead_component from './vue/typeahead_component_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
@@ -41,7 +40,6 @@ import angular_types_ts from './angular/angular_types_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/typeahead.component.html': angular_modal_example_component_html,
         'src/app/typeahead.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
         'src/app/types.ts': angular_types_ts,
       },
     },

From d243ff3448c7c2e658917c1b857c1f9119677488 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 24 Jul 2025 15:24:25 -0500
Subject: [PATCH 29/53] docs(v6): update Angular example for router

---
 .../tabs/router/angular/app_component_html.md |  3 --
 .../v6/tabs/router/angular/app_module_ts.md   | 19 ---------
 .../v6/tabs/router/angular/app_routes_ts.md   | 33 +++++++++++++++
 .../router/angular/app_routing_module_ts.md   | 42 -------------------
 .../router/angular/example_component_html.md  |  9 ++--
 .../router/angular/example_component_ts.md    | 25 +++++++++++
 .../router/angular/home_page_component_ts.md  |  4 ++
 .../router/angular/home_page_module_ts.md     | 14 -------
 .../angular/library_page_component_ts.md      |  4 ++
 .../router/angular/library_page_module_ts.md  | 14 -------
 .../router/angular/radio_page_component_ts.md |  4 ++
 .../router/angular/radio_page_module_ts.md    | 14 -------
 .../angular/search_page_component_ts.md       |  4 ++
 .../router/angular/search_page_module_ts.md   | 14 -------
 static/usage/v6/tabs/router/index.md          | 20 +++------
 15 files changed, 84 insertions(+), 139 deletions(-)
 delete mode 100644 static/usage/v6/tabs/router/angular/app_component_html.md
 delete mode 100644 static/usage/v6/tabs/router/angular/app_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/app_routes_ts.md
 delete mode 100644 static/usage/v6/tabs/router/angular/app_routing_module_ts.md
 create mode 100644 static/usage/v6/tabs/router/angular/example_component_ts.md
 delete mode 100644 static/usage/v6/tabs/router/angular/home_page_module_ts.md
 delete mode 100644 static/usage/v6/tabs/router/angular/library_page_module_ts.md
 delete mode 100644 static/usage/v6/tabs/router/angular/radio_page_module_ts.md
 delete mode 100644 static/usage/v6/tabs/router/angular/search_page_module_ts.md

diff --git a/static/usage/v6/tabs/router/angular/app_component_html.md b/static/usage/v6/tabs/router/angular/app_component_html.md
deleted file mode 100644
index 7636539f28a..00000000000
--- a/static/usage/v6/tabs/router/angular/app_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-router-outlet></ion-router-outlet>
-```
diff --git a/static/usage/v6/tabs/router/angular/app_module_ts.md b/static/usage/v6/tabs/router/angular/app_module_ts.md
deleted file mode 100644
index e36b8c6316e..00000000000
--- a/static/usage/v6/tabs/router/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { AppRoutingModule } from './app-routing.module';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/tabs/router/angular/app_routes_ts.md b/static/usage/v6/tabs/router/angular/app_routes_ts.md
new file mode 100644
index 00000000000..12354f4efa7
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_routes_ts.md
@@ -0,0 +1,33 @@
+```ts
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./example.component').then((m) => m.ExampleComponent),
+    children: [
+      {
+        path: 'home',
+        loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent),
+      },
+      {
+        path: 'radio',
+        loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent),
+      },
+      {
+        path: 'library',
+        loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent),
+      },
+      {
+        path: 'search',
+        loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/home',
+        pathMatch: 'full',
+      },
+    ]
+  },
+];
+```
\ No newline at end of file
diff --git a/static/usage/v6/tabs/router/angular/app_routing_module_ts.md b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
deleted file mode 100644
index 7ff1067030f..00000000000
--- a/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
+++ /dev/null
@@ -1,42 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ExampleComponent } from './example.component';
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot([
-      {
-        path: '',
-        component: ExampleComponent,
-        children: [
-          {
-            path: '',
-            pathMatch: 'full',
-            redirectTo: 'home',
-          },
-          {
-            path: 'home',
-            loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
-          },
-          {
-            path: 'radio',
-            loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
-          },
-          {
-            path: 'library',
-            loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
-          },
-          {
-            path: 'search',
-            loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
-          },
-        ],
-      },
-    ]),
-  ],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
-```
diff --git a/static/usage/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md
index 67be68b564c..50736b8d969 100644
--- a/static/usage/v6/tabs/router/angular/example_component_html.md
+++ b/static/usage/v6/tabs/router/angular/example_component_html.md
@@ -1,19 +1,20 @@
 ```html
+<router-outlet ></router-outlet>
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="home">
+    <ion-tab-button routerLink="home" routerLinkActive="tab-selected">
       <ion-icon name="play-circle"></ion-icon>
       Listen Now
     </ion-tab-button>
-    <ion-tab-button tab="radio">
+    <ion-tab-button routerLink="radio" routerLinkActive="tab-selected">
       <ion-icon name="radio"></ion-icon>
       Radio
     </ion-tab-button>
-    <ion-tab-button tab="library">
+    <ion-tab-button routerLink="library" routerLinkActive="tab-selected">
       <ion-icon name="library"></ion-icon>
       Library
     </ion-tab-button>
-    <ion-tab-button tab="search">
+    <ion-tab-button routerLink="search" routerLinkActive="tab-selected">
       <ion-icon name="search"></ion-icon>
       Search
     </ion-tab-button>
diff --git a/static/usage/v6/tabs/router/angular/example_component_ts.md b/static/usage/v6/tabs/router/angular/example_component_ts.md
new file mode 100644
index 00000000000..6c41e6987d3
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/example_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { playCircle, library, radio, search } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [CommonModule, IonicModule, RouterModule],
+  standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ playCircle, library, radio, search });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_ts.md b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
index 9e2ef0a3e8c..72d45fbf0b6 100644
--- a/static/usage/v6/tabs/router/angular/home_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class HomePageComponent {}
+
 ```
diff --git a/static/usage/v6/tabs/router/angular/home_page_module_ts.md b/static/usage/v6/tabs/router/angular/home_page_module_ts.md
deleted file mode 100644
index 2a1fb15b460..00000000000
--- a/static/usage/v6/tabs/router/angular/home_page_module_ts.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { HomePageComponent } from './home-page.component';
-
-import { IonicModule } from '@ionic/angular';
-
-@NgModule({
-  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
-  declarations: [HomePageComponent],
-  exports: [HomePageComponent],
-})
-export class HomePageModule {}
-```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_ts.md b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
index f5a92a4868a..e98a5767193 100644
--- a/static/usage/v6/tabs/router/angular/library_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-library-page',
   templateUrl: './library-page.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class LibraryPageComponent {}
+
 ```
diff --git a/static/usage/v6/tabs/router/angular/library_page_module_ts.md b/static/usage/v6/tabs/router/angular/library_page_module_ts.md
deleted file mode 100644
index 8e2ab48cf39..00000000000
--- a/static/usage/v6/tabs/router/angular/library_page_module_ts.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-
-import { LibraryPageComponent } from './library-page.component';
-
-@NgModule({
-  imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
-  declarations: [LibraryPageComponent],
-  exports: [LibraryPageComponent],
-})
-export class LibraryPageModule {}
-```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
index d29209c00dd..0a0e41154be 100644
--- a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class RadioPageComponent {}
+
 ```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_module_ts.md b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
deleted file mode 100644
index f50a0088632..00000000000
--- a/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { RadioPageComponent } from './radio-page.component';
-
-import { IonicModule } from '@ionic/angular';
-
-@NgModule({
-  imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
-  declarations: [RadioPageComponent],
-  exports: [RadioPageComponent],
-})
-export class RadioPageModule {}
-```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_ts.md b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
index bd6e723d332..1c4f7e91650 100644
--- a/static/usage/v6/tabs/router/angular/search_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-search-page',
   templateUrl: './search-page.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class SearchPageComponent {}
+
 ```
diff --git a/static/usage/v6/tabs/router/angular/search_page_module_ts.md b/static/usage/v6/tabs/router/angular/search_page_module_ts.md
deleted file mode 100644
index a1d599c5d9b..00000000000
--- a/static/usage/v6/tabs/router/angular/search_page_module_ts.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { SearchPageComponent } from './search-page.component';
-
-import { IonicModule } from '@ionic/angular';
-
-@NgModule({
-  imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
-  declarations: [SearchPageComponent],
-  exports: [SearchPageComponent],
-})
-export class SearchPageModule {}
-```
diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md
index 7acff190150..bd728e9f3df 100644
--- a/static/usage/v6/tabs/router/index.md
+++ b/static/usage/v6/tabs/router/index.md
@@ -2,28 +2,22 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_component_html from './angular/app_component_html.md';
-import angular_app_module_ts from './angular/app_module_ts.md';
-import angular_app_routing_module_ts from './angular/app_routing_module_ts.md';
-
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
-import angular_home_page_module_ts from './angular/home_page_module_ts.md';
 import angular_home_page_component_ts from './angular/home_page_component_ts.md';
 import angular_home_page_component_html from './angular/home_page_component_html.md';
 
-import angular_library_page_module_ts from './angular/library_page_module_ts.md';
 import angular_library_page_component_ts from './angular/library_page_component_ts.md';
 import angular_library_page_component_html from './angular/library_page_component_html.md';
 
-import angular_radio_page_module_ts from './angular/radio_page_module_ts.md';
 import angular_radio_page_component_ts from './angular/radio_page_component_ts.md';
 import angular_radio_page_component_html from './angular/radio_page_component_html.md';
 
-import angular_search_page_module_ts from './angular/search_page_module_ts.md';
 import angular_search_page_component_ts from './angular/search_page_component_ts.md';
 import angular_search_page_component_html from './angular/search_page_component_html.md';
 
+import app_routes_ts from './angular/app_routes_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 import vue_app_vue from './vue/app_vue.md';
@@ -48,22 +42,18 @@ import react_search_page_tsx from './react/search_page_tsx.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/app.routes.ts':
+        app_routes_ts,
         'src/app/home/home-page.component.ts': angular_home_page_component_ts,
         'src/app/home/home-page.component.html': angular_home_page_component_html,
         'src/global.css': angular_global_css,
-        'src/app/home/home-page.module.ts': angular_home_page_module_ts,
         'src/app/library/library-page.component.ts': angular_library_page_component_ts,
         'src/app/library/library-page.component.html': angular_library_page_component_html,
-        'src/app/library/library-page.module.ts': angular_library_page_module_ts,
         'src/app/radio/radio-page.component.ts': angular_radio_page_component_ts,
         'src/app/radio/radio-page.component.html': angular_radio_page_component_html,
-        'src/app/radio/radio-page.module.ts': angular_radio_page_module_ts,
         'src/app/search/search-page.component.ts': angular_search_page_component_ts,
         'src/app/search/search-page.component.html': angular_search_page_component_html,
-        'src/app/search/search-page.module.ts': angular_search_page_module_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app-routing.module.ts': angular_app_routing_module_ts,
       },
     },
     vue: {

From 2ee2ea98ac5ad421702fb99ef9e39494d0dcff9e Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Thu, 24 Jul 2025 16:35:46 -0500
Subject: [PATCH 30/53] docs(v6): update Angular examples for toast

---
 .../toast/buttons/angular/example_component_ts.md |  4 +++-
 .../v6/toast/icon/angular/example_component_ts.md | 15 +++++++++++++--
 .../toast/layout/angular/example_component_ts.md  |  5 +++--
 .../controller/angular/example_component_ts.md    |  4 +++-
 .../toast/theming/angular/example_component_ts.md |  4 +++-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md
index faf1f33ed5b..3ecbef74070 100644
--- a/static/usage/v6/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   handlerMessage = '';
diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md
index d72053bd950..76fb647250e 100644
--- a/static/usage/v6/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v6/toast/icon/angular/example_component_ts.md
@@ -1,13 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
-  constructor(private toastController: ToastController) {}
+  constructor(private toastController: ToastController) {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ globe });
+  }
 
   async presentToast() {
     const toast = await this.toastController.create({
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
index 01636b04a97..c8193f8d7f4 100644
--- a/static/usage/v6/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
-import type { ToastOptions } from '@ionic/angular';
+import { IonicModule, ToastController, ToastOptions } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
index db133a99f1e..7ca690867d4 100644
--- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md
index 7f490b9bacc..e537ed3839c 100644
--- a/static/usage/v6/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v6/toast/theming/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}

From 5934210a1596f39407825ac12b305eee225aabcb Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 10:20:26 -0500
Subject: [PATCH 31/53] docs(v6): update Angular examples for toolbar

---
 .../example_component_html.md}                |  0
 .../buttons/angular/example_component_ts.md   | 23 +++++++++++++++++++
 static/usage/v6/toolbar/buttons/index.md      | 15 ++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 rename static/usage/v6/toolbar/buttons/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/toolbar/buttons/angular/example_component_ts.md

diff --git a/static/usage/v6/toolbar/buttons/angular.md b/static/usage/v6/toolbar/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/toolbar/buttons/angular.md
rename to static/usage/v6/toolbar/buttons/angular/example_component_html.md
diff --git a/static/usage/v6/toolbar/buttons/angular/example_component_ts.md b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..34d9c7d9c6a
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
+})
+export class ExampleComponent{
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
index 2ac28550f9d..2423b16df41 100644
--- a/static/usage/v6/toolbar/buttons/index.md
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/toolbar/buttons/demo.html"
   size="500px"
 />

From 28795fba12ccb91d04d3873281f86bdc3fe5d708 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 10:43:01 -0500
Subject: [PATCH 32/53] docs(v6): update Angular example for buttons

---
 .../example_component_html.md}                |  0
 .../types/angular/example_component_ts.md     | 23 +++++++++++++++++++
 static/usage/v6/buttons/types/index.md        | 15 ++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 rename static/usage/v6/buttons/types/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/buttons/types/angular/example_component_ts.md

diff --git a/static/usage/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/buttons/types/angular.md
rename to static/usage/v6/buttons/types/angular/example_component_html.md
diff --git a/static/usage/v6/buttons/types/angular/example_component_ts.md b/static/usage/v6/buttons/types/angular/example_component_ts.md
new file mode 100644
index 00000000000..34d9c7d9c6a
--- /dev/null
+++ b/static/usage/v6/buttons/types/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
+})
+export class ExampleComponent{
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
index f0bee55af1c..dc1a527af29 100644
--- a/static/usage/v6/buttons/types/index.md
+++ b/static/usage/v6/buttons/types/index.md
@@ -3,11 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="6"
-  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/v6/buttons/types/demo.html"
   size="medium"
 />

From b9b4fd06e898e52471ef73093f35a95aae04b524 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 11:09:54 -0500
Subject: [PATCH 33/53] docs(v6): update Angular examples for back-button

---
 .../basic/angular/app_module_ts.md            | 20 -------------------
 .../basic/angular/example_component_ts.md     |  4 +++-
 .../basic/angular/page_one_component_ts.md    |  4 +++-
 .../basic/angular/page_two_component_ts.md    |  3 +++
 static/usage/v6/back-button/basic/index.md    |  2 --
 .../custom/angular/app_module_ts.md           | 20 -------------------
 .../custom/angular/example_component_ts.md    |  3 +++
 .../custom/angular/page_one_component_ts.md   |  4 +++-
 .../custom/angular/page_two_component_ts.md   | 16 ++++++++++++++-
 static/usage/v6/back-button/custom/index.md   |  2 --
 10 files changed, 30 insertions(+), 48 deletions(-)
 delete mode 100644 static/usage/v6/back-button/basic/angular/app_module_ts.md
 delete mode 100644 static/usage/v6/back-button/custom/angular/app_module_ts.md

diff --git a/static/usage/v6/back-button/basic/angular/app_module_ts.md b/static/usage/v6/back-button/basic/angular/app_module_ts.md
deleted file mode 100644
index 3c20b511446..00000000000
--- a/static/usage/v6/back-button/basic/angular/app_module_ts.md
+++ /dev/null
@@ -1,20 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/back-button/basic/angular/example_component_ts.md b/static/usage/v6/back-button/basic/angular/example_component_ts.md
index b123a4858ce..370b2ed24e1 100644
--- a/static/usage/v6/back-button/basic/angular/example_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/back-button/basic/angular/page_one_component_ts.md b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
index d181c5a5268..821db5df9a4 100644
--- a/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageTwoComponent } from './page-two.component';
 
 @Component({
@@ -19,6 +19,8 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
index b2cda11d2a8..8caa5a483e8 100644
--- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +18,8 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageTwoComponent {}
 ```
diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md
index 6c29748fe6f..5015c2398fe 100644
--- a/static/usage/v6/back-button/basic/index.md
+++ b/static/usage/v6/back-button/basic/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v6/back-button/custom/angular/app_module_ts.md b/static/usage/v6/back-button/custom/angular/app_module_ts.md
deleted file mode 100644
index 3c20b511446..00000000000
--- a/static/usage/v6/back-button/custom/angular/app_module_ts.md
+++ /dev/null
@@ -1,20 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v6/back-button/custom/angular/example_component_ts.md b/static/usage/v6/back-button/custom/angular/example_component_ts.md
index b123a4858ce..ea06d82a402 100644
--- a/static/usage/v6/back-button/custom/angular/example_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
index d181c5a5268..821db5df9a4 100644
--- a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-
+import { IonicModule } from '@ionic/angular';
 import { PageTwoComponent } from './page-two.component';
 
 @Component({
@@ -19,6 +19,8 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
index 05a1bd64d79..2cfa4a7dfbd 100644
--- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
@@ -1,5 +1,8 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { caretBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +20,17 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonicModule],
+  standalone: true
 })
-export class PageTwoComponent {}
+export class PageTwoComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretBack });
+  }
+}
 ```
diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md
index 30f58541ecb..69bde337fa3 100644
--- a/static/usage/v6/back-button/custom/index.md
+++ b/static/usage/v6/back-button/custom/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {

From f48db54f1796cf1616d489cc1480b8b26b075d12 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 11:20:33 -0500
Subject: [PATCH 34/53] docs(v6): update Angular example for text

---
 .../example_component_html.md}                |  0
 .../basic/angular/example_component_ts.md     | 23 +++++++++++++++++++
 static/usage/v6/text/basic/index.md           | 18 +++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 rename static/usage/v6/text/basic/{angular.md => angular/example_component_html.md} (100%)
 create mode 100644 static/usage/v6/text/basic/angular/example_component_ts.md

diff --git a/static/usage/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v6/text/basic/angular.md
rename to static/usage/v6/text/basic/angular/example_component_html.md
diff --git a/static/usage/v6/text/basic/angular/example_component_ts.md b/static/usage/v6/text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..6ed4de437b4
--- /dev/null
+++ b/static/usage/v6/text/basic/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { warning } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ warning });
+  }
+}
+```
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
index 06efaf44145..24f162c246d 100644
--- a/static/usage/v6/text/basic/index.md
+++ b/static/usage/v6/text/basic/index.md
@@ -3,6 +3,20 @@ 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="6" code={{ javascript, react, vue, angular }} src="usage/v6/text/basic/demo.html" />
+<Playground
+  version="6"
+  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/v6/text/basic/demo.html" />

From 50c1e6f83829116f55ebcb7b99628f672df52bf9 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 14:29:08 -0500
Subject: [PATCH 35/53] docs(v6): revert changes required to build v6 docs
 locally

---
 versioned_docs/version-v5/developer-resources/books.md | 2 +-
 versioned_docs/version-v6/developer-resources/books.md | 2 +-
 versions.json                                          | 3 +--
 versionsArchived.json                                  | 1 +
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/versioned_docs/version-v5/developer-resources/books.md b/versioned_docs/version-v5/developer-resources/books.md
index 4553ac800c3..1a51bc94e8f 100644
--- a/versioned_docs/version-v5/developer-resources/books.md
+++ b/versioned_docs/version-v5/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https://developer.school)
+by [Paul Halliday](https:://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.md
index 4553ac800c3..1a51bc94e8f 100644
--- a/versioned_docs/version-v6/developer-resources/books.md
+++ b/versioned_docs/version-v6/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https://developer.school)
+by [Paul Halliday](https:://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versions.json b/versions.json
index ed163ab5c09..48698a4fdec 100644
--- a/versions.json
+++ b/versions.json
@@ -1,4 +1,3 @@
 [
-  "v7",
-  "v6"
+  "v7"
 ]
diff --git a/versionsArchived.json b/versionsArchived.json
index 56bd2d5bcb6..9d103a53775 100644
--- a/versionsArchived.json
+++ b/versionsArchived.json
@@ -1,3 +1,4 @@
 {
+  "v6": "https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6",
   "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5"
 }

From d49391baf7798a5c5bad4f9fd31938f06a1d1f29 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Fri, 25 Jul 2025 14:35:15 -0500
Subject: [PATCH 36/53] docs(v6): run linter

---
 .../angular/example_component_ts.md                    |  2 +-
 .../icons/angular/example_component_ts.md              | 10 +++++-----
 .../listen-changes/angular/example_component_ts.md     |  2 +-
 .../accordion/toggle/angular/example_component_ts.md   |  2 +-
 .../action-sheet/basic/angular/example_component_ts.md |  2 +-
 .../css-properties/angular/example_component_ts.md     |  2 +-
 .../theming/styling/angular/example_component_ts.md    |  2 +-
 .../v6/alert/buttons/angular/example_component_ts.md   |  2 +-
 .../customization/angular/example_component_ts.md      |  2 +-
 .../inputs/radios/angular/example_component_ts.md      |  2 +-
 .../inputs/text-inputs/angular/example_component_ts.md |  2 +-
 .../back-button/basic/angular/example_component_ts.md  |  2 +-
 .../back-button/basic/angular/page_one_component_ts.md |  2 +-
 .../back-button/basic/angular/page_two_component_ts.md |  2 +-
 .../back-button/custom/angular/example_component_ts.md |  2 +-
 .../custom/angular/page_one_component_ts.md            |  2 +-
 .../custom/angular/page_two_component_ts.md            |  2 +-
 .../expand-on-click/angular/example_component_ts.md    |  2 +-
 .../popover-on-click/angular/example_component_ts.md   |  2 +-
 .../custom-separators/angular/example_component_ts.md  | 10 +++++-----
 .../icons-on-items/angular/example_component_ts.md     | 10 +++++-----
 .../v6/buttons/types/angular/example_component_ts.md   |  6 +++---
 static/usage/v6/buttons/types/index.md                 |  2 +-
 .../scroll-events/angular/example_component_ts.md      |  2 +-
 .../scroll-methods/angular/example_component_ts.md     |  2 +-
 .../advanced/angular/example_component_ts.md           |  2 +-
 .../array/angular/example_component_ts.md              |  2 +-
 .../callback/angular/example_component_ts.md           |  2 +-
 .../v6/icon/basic/angular/example_component_ts.md      | 10 +++++-----
 static/usage/v6/icon/basic/index.md                    |  2 +-
 .../basic/angular/example_component_ts.md              |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../v6/input/filtering/angular/example_component_ts.md |  2 +-
 .../v6/item/buttons/angular/example_component_ts.md    | 10 +++++-----
 static/usage/v6/item/buttons/index.md                  |  2 +-
 .../v6/item/counter/angular/example_component_ts.md    |  2 +-
 .../v6/item/icons/angular/example_component_ts.md      | 10 +++++-----
 static/usage/v6/item/icons/index.md                    |  2 +-
 .../v6/item/lines/angular/example_component_ts.md      | 10 +++++-----
 static/usage/v6/item/lines/index.md                    |  2 +-
 .../loading/controller/angular/example_component_ts.md |  2 +-
 .../loading/spinners/angular/example_component_ts.md   |  2 +-
 .../v6/loading/theming/angular/example_component_ts.md |  2 +-
 .../usage/v6/menu/type/angular/example_component_ts.md |  2 +-
 .../boolean/angular/example_component_ts.md            |  2 +-
 .../function/angular/example_component_ts.md           |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../modal/card/basic/angular/example_component_ts.md   |  2 +-
 .../modal/controller/angular/example_component_ts.md   |  2 +-
 .../controller/angular/modal-example_component_ts.md   |  2 +-
 .../modal/inline/basic/angular/example_component_ts.md |  2 +-
 .../inline/is-open/angular/example_component_ts.md     |  2 +-
 .../background-content/angular/example_component_ts.md |  2 +-
 .../styling/animations/angular/example_component_ts.md |  2 +-
 .../v6/nav/nav-link/angular/example_component_ts.md    |  2 +-
 .../v6/nav/nav-link/angular/page_one_component_ts.md   |  2 +-
 .../v6/nav/nav-link/angular/page_three_component_ts.md |  2 +-
 .../v6/nav/nav-link/angular/page_two_component_ts.md   |  2 +-
 .../multiple-column/angular/example_component_ts.md    |  2 +-
 .../single-column/angular/example_component_ts.md      |  2 +-
 .../positioning/angular/example_component_ts.md        |  2 +-
 .../controller/angular/example_component_ts.md         |  2 +-
 .../controller/angular/popover_component_ts.md         |  2 +-
 .../inline-isopen/angular/example_component_ts.md      |  2 +-
 .../buffer/angular/example_component_ts.md             |  2 +-
 .../determinate/angular/example_component_ts.md        |  2 +-
 .../ion-change-event/angular/example_component_ts.md   |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../v6/range/pins/angular/example_component_ts.md      |  2 +-
 .../refresher/advanced/angular/example_component_ts.md |  4 ++--
 .../v6/refresher/basic/angular/example_component_ts.md |  2 +-
 .../custom-content/angular/example_component_ts.md     |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../pull-properties/angular/example_component_ts.md    |  2 +-
 .../v6/reorder/basic/angular/example_component_ts.md   |  2 +-
 .../custom-icon/angular/example_component_ts.md        |  4 ++--
 .../angular/example_component_ts.md                    |  2 +-
 .../toggling-disabled/angular/example_component_ts.md  |  2 +-
 .../updating-data/angular/example_component_ts.md      |  2 +-
 .../v6/reorder/wrapper/angular/example_component_ts.md |  2 +-
 .../cancel-button/angular/example_component_ts.md      |  8 ++++----
 static/usage/v6/searchbar/cancel-button/index.md       |  2 +-
 .../clear-button/angular/example_component_ts.md       |  8 ++++----
 static/usage/v6/searchbar/clear-button/index.md        |  2 +-
 .../searchbar/debounce/angular/example_component_ts.md |  2 +-
 .../search-icon/angular/example_component_ts.md        |  8 ++++----
 static/usage/v6/searchbar/search-icon/index.md         |  2 +-
 .../layout/angular/example_component_ts.md             |  4 ++--
 static/usage/v6/segment-button/layout/index.md         |  2 +-
 .../segment/scrollable/angular/example_component_ts.md | 10 +++++-----
 static/usage/v6/segment/scrollable/index.md            |  2 +-
 .../angular/example_component_ts.md                    |  2 +-
 .../interface-options/angular/example_component_ts.md  |  2 +-
 .../styling-select/angular/example_component_ts.md     |  2 +-
 .../multiple-selection/angular/example_component_ts.md |  2 +-
 .../using-comparewith/angular/example_component_ts.md  |  2 +-
 .../select/typeahead/angular/example_component_ts.md   |  2 +-
 .../typeahead/angular/modal-example_component_ts.md    |  2 +-
 .../basic/angular/example_component_ts.md              |  2 +-
 static/usage/v6/tabs/router/angular/app_routes_ts.md   |  4 ++--
 .../v6/tabs/router/angular/example_component_html.md   |  2 +-
 .../v6/tabs/router/angular/example_component_ts.md     |  4 ++--
 .../v6/tabs/router/angular/home_page_component_ts.md   |  3 +--
 .../tabs/router/angular/library_page_component_ts.md   |  3 +--
 .../v6/tabs/router/angular/radio_page_component_ts.md  |  3 +--
 .../v6/tabs/router/angular/search_page_component_ts.md |  3 +--
 static/usage/v6/tabs/router/index.md                   |  3 +--
 .../v6/text/basic/angular/example_component_ts.md      |  2 +-
 static/usage/v6/text/basic/index.md                    |  3 ++-
 .../v6/toast/buttons/angular/example_component_ts.md   |  2 +-
 .../v6/toast/icon/angular/example_component_ts.md      |  2 +-
 .../v6/toast/layout/angular/example_component_ts.md    |  2 +-
 .../controller/angular/example_component_ts.md         |  2 +-
 .../v6/toast/theming/angular/example_component_ts.md   |  2 +-
 .../v6/toolbar/buttons/angular/example_component_ts.md |  6 +++---
 static/usage/v6/toolbar/buttons/index.md               |  2 +-
 117 files changed, 168 insertions(+), 172 deletions(-)

diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
index 1b3dae1494b..1f697a67f80 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md
index e225a168a07..03ea4c8b466 100644
--- a/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { caretDownCircle } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ caretDownCircle });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
index 376333ed4c1..6ebf16a77b2 100644
--- a/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/listen-changes/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
diff --git a/static/usage/v6/accordion/toggle/angular/example_component_ts.md b/static/usage/v6/accordion/toggle/angular/example_component_ts.md
index 52f252cf2a0..fded6cb4af2 100644
--- a/static/usage/v6/accordion/toggle/angular/example_component_ts.md
+++ b/static/usage/v6/accordion/toggle/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, IonAccordionGroup } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
diff --git a/static/usage/v6/action-sheet/basic/angular/example_component_ts.md b/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
index 97e780edf31..ba50bc70655 100644
--- a/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/basic/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule, ActionSheetController } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   result: string;
diff --git a/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
index fbca9f2f603..d3f8f924ea3 100644
--- a/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule, ActionSheetController } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
index fbca9f2f603..d3f8f924ea3 100644
--- a/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
+++ b/static/usage/v6/action-sheet/theming/styling/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule, ActionSheetController } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/v6/alert/buttons/angular/example_component_ts.md b/static/usage/v6/alert/buttons/angular/example_component_ts.md
index f03a98e678b..9701e160be2 100644
--- a/static/usage/v6/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/alert/buttons/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, AlertController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handlerMessage = '';
diff --git a/static/usage/v6/alert/customization/angular/example_component_ts.md b/static/usage/v6/alert/customization/angular/example_component_ts.md
index 5cef7d8e3a4..b2c2a175342 100644
--- a/static/usage/v6/alert/customization/angular/example_component_ts.md
+++ b/static/usage/v6/alert/customization/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, AlertController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
index f06812967dc..b1a8dbc56c0 100644
--- a/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
+++ b/static/usage/v6/alert/inputs/radios/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, AlertController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
index a8ad4eb12a6..14b247e3789 100644
--- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
+++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, AlertController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v6/back-button/basic/angular/example_component_ts.md b/static/usage/v6/back-button/basic/angular/example_component_ts.md
index 370b2ed24e1..9f9e53a29f6 100644
--- a/static/usage/v6/back-button/basic/angular/example_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { PageOneComponent } from './page-one.component';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/back-button/basic/angular/page_one_component_ts.md b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
index 821db5df9a4..14bc20480f7 100644
--- a/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/page_one_component_ts.md
@@ -20,7 +20,7 @@ import { PageTwoComponent } from './page-two.component';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
index 8caa5a483e8..8aee8320f42 100644
--- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md
@@ -19,7 +19,7 @@ import { IonicModule } from '@ionic/angular';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageTwoComponent {}
 ```
diff --git a/static/usage/v6/back-button/custom/angular/example_component_ts.md b/static/usage/v6/back-button/custom/angular/example_component_ts.md
index ea06d82a402..a19973fd10a 100644
--- a/static/usage/v6/back-button/custom/angular/example_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { PageOneComponent } from './page-one.component';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
index 821db5df9a4..14bc20480f7 100644
--- a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md
@@ -20,7 +20,7 @@ import { PageTwoComponent } from './page-two.component';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
index 2cfa4a7dfbd..f2025503ad2 100644
--- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md
@@ -21,7 +21,7 @@ import { caretBack } from 'ionicons/icons';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageTwoComponent {
   constructor() {
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
index 38122fed8e3..04f35de0538 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   maxBreadcrumbs = 4;
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
index 22380950ca4..4f93cafc682 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
index dcd6b853b2b..123f58cf8f5 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { arrowForwardCircle } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ arrowForwardCircle });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
index a679de8d05c..c553dcb693c 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { home, flash, camera, film } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ home, flash, camera, film });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/buttons/types/angular/example_component_ts.md b/static/usage/v6/buttons/types/angular/example_component_ts.md
index 34d9c7d9c6a..f962e4d49ce 100644
--- a/static/usage/v6/buttons/types/angular/example_component_ts.md
+++ b/static/usage/v6/buttons/types/angular/example_component_ts.md
@@ -8,9 +8,9 @@ import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
-export class ExampleComponent{
+export class ExampleComponent {
   constructor() {
     /**
      * Any icons you want to use in your application
@@ -20,4 +20,4 @@ export class ExampleComponent{
     addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
index dc1a527af29..01e9778e127 100644
--- a/static/usage/v6/buttons/types/index.md
+++ b/static/usage/v6/buttons/types/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/buttons/types/demo.html"
   size="medium"
diff --git a/static/usage/v6/content/scroll-events/angular/example_component_ts.md b/static/usage/v6/content/scroll-events/angular/example_component_ts.md
index 658772dd54e..9926796477b 100644
--- a/static/usage/v6/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v6/content/scroll-events/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, ScrollDetail } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleScrollStart() {
diff --git a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
index bba0e43f6ff..01a79eec0ce 100644
--- a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
+++ b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, IonContent } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild(IonContent) content: IonContent;
diff --git a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
index 8d011a739b5..af65d2cf671 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index 5efbdc20571..56dff055f84 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
index 2d4359fee21..33986b357d3 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   highlightedDates = (isoString) => {
diff --git a/static/usage/v6/icon/basic/angular/example_component_ts.md b/static/usage/v6/icon/basic/angular/example_component_ts.md
index 0ca64333da3..c6a25a5dc11 100644
--- a/static/usage/v6/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v6/icon/basic/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { logoIonic } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ logoIonic });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
index ec92154552f..a27247f3e3d 100644
--- a/static/usage/v6/icon/basic/index.md
+++ b/static/usage/v6/icon/basic/index.md
@@ -18,7 +18,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/icon/basic/demo.html"
 />
diff --git a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
index ebf6b9ed53b..934a39abea7 100644
--- a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent implements OnInit {
   items = [];
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index ea0f1eb9cae..40bb589e5bf 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent implements OnInit {
   items = [];
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 542b7f41ba9..2ec1adfcafe 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent implements OnInit {
   items = [];
diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md
index edfd287601c..8f083cadfe4 100644
--- a/static/usage/v6/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v6/input/filtering/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import type { IonInput } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   inputModel = '';
diff --git a/static/usage/v6/item/buttons/angular/example_component_ts.md b/static/usage/v6/item/buttons/angular/example_component_ts.md
index 4a6b6830389..03e8f4a7d5f 100644
--- a/static/usage/v6/item/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/item/buttons/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { home, star, navigate } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ home, star, navigate });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
index 09299818a97..63de2031246 100644
--- a/static/usage/v6/item/buttons/index.md
+++ b/static/usage/v6/item/buttons/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/item/buttons/demo.html"
   size="250px"
diff --git a/static/usage/v6/item/counter/angular/example_component_ts.md b/static/usage/v6/item/counter/angular/example_component_ts.md
index ae875052f85..9eb78aca216 100644
--- a/static/usage/v6/item/counter/angular/example_component_ts.md
+++ b/static/usage/v6/item/counter/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v6/item/icons/angular/example_component_ts.md b/static/usage/v6/item/icons/angular/example_component_ts.md
index fd72c48805d..a21d45a08a0 100644
--- a/static/usage/v6/item/icons/angular/example_component_ts.md
+++ b/static/usage/v6/item/icons/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { informationCircle, star } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ informationCircle, star });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
index 92c2fdc5f3e..f4b1f4c15cc 100644
--- a/static/usage/v6/item/icons/index.md
+++ b/static/usage/v6/item/icons/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/item/icons/demo.html"
   size="250px"
diff --git a/static/usage/v6/item/lines/angular/example_component_ts.md b/static/usage/v6/item/lines/angular/example_component_ts.md
index 7322fe3faae..91fbb1dde73 100644
--- a/static/usage/v6/item/lines/angular/example_component_ts.md
+++ b/static/usage/v6/item/lines/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { star, informationCircle } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ star, informationCircle });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index 5d7f93525ae..c676c68e29e 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/item/lines/demo.html"
   size="medium"
diff --git a/static/usage/v6/loading/controller/angular/example_component_ts.md b/static/usage/v6/loading/controller/angular/example_component_ts.md
index 38ffd0010e4..71f74d8ae87 100644
--- a/static/usage/v6/loading/controller/angular/example_component_ts.md
+++ b/static/usage/v6/loading/controller/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, LoadingController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v6/loading/spinners/angular/example_component_ts.md b/static/usage/v6/loading/spinners/angular/example_component_ts.md
index ba83143f18d..709a0271ab4 100644
--- a/static/usage/v6/loading/spinners/angular/example_component_ts.md
+++ b/static/usage/v6/loading/spinners/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, LoadingController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v6/loading/theming/angular/example_component_ts.md b/static/usage/v6/loading/theming/angular/example_component_ts.md
index 30bf2c4c8e0..2a09a263895 100644
--- a/static/usage/v6/loading/theming/angular/example_component_ts.md
+++ b/static/usage/v6/loading/theming/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, LoadingController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v6/menu/type/angular/example_component_ts.md b/static/usage/v6/menu/type/angular/example_component_ts.md
index 1950bbb5e86..92b2db0db56 100644
--- a/static/usage/v6/menu/type/angular/example_component_ts.md
+++ b/static/usage/v6/menu/type/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [FormsModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   menuType: string = 'overlay';
diff --git a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
index 88be5262118..be3736f5953 100644
--- a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, CheckboxCustomEvent } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   canDismiss = false;
diff --git a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
index 93cc0c51c83..be1dbbdeab2 100644
--- a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ActionSheetController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   presentingElement = undefined;
diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 2721c21e79f..9f63c97689f 100644
--- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   async canDismiss(data?: any, role?: string) {
diff --git a/static/usage/v6/modal/card/basic/angular/example_component_ts.md b/static/usage/v6/modal/card/basic/angular/example_component_ts.md
index 3fff7fde680..db193258411 100644
--- a/static/usage/v6/modal/card/basic/angular/example_component_ts.md
+++ b/static/usage/v6/modal/card/basic/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
diff --git a/static/usage/v6/modal/controller/angular/example_component_ts.md b/static/usage/v6/modal/controller/angular/example_component_ts.md
index 36e27e8ee33..f5f8f036b43 100644
--- a/static/usage/v6/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v6/modal/controller/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { ModalExampleComponent } from './modal-example.component';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';
diff --git a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
index c01da56515b..95e82b92d37 100644
--- a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
+++ b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ModalController } from '@ionic/angular';
   selector: 'app-modal-example',
   templateUrl: 'modal-example.component.html',
   imports: [FormsModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ModalExampleComponent {
   name: string;
diff --git a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
index 8a756a79d36..df4455acb0e 100644
--- a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { OverlayEventDetail } from '@ionic/core/components';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [FormsModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild(IonModal) modal: IonModal;
diff --git a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
index fb4be0a7328..97d3759e62d 100644
--- a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
index 8473fe29d8a..06f99831b44 100644
--- a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
+++ b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   count = 0;
diff --git a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
index 95789450895..539abae59e1 100644
--- a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
+++ b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, AnimationController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}
diff --git a/static/usage/v6/nav/nav-link/angular/example_component_ts.md b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
index 370b2ed24e1..9f9e53a29f6 100644
--- a/static/usage/v6/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { PageOneComponent } from './page-one.component';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
index 3b6dd80abc4..5e4f0c982a5 100644
--- a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
@@ -19,7 +19,7 @@ import { PageTwoComponent } from './page-two.component';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
index 025f44e021f..63df48e0f60 100644
--- a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
@@ -18,7 +18,7 @@ import { IonicModule } from '@ionic/angular';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
index 35cbfd185fa..854e62b431a 100644
--- a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
@@ -24,7 +24,7 @@ import { PageThreeComponent } from './page-three.component';
     </ion-content>
   `,
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
index 55b1da9dbd4..e8eb28ea20b 100644
--- a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, PickerController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
diff --git a/static/usage/v6/picker/single-column/angular/example_component_ts.md b/static/usage/v6/picker/single-column/angular/example_component_ts.md
index 91001efb481..6a5c043ff10 100644
--- a/static/usage/v6/picker/single-column/angular/example_component_ts.md
+++ b/static/usage/v6/picker/single-column/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, PickerController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
diff --git a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
index 1b3dae1494b..1f697a67f80 100644
--- a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
index bb01bd2c127..2a438b4d8df 100644
--- a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
@@ -9,7 +9,7 @@ import { PopoverComponent } from './popover.component';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   roleMsg = '';
diff --git a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
index ce19e40b408..657697d0a88 100644
--- a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, PopoverController } from '@ionic/angular';
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
index 91fde982016..fb1970636cc 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;
diff --git a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
index 6b72f5b5232..e79bf07d2d2 100644
--- a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
index 8a288deb400..27883f1af9c 100644
--- a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   public progress = 0;
diff --git a/static/usage/v6/range/ion-change-event/angular/example_component_ts.md b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
index 5598aea1444..f86cf22cd98 100644
--- a/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { RangeValue } from '@ionic/core';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   lastEmittedValue: RangeValue;
diff --git a/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
index e9221985fbb..d983e1bdf5b 100644
--- a/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { RangeValue } from '@ionic/core';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   moveStart: RangeValue;
diff --git a/static/usage/v6/range/pins/angular/example_component_ts.md b/static/usage/v6/range/pins/angular/example_component_ts.md
index 07226d94d76..f05934a2875 100644
--- a/static/usage/v6/range/pins/angular/example_component_ts.md
+++ b/static/usage/v6/range/pins/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   pinFormatter(value: number) {
diff --git a/static/usage/v6/refresher/advanced/angular/example_component_ts.md b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
index 6c7bd37d064..1f76c9f6632 100644
--- a/static/usage/v6/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
@@ -10,10 +10,10 @@ import { ellipse } from 'ionicons/icons';
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
-    constructor() {
+  constructor() {
     /**
      * Any icons you want to use in your application
      * can be registered in app.component.ts and then
diff --git a/static/usage/v6/refresher/basic/angular/example_component_ts.md b/static/usage/v6/refresher/basic/angular/example_component_ts.md
index da645e02fcc..5c64eb4022e 100644
--- a/static/usage/v6/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/basic/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
index da645e02fcc..5c64eb4022e 100644
--- a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
index c2d3fc6797e..c9b0974c621 100644
--- a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
index da645e02fcc..5c64eb4022e 100644
--- a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleRefresh(event) {
diff --git a/static/usage/v6/reorder/basic/angular/example_component_ts.md b/static/usage/v6/reorder/basic/angular/example_component_ts.md
index bba98788a9a..a92743c0a9f 100644
--- a/static/usage/v6/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/basic/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
index c8d1d3d7d7f..9373dc6e267 100644
--- a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
@@ -2,13 +2,13 @@
 import { Component } from '@angular/core';
 import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
 import { addIcons } from 'ionicons';
-import { pizza } from 'ionicons/icons'
+import { pizza } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
index d85638526b6..a785fccd603 100644
--- a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
index 82b984f02af..e4604f61e72 100644
--- a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
index 70e52c80f30..de676e5e783 100644
--- a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
index bba98788a9a..a92743c0a9f 100644
--- a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule, ItemReorderEventDetail } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
index 15d1ac8b9b8..b396d9b6408 100644
--- a/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { trash } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index 514ad222d50..8d0c31441c6 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/searchbar/cancel-button/demo.html"
   size="250px"
diff --git a/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
index de602d23876..bf918edf656 100644
--- a/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { trashBin } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
index 1aa1969a5e0..3cf16532cca 100644
--- a/static/usage/v6/searchbar/clear-button/index.md
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/searchbar/clear-button/demo.html"
   size="250px"
diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
index f0b1bc3058a..43f4f0e1b8c 100644
--- a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   public data = [
diff --git a/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md
index ca4327f025d..f5d54536679 100644
--- a/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md
+++ b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { searchCircle } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
index e7dbf671773..1fb24e3367a 100644
--- a/static/usage/v6/searchbar/search-icon/index.md
+++ b/static/usage/v6/searchbar/search-icon/index.md
@@ -18,7 +18,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/searchbar/search-icon/demo.html"
 />
diff --git a/static/usage/v6/segment-button/layout/angular/example_component_ts.md b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
index d9efe5ebb6b..19b0271e7f9 100644
--- a/static/usage/v6/segment-button/layout/angular/example_component_ts.md
+++ b/static/usage/v6/segment-button/layout/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { call, heart, pin } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ call, heart, pin });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
index 7667f27685c..2d95cde28f3 100644
--- a/static/usage/v6/segment-button/layout/index.md
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/segment-button/layout/demo.html"
   size="medium"
diff --git a/static/usage/v6/segment/scrollable/angular/example_component_ts.md b/static/usage/v6/segment/scrollable/angular/example_component_ts.md
index cc1db4d8b9e..cc606fc1f10 100644
--- a/static/usage/v6/segment/scrollable/angular/example_component_ts.md
+++ b/static/usage/v6/segment/scrollable/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { addIcons } from 'ionicons';
 import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
 
 @Component({
-    selector: 'app-example',
-    templateUrl: 'example.component.html',
-    imports: [IonicModule],
-    standalone: true
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonicModule],
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -20,4 +20,4 @@ export class ExampleComponent {
     addIcons({ home, heart, pin, star, call, globe, basket, barbell, trash, person });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
index 99fb5dd2b5b..f5079b1d546 100644
--- a/static/usage/v6/segment/scrollable/index.md
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/segment/scrollable/demo.html"
   size="100px"
diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
index bb9cd83a61d..d0d524be6ff 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   logs: string[] = [];
diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
index 182ba06c748..78596828750 100644
--- a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
index 1b3dae1494b..1f697a67f80 100644
--- a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index b40026fbcc5..8bdabd81816 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   currentFood = undefined;
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index c4702a09f86..7b44b96fdd3 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -7,7 +7,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   currentFood = undefined;
diff --git a/static/usage/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md
index 261d85387f2..ed634b81620 100644
--- a/static/usage/v6/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { Item } from './types';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule, TypeaheadComponent],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
index 7fa35713398..9a3e5674c17 100644
--- a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -8,7 +8,7 @@ import { Item } from './types';
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
index 40d968506a8..4a23226e859 100644
--- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { IonicModule } from '@ionic/angular';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [CommonModule, IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   public loaded = false;
diff --git a/static/usage/v6/tabs/router/angular/app_routes_ts.md b/static/usage/v6/tabs/router/angular/app_routes_ts.md
index 12354f4efa7..55cd79f38f3 100644
--- a/static/usage/v6/tabs/router/angular/app_routes_ts.md
+++ b/static/usage/v6/tabs/router/angular/app_routes_ts.md
@@ -27,7 +27,7 @@ export const routes: Routes = [
         redirectTo: '/home',
         pathMatch: 'full',
       },
-    ]
+    ],
   },
 ];
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md
index 50736b8d969..1600255c79f 100644
--- a/static/usage/v6/tabs/router/angular/example_component_html.md
+++ b/static/usage/v6/tabs/router/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<router-outlet ></router-outlet>
+<router-outlet></router-outlet>
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button routerLink="home" routerLinkActive="tab-selected">
diff --git a/static/usage/v6/tabs/router/angular/example_component_ts.md b/static/usage/v6/tabs/router/angular/example_component_ts.md
index 6c41e6987d3..5050049f431 100644
--- a/static/usage/v6/tabs/router/angular/example_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/example_component_ts.md
@@ -10,7 +10,7 @@ import { playCircle, library, radio, search } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [CommonModule, IonicModule, RouterModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
@@ -22,4 +22,4 @@ export class ExampleComponent {
     addIcons({ playCircle, library, radio, search });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_ts.md b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
index 72d45fbf0b6..e49329ee43c 100644
--- a/static/usage/v6/tabs/router/angular/home_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
@@ -6,8 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class HomePageComponent {}
-
 ```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_ts.md b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
index e98a5767193..2af4a195441 100644
--- a/static/usage/v6/tabs/router/angular/library_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
@@ -6,8 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-library-page',
   templateUrl: './library-page.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class LibraryPageComponent {}
-
 ```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
index 0a0e41154be..14a2e0cb1f1 100644
--- a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
@@ -6,8 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class RadioPageComponent {}
-
 ```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_ts.md b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
index 1c4f7e91650..f3f06f35c3b 100644
--- a/static/usage/v6/tabs/router/angular/search_page_component_ts.md
+++ b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
@@ -6,8 +6,7 @@ import { IonicModule } from '@ionic/angular';
   selector: 'app-search-page',
   templateUrl: './search-page.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class SearchPageComponent {}
-
 ```
diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md
index bd728e9f3df..dce11150a21 100644
--- a/static/usage/v6/tabs/router/index.md
+++ b/static/usage/v6/tabs/router/index.md
@@ -43,8 +43,7 @@ import react_search_page_tsx from './react/search_page_tsx.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/app.routes.ts':
-        app_routes_ts,
+        'src/app/app.routes.ts': app_routes_ts,
         'src/app/home/home-page.component.ts': angular_home_page_component_ts,
         'src/app/home/home-page.component.html': angular_home_page_component_html,
         'src/global.css': angular_global_css,
diff --git a/static/usage/v6/text/basic/angular/example_component_ts.md b/static/usage/v6/text/basic/angular/example_component_ts.md
index 6ed4de437b4..21415b248db 100644
--- a/static/usage/v6/text/basic/angular/example_component_ts.md
+++ b/static/usage/v6/text/basic/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { warning } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
index 24f162c246d..b14a61e304e 100644
--- a/static/usage/v6/text/basic/index.md
+++ b/static/usage/v6/text/basic/index.md
@@ -19,4 +19,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
       },
     },
   }}
-src="usage/v6/text/basic/demo.html" />
+  src="usage/v6/text/basic/demo.html"
+/>
diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md
index 3ecbef74070..bea8016b6a5 100644
--- a/static/usage/v6/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, ToastController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   handlerMessage = '';
diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md
index 76fb647250e..fb37272cbdd 100644
--- a/static/usage/v6/toast/icon/angular/example_component_ts.md
+++ b/static/usage/v6/toast/icon/angular/example_component_ts.md
@@ -8,7 +8,7 @@ import { globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
index c8193f8d7f4..3ccb8ba19ea 100644
--- a/static/usage/v6/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, ToastController, ToastOptions } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
index 7ca690867d4..95cfc01ba70 100644
--- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, ToastController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md
index e537ed3839c..254785b7736 100644
--- a/static/usage/v6/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v6/toast/theming/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { IonicModule, ToastController } from '@ionic/angular';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v6/toolbar/buttons/angular/example_component_ts.md b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md
index 34d9c7d9c6a..f962e4d49ce 100644
--- a/static/usage/v6/toolbar/buttons/angular/example_component_ts.md
+++ b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md
@@ -8,9 +8,9 @@ import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   imports: [IonicModule],
-  standalone: true
+  standalone: true,
 })
-export class ExampleComponent{
+export class ExampleComponent {
   constructor() {
     /**
      * Any icons you want to use in your application
@@ -20,4 +20,4 @@ export class ExampleComponent{
     addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
index 2423b16df41..52f368cf5ff 100644
--- a/static/usage/v6/toolbar/buttons/index.md
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -17,7 +17,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
-    }
+    },
   }}
   src="usage/v6/toolbar/buttons/demo.html"
   size="500px"

From 362e902b488a4ac51d1a19d709424bc7e1fb7b55 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 28 Jul 2025 13:59:53 -0500
Subject: [PATCH 37/53] docs(v6): update JavaScript example for icon

---
 static/usage/v6/icon/basic/index.md           | 11 +++++--
 .../index_html.md}                            |  0
 .../v6/icon/basic/javascript/index_ts.md      | 29 +++++++++++++++++++
 .../version-v6/developer-resources/books.md   |  2 +-
 versions.json                                 |  3 +-
 versionsArchived.json                         |  1 -
 6 files changed, 41 insertions(+), 5 deletions(-)
 rename static/usage/v6/icon/basic/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/icon/basic/javascript/index_ts.md

diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
index a27247f3e3d..aa8ae0b3b47 100644
--- a/static/usage/v6/icon/basic/index.md
+++ b/static/usage/v6/icon/basic/index.md
@@ -1,6 +1,8 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -10,7 +12,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   version="6"
   size="xsmall"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/icon/basic/javascript.md b/static/usage/v6/icon/basic/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/icon/basic/javascript.md
rename to static/usage/v6/icon/basic/javascript/index_html.md
diff --git a/static/usage/v6/icon/basic/javascript/index_ts.md b/static/usage/v6/icon/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..e31975b6f14
--- /dev/null
+++ b/static/usage/v6/icon/basic/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ logoIonic });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.md
index 1a51bc94e8f..4553ac800c3 100644
--- a/versioned_docs/version-v6/developer-resources/books.md
+++ b/versioned_docs/version-v6/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https:://developer.school)
+by [Paul Halliday](https://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versions.json b/versions.json
index 48698a4fdec..ed163ab5c09 100644
--- a/versions.json
+++ b/versions.json
@@ -1,3 +1,4 @@
 [
-  "v7"
+  "v7",
+  "v6"
 ]
diff --git a/versionsArchived.json b/versionsArchived.json
index 9d103a53775..56bd2d5bcb6 100644
--- a/versionsArchived.json
+++ b/versionsArchived.json
@@ -1,4 +1,3 @@
 {
-  "v6": "https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6",
   "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5"
 }

From 3ef6fd8e1dfb80be636293392b6512c4f6bcc1ec Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 28 Jul 2025 14:13:47 -0500
Subject: [PATCH 38/53] docs(v6): update JavaScript example for accordion

---
 .../v6/accordion/customization/icons/index.md | 10 +++++--
 .../index_html.md}                            |  0
 .../icons/javascript/index_ts.md              | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/accordion/customization/icons/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/accordion/customization/icons/javascript/index_ts.md

diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md
index b7668a6ee7c..86dfd7e51bf 100644
--- a/static/usage/v6/accordion/customization/icons/index.md
+++ b/static/usage/v6/accordion/customization/icons/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/accordion/customization/icons/javascript.md b/static/usage/v6/accordion/customization/icons/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/accordion/customization/icons/javascript.md
rename to static/usage/v6/accordion/customization/icons/javascript/index_html.md
diff --git a/static/usage/v6/accordion/customization/icons/javascript/index_ts.md b/static/usage/v6/accordion/customization/icons/javascript/index_ts.md
new file mode 100644
index 00000000000..b0cc33acaec
--- /dev/null
+++ b/static/usage/v6/accordion/customization/icons/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { caretDownCircle } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ caretDownCircle });
+
+defineCustomElements();
+```
\ No newline at end of file

From c3340ae33ef43688569df1dd87683530f160cedc Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 28 Jul 2025 14:31:32 -0500
Subject: [PATCH 39/53] docs(v6): update JavaScript example for back-button

---
 static/usage/v6/back-button/custom/index.md   | 10 +++++--
 .../index_html.md}                            |  0
 .../back-button/custom/javascript/index_ts.md | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/back-button/custom/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/back-button/custom/javascript/index_ts.md

diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md
index 69bde337fa3..eb31312d9fe 100644
--- a/static/usage/v6/back-button/custom/index.md
+++ b/static/usage/v6/back-button/custom/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
@@ -18,7 +19,12 @@ import vue_page_two from './vue/page_two_vue.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
diff --git a/static/usage/v6/back-button/custom/javascript.md b/static/usage/v6/back-button/custom/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/back-button/custom/javascript.md
rename to static/usage/v6/back-button/custom/javascript/index_html.md
diff --git a/static/usage/v6/back-button/custom/javascript/index_ts.md b/static/usage/v6/back-button/custom/javascript/index_ts.md
new file mode 100644
index 00000000000..0c6fe6fadec
--- /dev/null
+++ b/static/usage/v6/back-button/custom/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { caretBack } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ caretBack });
+
+defineCustomElements();
+```
\ No newline at end of file

From ec26bf21e8feaf1460031b5763d7d003009e07f1 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Mon, 28 Jul 2025 14:47:10 -0500
Subject: [PATCH 40/53] docs(v6): update JavaScript examples for breadcrumbs

---
 .../icons/custom-separators/index.md          | 10 ++++-
 .../index_html.md}                            |  0
 .../custom-separators/javascript/index_ts.md  | 29 +++++++++++++
 .../breadcrumbs/icons/icons-on-items/index.md | 10 ++++-
 .../icons-on-items/javascript/index_html.md   | 41 +++++++++++++++++++
 .../icons-on-items/javascript/index_ts.md     | 29 +++++++++++++
 6 files changed, 115 insertions(+), 4 deletions(-)
 rename static/usage/v6/breadcrumbs/icons/custom-separators/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
 create mode 100644 static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md
 create mode 100644 static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md

diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
index 83c578d8742..10e4a52bea2 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md
rename to static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_html.md
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
new file mode 100644
index 00000000000..83e2dab7a36
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { arrowForwardCircle } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ arrowForwardCircle });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
index 584eec676de..5349c168953 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -10,7 +11,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   version="6"
   size="300px"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md
@@ -0,0 +1,41 @@
+```html
+<ion-label>Icons at Start</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    <ion-icon slot="start" name="home"></ion-icon>
+    Home
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    <ion-icon slot="start" name="flash"></ion-icon>
+    Electronics
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    <ion-icon slot="start" name="camera"></ion-icon>
+    Cameras
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    <ion-icon slot="start" name="film"></ion-icon>
+    Film
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+
+<ion-label class="ion-margin-top">Icons at End</ion-label>
+<ion-breadcrumbs>
+  <ion-breadcrumb href="#home">
+    Home
+    <ion-icon slot="end" name="home"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#electronics">
+    Electronics
+    <ion-icon slot="end" name="flash"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#cameras">
+    Cameras
+    <ion-icon slot="end" name="camera"></ion-icon>
+  </ion-breadcrumb>
+  <ion-breadcrumb href="#film">
+    Film
+    <ion-icon slot="end" name="film"></ion-icon>
+  </ion-breadcrumb>
+</ion-breadcrumbs>
+```
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md
new file mode 100644
index 00000000000..17e173cd6d8
--- /dev/null
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { home, flash, camera, film } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ home, flash, camera, film });
+
+defineCustomElements();
+```
\ No newline at end of file

From bf28ee7eedf785ca9fd582471ac0c840f9db0892 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:07:59 -0500
Subject: [PATCH 41/53] docs(v6): update JavaScript example for buttons

---
 static/usage/v6/buttons/types/index.md        | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/buttons/types/javascript/index_ts.md   | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/buttons/types/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/buttons/types/javascript/index_ts.md

diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
index 01e9778e127..f3059adc7dd 100644
--- a/static/usage/v6/buttons/types/index.md
+++ b/static/usage/v6/buttons/types/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/buttons/types/javascript.md
rename to static/usage/v6/buttons/types/javascript/index_html.md
diff --git a/static/usage/v6/buttons/types/javascript/index_ts.md b/static/usage/v6/buttons/types/javascript/index_ts.md
new file mode 100644
index 00000000000..240d292200e
--- /dev/null
+++ b/static/usage/v6/buttons/types/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
+
+defineCustomElements();
+```
\ No newline at end of file

From f994a43280fc387a1fcc226ff178a0d9aed0484d Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:16:11 -0500
Subject: [PATCH 42/53] docs(v6): update JavaScript examples for item

---
 static/usage/v6/item/buttons/index.md         | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/item/buttons/javascript/index_ts.md    | 29 +++++++++++++++++++
 static/usage/v6/item/icons/index.md           | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/item/icons/javascript/index_ts.md      | 29 +++++++++++++++++++
 static/usage/v6/item/lines/index.md           | 11 +++++--
 .../index_html.md}                            |  0
 .../v6/item/lines/javascript/index_ts.md      | 29 +++++++++++++++++++
 9 files changed, 111 insertions(+), 7 deletions(-)
 rename static/usage/v6/item/buttons/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/item/buttons/javascript/index_ts.md
 rename static/usage/v6/item/icons/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/item/icons/javascript/index_ts.md
 rename static/usage/v6/item/lines/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/item/lines/javascript/index_ts.md

diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
index 63de2031246..70652dc8252 100644
--- a/static/usage/v6/item/buttons/index.md
+++ b/static/usage/v6/item/buttons/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/item/buttons/javascript.md
rename to static/usage/v6/item/buttons/javascript/index_html.md
diff --git a/static/usage/v6/item/buttons/javascript/index_ts.md b/static/usage/v6/item/buttons/javascript/index_ts.md
new file mode 100644
index 00000000000..d03fe845f0b
--- /dev/null
+++ b/static/usage/v6/item/buttons/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { home, star, navigate } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ home, star, navigate });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
index f4b1f4c15cc..d5675259023 100644
--- a/static/usage/v6/item/icons/index.md
+++ b/static/usage/v6/item/icons/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/item/icons/javascript.md
rename to static/usage/v6/item/icons/javascript/index_html.md
diff --git a/static/usage/v6/item/icons/javascript/index_ts.md b/static/usage/v6/item/icons/javascript/index_ts.md
new file mode 100644
index 00000000000..5c15a282c26
--- /dev/null
+++ b/static/usage/v6/item/icons/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { informationCircle, star } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ informationCircle, star });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index c676c68e29e..a42601c1a57 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/index.md
@@ -1,7 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
-import react from './react.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
@@ -9,7 +9,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/item/lines/javascript.md b/static/usage/v6/item/lines/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/item/lines/javascript.md
rename to static/usage/v6/item/lines/javascript/index_html.md
diff --git a/static/usage/v6/item/lines/javascript/index_ts.md b/static/usage/v6/item/lines/javascript/index_ts.md
new file mode 100644
index 00000000000..d8d50c52dc7
--- /dev/null
+++ b/static/usage/v6/item/lines/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { star, informationCircle } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ star, informationCircle });
+
+defineCustomElements();
+```
\ No newline at end of file

From 1fdbb55c207af2a5c7364e9fb44665551fb5e8c9 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:21:12 -0500
Subject: [PATCH 43/53] docs(v6): update JavaScript example for refresher

---
 static/usage/v6/refresher/advanced/index.md   | 10 +++++--
 .../index_html.md}                            |  0
 .../refresher/advanced/javascript/index_ts.md | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/refresher/advanced/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/refresher/advanced/javascript/index_ts.md

diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.md
index 287a2d7dc66..bb23ef33e8d 100644
--- a/static/usage/v6/refresher/advanced/index.md
+++ b/static/usage/v6/refresher/advanced/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 
 import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
@@ -14,7 +15,12 @@ import angular_example_component_css from './angular/example_component_css.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react: {
       files: {
         'src/main.tsx': react_main_tsx,
diff --git a/static/usage/v6/refresher/advanced/javascript.md b/static/usage/v6/refresher/advanced/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/refresher/advanced/javascript.md
rename to static/usage/v6/refresher/advanced/javascript/index_html.md
diff --git a/static/usage/v6/refresher/advanced/javascript/index_ts.md b/static/usage/v6/refresher/advanced/javascript/index_ts.md
new file mode 100644
index 00000000000..e6819bf2099
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { ellipse } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ ellipse });
+
+defineCustomElements();
+```
\ No newline at end of file

From 3f8b81ef1e6dbc8e697cf7b4990d126b6fa3466b Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:27:16 -0500
Subject: [PATCH 44/53] docs(v6): update JavaScript example for reorder

---
 static/usage/v6/reorder/custom-icon/index.md  | 10 +++++--
 .../index_html.md}                            |  0
 .../custom-icon/javascript/index_ts.md        | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/reorder/custom-icon/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/reorder/custom-icon/javascript/index_ts.md

diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md
index 4a5490803bf..239b8cf04a4 100644
--- a/static/usage/v6/reorder/custom-icon/index.md
+++ b/static/usage/v6/reorder/custom-icon/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -10,7 +11,12 @@ import angular_example_component_html from './angular/example_component_html.md'
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/reorder/custom-icon/javascript.md b/static/usage/v6/reorder/custom-icon/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/reorder/custom-icon/javascript.md
rename to static/usage/v6/reorder/custom-icon/javascript/index_html.md
diff --git a/static/usage/v6/reorder/custom-icon/javascript/index_ts.md b/static/usage/v6/reorder/custom-icon/javascript/index_ts.md
new file mode 100644
index 00000000000..ab8d006d102
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { pizza } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ pizza });
+
+defineCustomElements();
+```
\ No newline at end of file

From 12a2bc43c9ba755035b05fcc5cd18662285034bc Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:38:53 -0500
Subject: [PATCH 45/53] docs(v6): update JavaScript examples for searchbar

---
 .../usage/v6/searchbar/cancel-button/index.md | 11 +++++--
 .../index_html.md}                            |  0
 .../cancel-button/javascript/index_ts.md      | 29 +++++++++++++++++++
 .../usage/v6/searchbar/clear-button/index.md  | 10 +++++--
 .../index_html.md}                            |  0
 .../clear-button/javascript/index_ts.md       | 29 +++++++++++++++++++
 .../usage/v6/searchbar/search-icon/index.md   | 10 +++++--
 .../index_html.md}                            |  0
 .../search-icon/javascript/index_ts.md        | 29 +++++++++++++++++++
 9 files changed, 111 insertions(+), 7 deletions(-)
 rename static/usage/v6/searchbar/cancel-button/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
 rename static/usage/v6/searchbar/clear-button/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/clear-button/javascript/index_ts.md
 rename static/usage/v6/searchbar/search-icon/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/searchbar/search-icon/javascript/index_ts.md

diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index 8d0c31441c6..800e4550573 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -1,7 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
-import react from './react.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
@@ -9,7 +9,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/searchbar/cancel-button/javascript.md b/static/usage/v6/searchbar/cancel-button/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/searchbar/cancel-button/javascript.md
rename to static/usage/v6/searchbar/cancel-button/javascript/index_html.md
diff --git a/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
new file mode 100644
index 00000000000..c8aa3333e19
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { trash } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ trash });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
index 3cf16532cca..caafef0ac51 100644
--- a/static/usage/v6/searchbar/clear-button/index.md
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/searchbar/clear-button/javascript.md b/static/usage/v6/searchbar/clear-button/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/searchbar/clear-button/javascript.md
rename to static/usage/v6/searchbar/clear-button/javascript/index_html.md
diff --git a/static/usage/v6/searchbar/clear-button/javascript/index_ts.md b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md
new file mode 100644
index 00000000000..80b1363b75f
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { trashBin } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ trashBin });
+
+defineCustomElements();
+```
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
index 1fb24e3367a..68a38d43970 100644
--- a/static/usage/v6/searchbar/search-icon/index.md
+++ b/static/usage/v6/searchbar/search-icon/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -10,7 +11,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   version="6"
   size="xsmall"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/searchbar/search-icon/javascript.md b/static/usage/v6/searchbar/search-icon/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/searchbar/search-icon/javascript.md
rename to static/usage/v6/searchbar/search-icon/javascript/index_html.md
diff --git a/static/usage/v6/searchbar/search-icon/javascript/index_ts.md b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md
new file mode 100644
index 00000000000..3390dff9e80
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { searchCircle } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ searchCircle });
+
+defineCustomElements();
+```
\ No newline at end of file

From f28c3c79ea6ae1578fa456e8e8623b223497dd7a Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:44:02 -0500
Subject: [PATCH 46/53] docs(v6): update JavaScript examples for segment

---
 static/usage/v6/segment/scrollable/index.md   | 10 +++++--
 .../index_html.md}                            |  0
 .../segment/scrollable/javascript/index_ts.md | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/segment/scrollable/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/segment/scrollable/javascript/index_ts.md

diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
index f5079b1d546..0babe824bd0 100644
--- a/static/usage/v6/segment/scrollable/index.md
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/segment/scrollable/javascript.md b/static/usage/v6/segment/scrollable/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/segment/scrollable/javascript.md
rename to static/usage/v6/segment/scrollable/javascript/index_html.md
diff --git a/static/usage/v6/segment/scrollable/javascript/index_ts.md b/static/usage/v6/segment/scrollable/javascript/index_ts.md
new file mode 100644
index 00000000000..53e05428a72
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ home, heart, pin, star, call, globe, basket, barbell, trash, person });
+
+defineCustomElements();
+```
\ No newline at end of file

From 9a049923b3a61a8452577018d4c59c476b602aee Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 12:52:17 -0500
Subject: [PATCH 47/53] docs(v6): update JavaScript examples for segment-button

---
 .../usage/v6/segment-button/layout/index.md   | 10 +++++--
 .../index_html.md}                            |  0
 .../layout/javascript/index_ts.md             | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/segment-button/layout/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/segment-button/layout/javascript/index_ts.md

diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
index 2d95cde28f3..89cffab91fa 100644
--- a/static/usage/v6/segment-button/layout/index.md
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/segment-button/layout/javascript.md b/static/usage/v6/segment-button/layout/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/segment-button/layout/javascript.md
rename to static/usage/v6/segment-button/layout/javascript/index_html.md
diff --git a/static/usage/v6/segment-button/layout/javascript/index_ts.md b/static/usage/v6/segment-button/layout/javascript/index_ts.md
new file mode 100644
index 00000000000..f60426f1553
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { call, heart, pin } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ call, heart, pin });
+
+defineCustomElements();
+```
\ No newline at end of file

From 7fa5d9d69a9a96c9ca0e26d6de23cce2409532b8 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:01:31 -0500
Subject: [PATCH 48/53] docs(v6): update JavaScript example for tabs

---
 static/usage/v6/tabs/router/index.md          | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/tabs/router/javascript/index_ts.md     | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/tabs/router/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/tabs/router/javascript/index_ts.md

diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md
index dce11150a21..fff1f621e8c 100644
--- a/static/usage/v6/tabs/router/index.md
+++ b/static/usage/v6/tabs/router/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
@@ -38,7 +39,12 @@ import react_search_page_tsx from './react/search_page_tsx.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
diff --git a/static/usage/v6/tabs/router/javascript.md b/static/usage/v6/tabs/router/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/tabs/router/javascript.md
rename to static/usage/v6/tabs/router/javascript/index_html.md
diff --git a/static/usage/v6/tabs/router/javascript/index_ts.md b/static/usage/v6/tabs/router/javascript/index_ts.md
new file mode 100644
index 00000000000..184f77e6501
--- /dev/null
+++ b/static/usage/v6/tabs/router/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ playCircle, radio, library, search });
+
+defineCustomElements();
+```
\ No newline at end of file

From f7a89882a2ef2b8a50fb29e8ed19759a39a00e59 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:06:51 -0500
Subject: [PATCH 49/53] docs(v6): update JavaScript examples for text

---
 static/usage/v6/text/basic/index.md           | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/text/basic/javascript/index_ts.md      | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/text/basic/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/text/basic/javascript/index_ts.md

diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
index b14a61e304e..2358549e4fb 100644
--- a/static/usage/v6/text/basic/index.md
+++ b/static/usage/v6/text/basic/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/text/basic/javascript.md
rename to static/usage/v6/text/basic/javascript/index_html.md
diff --git a/static/usage/v6/text/basic/javascript/index_ts.md b/static/usage/v6/text/basic/javascript/index_ts.md
new file mode 100644
index 00000000000..611648e0517
--- /dev/null
+++ b/static/usage/v6/text/basic/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { warning } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ warning });
+
+defineCustomElements();
+```
\ No newline at end of file

From 7e67fc07f1c66bd74553992d1f2fcbd26d9e9254 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:20:54 -0500
Subject: [PATCH 50/53] docs(v6): update JavaScript example for toast

---
 static/usage/v6/toast/icon/index.md           | 10 ++++--
 .../index_html.md}                            |  0
 .../v6/toast/icon/javascript/index_ts.md      | 31 +++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 rename static/usage/v6/toast/icon/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/toast/icon/javascript/index_ts.md

diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md
index d636c54d905..8790ff7ecb4 100644
--- a/static/usage/v6/toast/icon/index.md
+++ b/static/usage/v6/toast/icon/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -11,7 +12,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   version="6"
   devicePreview
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/toast/icon/javascript.md
rename to static/usage/v6/toast/icon/javascript/index_html.md
diff --git a/static/usage/v6/toast/icon/javascript/index_ts.md b/static/usage/v6/toast/icon/javascript/index_ts.md
new file mode 100644
index 00000000000..4d9dc46e53a
--- /dev/null
+++ b/static/usage/v6/toast/icon/javascript/index_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+import { toastController } from '@ionic/core';
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ globe });
+
+defineCustomElements();
+
+(window as any).toastController = toastController;
+```

From f136105fcee1a2116ef137d27f5e10f5801a1f0c Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:26:19 -0500
Subject: [PATCH 51/53] docs(v6): update JavaScript example for toolbar

---
 static/usage/v6/toolbar/buttons/index.md      | 10 +++++--
 .../index_html.md}                            |  0
 .../v6/toolbar/buttons/javascript/index_ts.md | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 rename static/usage/v6/toolbar/buttons/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v6/toolbar/buttons/javascript/index_ts.md

diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
index 52f368cf5ff..ad1b830f9f5 100644
--- a/static/usage/v6/toolbar/buttons/index.md
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
@@ -9,7 +10,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="6"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v6/toolbar/buttons/javascript.md b/static/usage/v6/toolbar/buttons/javascript/index_html.md
similarity index 100%
rename from static/usage/v6/toolbar/buttons/javascript.md
rename to static/usage/v6/toolbar/buttons/javascript/index_html.md
diff --git a/static/usage/v6/toolbar/buttons/javascript/index_ts.md b/static/usage/v6/toolbar/buttons/javascript/index_ts.md
new file mode 100644
index 00000000000..240d292200e
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/javascript/index_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
+
+defineCustomElements();
+```
\ No newline at end of file

From a722c8725177d97f525d1181f05840eee4478880 Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:38:05 -0500
Subject: [PATCH 52/53] revert changes required to build v6 docs locally

---
 versioned_docs/version-v6/developer-resources/books.md | 2 +-
 versions.json                                          | 3 +--
 versionsArchived.json                                  | 1 +
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.md
index 4553ac800c3..1a51bc94e8f 100644
--- a/versioned_docs/version-v6/developer-resources/books.md
+++ b/versioned_docs/version-v6/developer-resources/books.md
@@ -6,7 +6,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to creat
 
 <!-- cspell:disable-next-line -->
 
-by [Paul Halliday](https://developer.school)
+by [Paul Halliday](https:://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
diff --git a/versions.json b/versions.json
index ed163ab5c09..48698a4fdec 100644
--- a/versions.json
+++ b/versions.json
@@ -1,4 +1,3 @@
 [
-  "v7",
-  "v6"
+  "v7"
 ]
diff --git a/versionsArchived.json b/versionsArchived.json
index 56bd2d5bcb6..9d103a53775 100644
--- a/versionsArchived.json
+++ b/versionsArchived.json
@@ -1,3 +1,4 @@
 {
+  "v6": "https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6",
   "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5"
 }

From 78537516f7a5adaac228c3e471064f33f9b80bfd Mon Sep 17 00:00:00 2001
From: soundproofboot <colinedwinbares@gmail.com>
Date: Wed, 30 Jul 2025 13:44:15 -0500
Subject: [PATCH 53/53] docs(v6): run linter

---
 .../v6/accordion/customization/icons/javascript/index_ts.md    | 2 +-
 static/usage/v6/back-button/custom/javascript/index_ts.md      | 2 +-
 .../breadcrumbs/icons/custom-separators/javascript/index_ts.md | 2 +-
 .../v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md | 2 +-
 static/usage/v6/buttons/types/javascript/index_ts.md           | 2 +-
 static/usage/v6/icon/basic/javascript/index_ts.md              | 2 +-
 static/usage/v6/item/buttons/javascript/index_ts.md            | 2 +-
 static/usage/v6/item/icons/javascript/index_ts.md              | 2 +-
 static/usage/v6/item/lines/index.md                            | 3 ++-
 static/usage/v6/item/lines/javascript/index_ts.md              | 2 +-
 static/usage/v6/refresher/advanced/javascript/index_ts.md      | 2 +-
 static/usage/v6/reorder/custom-icon/javascript/index_ts.md     | 2 +-
 static/usage/v6/searchbar/cancel-button/index.md               | 3 ++-
 static/usage/v6/searchbar/cancel-button/javascript/index_ts.md | 2 +-
 static/usage/v6/searchbar/clear-button/javascript/index_ts.md  | 2 +-
 static/usage/v6/searchbar/search-icon/javascript/index_ts.md   | 2 +-
 static/usage/v6/segment-button/layout/javascript/index_ts.md   | 2 +-
 static/usage/v6/segment/scrollable/javascript/index_ts.md      | 2 +-
 static/usage/v6/tabs/router/javascript/index_ts.md             | 2 +-
 static/usage/v6/text/basic/javascript/index_ts.md              | 2 +-
 static/usage/v6/toolbar/buttons/javascript/index_ts.md         | 2 +-
 21 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/static/usage/v6/accordion/customization/icons/javascript/index_ts.md b/static/usage/v6/accordion/customization/icons/javascript/index_ts.md
index b0cc33acaec..4f1a13e0062 100644
--- a/static/usage/v6/accordion/customization/icons/javascript/index_ts.md
+++ b/static/usage/v6/accordion/customization/icons/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ caretDownCircle });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/back-button/custom/javascript/index_ts.md b/static/usage/v6/back-button/custom/javascript/index_ts.md
index 0c6fe6fadec..0d048d49089 100644
--- a/static/usage/v6/back-button/custom/javascript/index_ts.md
+++ b/static/usage/v6/back-button/custom/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ caretBack });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
index 83e2dab7a36..b7e5f1d2a1c 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ arrowForwardCircle });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md
index 17e173cd6d8..81e2f85f56c 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ home, flash, camera, film });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/buttons/types/javascript/index_ts.md b/static/usage/v6/buttons/types/javascript/index_ts.md
index 240d292200e..f5fba4b55e8 100644
--- a/static/usage/v6/buttons/types/javascript/index_ts.md
+++ b/static/usage/v6/buttons/types/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/icon/basic/javascript/index_ts.md b/static/usage/v6/icon/basic/javascript/index_ts.md
index e31975b6f14..b4b3a93f923 100644
--- a/static/usage/v6/icon/basic/javascript/index_ts.md
+++ b/static/usage/v6/icon/basic/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ logoIonic });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/buttons/javascript/index_ts.md b/static/usage/v6/item/buttons/javascript/index_ts.md
index d03fe845f0b..b615ca86d4f 100644
--- a/static/usage/v6/item/buttons/javascript/index_ts.md
+++ b/static/usage/v6/item/buttons/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ home, star, navigate });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/icons/javascript/index_ts.md b/static/usage/v6/item/icons/javascript/index_ts.md
index 5c15a282c26..f1edf662596 100644
--- a/static/usage/v6/item/icons/javascript/index_ts.md
+++ b/static/usage/v6/item/icons/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ informationCircle, star });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index a42601c1a57..e53d3cb01b8 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/index.md
@@ -1,7 +1,8 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript_index_html from './javascript/index_html.md';
-import javascript_index_ts from './javascript/index_ts.md';import react from './react.md';
+import javascript_index_ts from './javascript/index_ts.md';
+import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
diff --git a/static/usage/v6/item/lines/javascript/index_ts.md b/static/usage/v6/item/lines/javascript/index_ts.md
index d8d50c52dc7..0de176a28d0 100644
--- a/static/usage/v6/item/lines/javascript/index_ts.md
+++ b/static/usage/v6/item/lines/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ star, informationCircle });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/refresher/advanced/javascript/index_ts.md b/static/usage/v6/refresher/advanced/javascript/index_ts.md
index e6819bf2099..15e7d004187 100644
--- a/static/usage/v6/refresher/advanced/javascript/index_ts.md
+++ b/static/usage/v6/refresher/advanced/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ ellipse });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/reorder/custom-icon/javascript/index_ts.md b/static/usage/v6/reorder/custom-icon/javascript/index_ts.md
index ab8d006d102..c57c3e59a1e 100644
--- a/static/usage/v6/reorder/custom-icon/javascript/index_ts.md
+++ b/static/usage/v6/reorder/custom-icon/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ pizza });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index 800e4550573..6c738ecd396 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -1,7 +1,8 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript_index_html from './javascript/index_html.md';
-import javascript_index_ts from './javascript/index_ts.md';import react from './react.md';
+import javascript_index_ts from './javascript/index_ts.md';
+import react from './react.md';
 import vue from './vue.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
diff --git a/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
index c8aa3333e19..9a6d57f2016 100644
--- a/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
+++ b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ trash });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/searchbar/clear-button/javascript/index_ts.md b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md
index 80b1363b75f..f78dec30492 100644
--- a/static/usage/v6/searchbar/clear-button/javascript/index_ts.md
+++ b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ trashBin });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/searchbar/search-icon/javascript/index_ts.md b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md
index 3390dff9e80..5dee4220727 100644
--- a/static/usage/v6/searchbar/search-icon/javascript/index_ts.md
+++ b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ searchCircle });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/segment-button/layout/javascript/index_ts.md b/static/usage/v6/segment-button/layout/javascript/index_ts.md
index f60426f1553..84770b3fa12 100644
--- a/static/usage/v6/segment-button/layout/javascript/index_ts.md
+++ b/static/usage/v6/segment-button/layout/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ call, heart, pin });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/segment/scrollable/javascript/index_ts.md b/static/usage/v6/segment/scrollable/javascript/index_ts.md
index 53e05428a72..2d69d3a2375 100644
--- a/static/usage/v6/segment/scrollable/javascript/index_ts.md
+++ b/static/usage/v6/segment/scrollable/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ home, heart, pin, star, call, globe, basket, barbell, trash, person });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/tabs/router/javascript/index_ts.md b/static/usage/v6/tabs/router/javascript/index_ts.md
index 184f77e6501..0c4bc90f1e8 100644
--- a/static/usage/v6/tabs/router/javascript/index_ts.md
+++ b/static/usage/v6/tabs/router/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ playCircle, radio, library, search });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/text/basic/javascript/index_ts.md b/static/usage/v6/text/basic/javascript/index_ts.md
index 611648e0517..e539d87b01d 100644
--- a/static/usage/v6/text/basic/javascript/index_ts.md
+++ b/static/usage/v6/text/basic/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ warning });
 
 defineCustomElements();
-```
\ No newline at end of file
+```
diff --git a/static/usage/v6/toolbar/buttons/javascript/index_ts.md b/static/usage/v6/toolbar/buttons/javascript/index_ts.md
index 240d292200e..f5fba4b55e8 100644
--- a/static/usage/v6/toolbar/buttons/javascript/index_ts.md
+++ b/static/usage/v6/toolbar/buttons/javascript/index_ts.md
@@ -26,4 +26,4 @@ import './theme/variables.css';
 addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create });
 
 defineCustomElements();
-```
\ No newline at end of file
+```