diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index dba1892780..5a8d29dc83 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md';
 
 <Basic />
@@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent {
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index dd9e3c0f4e..ad07a4290e 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -67,7 +67,7 @@ In order to sort the array upon completion of the reorder, the array should be p
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
 import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index 620d6dbe2d..64e019af93 100644
--- a/src/components/global/Playground/stackblitz.utils.ts
+++ b/src/components/global/Playground/stackblitz.utils.ts
@@ -105,67 +105,63 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 const openAngularEditor = async (code: string, options?: EditorOptions) => {
   const defaultFiles = await loadSourceFiles(
     [
+      'angular/package.json',
+      'angular/angular.json',
+      'angular/tsconfig.json',
+      'angular/tsconfig.app.json',
       'angular/main.ts',
-      'angular/app.module.ts',
-      'angular/app.component.ts',
+      'angular/index.html',
+      'angular/app.routes.ts',
+      options?.includeIonContent ? 'angular/app.component.withContent.ts' : 'angular/app.component.ts',
       'angular/app.component.css',
       options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html',
       'angular/example.component.ts',
       'angular/styles.css',
       'angular/global.css',
       'angular/variables.css',
-      'angular/angular.json',
-      'angular/tsconfig.json',
-      'angular/package.json',
     ],
     options.version
   );
 
-  const appModule = 'src/app/app.module.ts';
+  const package_json = JSON.parse(defaultFiles[0]);
+
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
+    };
+  }
+
+  const main = 'src/main.ts';
+
   const files = {
-    'src/main.ts': defaultFiles[0],
+    'package.json': JSON.stringify(package_json, null, 2),
+    'angular.json': defaultFiles[1],
+    'tsconfig.json': defaultFiles[2],
+    'tsconfig.app.json': defaultFiles[3],
+    [main]: defaultFiles[4],
+    'src/index.html': defaultFiles[5],
     'src/polyfills.ts': `import 'zone.js';`,
-    [appModule]: defaultFiles[1],
-    'src/app/app.component.ts': defaultFiles[2],
-    'src/app/app.component.css': defaultFiles[3],
-    'src/app/app.component.html': defaultFiles[4],
-    'src/app/example.component.ts': defaultFiles[5],
+    'src/app/app.routes.ts': defaultFiles[6],
+    'src/app/app.component.ts': defaultFiles[7],
+    'src/app/app.component.css': defaultFiles[8],
+    'src/app/app.component.html': defaultFiles[9],
+    'src/app/example.component.ts': defaultFiles[10],
     'src/app/example.component.html': code,
     'src/app/example.component.css': '',
-    'src/index.html': '<app-root></app-root>',
-    'src/styles.css': defaultFiles[6],
-    'src/global.css': defaultFiles[7],
-    'src/theme/variables.css': defaultFiles[8],
-    'angular.json': defaultFiles[9],
-    'tsconfig.json': defaultFiles[10],
+    'src/styles.css': defaultFiles[11],
+    'src/global.css': defaultFiles[12],
+    'src/theme/variables.css': defaultFiles[13],
     ...options?.files,
-    ...options?.dependencies,
   };
 
-  const package_json = defaultFiles[11];
-
-  files[appModule] = files[appModule].replace(
-    'IonicModule.forRoot({})',
-    `IonicModule.forRoot({ mode: '${options?.mode}' })`
-  );
-
-  let dependencies = {};
-  try {
-    dependencies = {
-      ...dependencies,
-      ...JSON.parse(package_json).dependencies,
-      ...options?.dependencies,
-    };
-  } catch (e) {
-    console.error('Failed to parse package.json contents', e);
-  }
+  files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`);
 
   sdk.openProject({
-    template: 'angular-cli',
+    template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies,
   });
 };
 
diff --git a/static/code/stackblitz/v7/angular/angular.json b/static/code/stackblitz/v7/angular/angular.json
index 811624f69b..7cc8b31603 100644
--- a/static/code/stackblitz/v7/angular/angular.json
+++ b/static/code/stackblitz/v7/angular/angular.json
@@ -4,66 +4,86 @@
   "newProjectRoot": "projects",
   "projects": {
     "app": {
+      "projectType": "application",
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "www"
+            },
             "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": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "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",
-          "options": {
-            "browserTarget": "app:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
+            },
+            "development": {
+              "buildTarget": "app:build:development"
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
@@ -71,48 +91,43 @@
           "options": {
             "main": "src/test.ts",
             "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"
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "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/v7/angular/app.component.ts b/static/code/stackblitz/v7/angular/app.component.ts
index ed440084f8..0cf0f64b77 100644
--- a/static/code/stackblitz/v7/angular/app.component.ts
+++ b/static/code/stackblitz/v7/angular/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { IonApp } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp],
 })
-export class AppComponent { }
+export class AppComponent {
+  constructor() {}
+}
diff --git a/static/code/stackblitz/v7/angular/app.component.withContent.ts b/static/code/stackblitz/v7/angular/app.component.withContent.ts
new file mode 100644
index 0000000000..0a7113552c
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/app.component.withContent.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IonApp, IonContent } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp, IonContent],
+})
+export class AppComponent {
+  constructor() {}
+}
diff --git a/static/code/stackblitz/v7/angular/app.module.ts b/static/code/stackblitz/v7/angular/app.module.ts
deleted file mode 100644
index 7f6894ce6a..0000000000
--- a/static/code/stackblitz/v7/angular/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-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';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
diff --git a/static/code/stackblitz/v7/angular/app.routes.ts b/static/code/stackblitz/v7/angular/app.routes.ts
new file mode 100644
index 0000000000..f442724b6f
--- /dev/null
+++ b/static/code/stackblitz/v7/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',
+  },
+];
diff --git a/static/code/stackblitz/v7/angular/index.html b/static/code/stackblitz/v7/angular/index.html
new file mode 100644
index 0000000000..227b2a07ed
--- /dev/null
+++ b/static/code/stackblitz/v7/angular/index.html
@@ -0,0 +1,15 @@
+<!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/v7/angular/main.ts b/static/code/stackblitz/v7/angular/main.ts
index 518110491b..db355ecf14 100644
--- a/static/code/stackblitz/v7/angular/main.ts
+++ b/static/code/stackblitz/v7/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, provideIonicAngular } from '@ionic/angular/standalone';
 
-import { AppModule } from './app/app.module';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err: any) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideIonicAngular(),
+    provideRouter(routes, withPreloading(PreloadAllModules)),
+  ],
+});
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 2fbb72a638..fcb7176519 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,8 +1,32 @@
 {
+  "name": "angular-starter",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
   "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@ionic/angular": "^7.0.0",
     "@ionic/core": "^7.0.0",
-    "@angular/platform-browser-dynamic": "19.0.1",
-    "ionicons": "7.4.0"
+    "ionicons": "7.4.0",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.5.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/static/code/stackblitz/v7/angular/styles.css b/static/code/stackblitz/v7/angular/styles.css
index 463c50148f..b01fadedbe 100644
--- a/static/code/stackblitz/v7/angular/styles.css
+++ b/static/code/stackblitz/v7/angular/styles.css
@@ -10,17 +10,17 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import "@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
-@import "~@ionic/angular/css/display.css";
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
+@import "@ionic/angular/css/display.css";
diff --git a/static/code/stackblitz/v7/angular/tsconfig.app.json b/static/code/stackblitz/v7/angular/tsconfig.app.json
new file mode 100644
index 0000000000..f69a169a56
--- /dev/null
+++ b/static/code/stackblitz/v7/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/v7/angular/tsconfig.json b/static/code/stackblitz/v7/angular/tsconfig.json
index 129cb6a388..f46b98bad6 100644
--- a/static/code/stackblitz/v7/angular/tsconfig.json
+++ b/static/code/stackblitz/v7/angular/tsconfig.json
@@ -3,20 +3,27 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"]
+    "target": "es2022",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "enableIvy": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }
diff --git a/static/code/stackblitz/v8/angular/angular.json b/static/code/stackblitz/v8/angular/angular.json
index 811624f69b..7cc8b31603 100644
--- a/static/code/stackblitz/v8/angular/angular.json
+++ b/static/code/stackblitz/v8/angular/angular.json
@@ -4,66 +4,86 @@
   "newProjectRoot": "projects",
   "projects": {
     "app": {
+      "projectType": "application",
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "www"
+            },
             "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": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "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",
-          "options": {
-            "browserTarget": "app:build"
-          },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
+            },
+            "development": {
+              "buildTarget": "app:build:development"
+            },
+            "ci": {
+              "progress": false
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
@@ -71,48 +91,43 @@
           "options": {
             "main": "src/test.ts",
             "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"
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "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/v8/angular/app.component.ts b/static/code/stackblitz/v8/angular/app.component.ts
index ed440084f8..0cf0f64b77 100644
--- a/static/code/stackblitz/v8/angular/app.component.ts
+++ b/static/code/stackblitz/v8/angular/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { IonApp } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp],
 })
-export class AppComponent { }
+export class AppComponent {
+  constructor() {}
+}
diff --git a/static/code/stackblitz/v8/angular/app.component.withContent.ts b/static/code/stackblitz/v8/angular/app.component.withContent.ts
new file mode 100644
index 0000000000..0a7113552c
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/app.component.withContent.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IonApp, IonContent } from '@ionic/angular/standalone';
+import { ExampleComponent } from './example.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [ExampleComponent, IonApp, IonContent],
+})
+export class AppComponent {
+  constructor() {}
+}
diff --git a/static/code/stackblitz/v8/angular/app.module.ts b/static/code/stackblitz/v8/angular/app.module.ts
deleted file mode 100644
index 7f6894ce6a..0000000000
--- a/static/code/stackblitz/v8/angular/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-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';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
diff --git a/static/code/stackblitz/v8/angular/app.routes.ts b/static/code/stackblitz/v8/angular/app.routes.ts
new file mode 100644
index 0000000000..f442724b6f
--- /dev/null
+++ b/static/code/stackblitz/v8/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',
+  },
+];
diff --git a/static/code/stackblitz/v8/angular/index.html b/static/code/stackblitz/v8/angular/index.html
new file mode 100644
index 0000000000..227b2a07ed
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/index.html
@@ -0,0 +1,15 @@
+<!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/v8/angular/main.ts b/static/code/stackblitz/v8/angular/main.ts
index 518110491b..db355ecf14 100644
--- a/static/code/stackblitz/v8/angular/main.ts
+++ b/static/code/stackblitz/v8/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, provideIonicAngular } from '@ionic/angular/standalone';
 
-import { AppModule } from './app/app.module';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err: any) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideIonicAngular(),
+    provideRouter(routes, withPreloading(PreloadAllModules)),
+  ],
+});
diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index cc00c35fb5..b0c78d7f46 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -1,8 +1,32 @@
 {
+  "name": "angular-starter",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
   "dependencies": {
-    "@ionic/angular": "8.4.1",
-    "@ionic/core": "8.4.1",
-    "@angular/platform-browser-dynamic": "19.0.1",
-    "ionicons": "7.4.0"
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@ionic/angular": "^8.0.0",
+    "@ionic/core": "^8.0.0",
+    "ionicons": "7.4.0",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.5.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css
index 4532a9076d..6d58ddeb61 100644
--- a/static/code/stackblitz/v8/angular/styles.css
+++ b/static/code/stackblitz/v8/angular/styles.css
@@ -10,28 +10,28 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import "@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
-@import "~@ionic/angular/css/display.css";
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
 
 /**
- * Ionic Dark Theme
+ * Ionic Dark Palette
  * -----------------------------------------------------
- * For more information, please see:
+ * For more info, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 
-/* @import "~@ionic/angular/css/palettes/dark.always.css"; */
-/* @import "~@ionic/angular/css/palettes/dark.class.css"; */
-@import "~@ionic/angular/css/palettes/dark.system.css";
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import '@ionic/angular/css/palettes/dark.system.css';
diff --git a/static/code/stackblitz/v8/angular/tsconfig.app.json b/static/code/stackblitz/v8/angular/tsconfig.app.json
new file mode 100644
index 0000000000..f69a169a56
--- /dev/null
+++ b/static/code/stackblitz/v8/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/v8/angular/tsconfig.json b/static/code/stackblitz/v8/angular/tsconfig.json
index 129cb6a388..f46b98bad6 100644
--- a/static/code/stackblitz/v8/angular/tsconfig.json
+++ b/static/code/stackblitz/v8/angular/tsconfig.json
@@ -3,20 +3,27 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"]
+    "target": "es2022",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "enableIvy": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }
diff --git a/static/usage/v7/accordion/accessibility/animations/angular.md b/static/usage/v7/accordion/accessibility/animations/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/accessibility/animations/angular.md
rename to static/usage/v7/accordion/accessibility/animations/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md b/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/index.md b/static/usage/v7/accordion/accessibility/animations/index.md
index 867276f88f..d0c8c431f1 100644
--- a/static/usage/v7/accordion/accessibility/animations/index.md
+++ b/static/usage/v7/accordion/accessibility/animations/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/accordion/accessibility/animations/demo.html"
 />
diff --git a/static/usage/v7/accordion/basic/angular.md b/static/usage/v7/accordion/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/basic/angular.md
rename to static/usage/v7/accordion/basic/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/basic/angular/example_component_ts.md b/static/usage/v7/accordion/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/basic/index.md b/static/usage/v7/accordion/basic/index.md
index 36bb76371e..1b29e600d1 100644
--- a/static/usage/v7/accordion/basic/index.md
+++ b/static/usage/v7/accordion/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/accordion/basic/demo.html"
   size="210px"
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
index 4db53a836a..b1a1813cc1 100644
--- a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/angular.md b/static/usage/v7/accordion/customization/expansion-styles/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/customization/expansion-styles/angular.md
rename to static/usage/v7/accordion/customization/expansion-styles/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/customization/expansion-styles/angular/example_component_ts.md b/static/usage/v7/accordion/customization/expansion-styles/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/index.md b/static/usage/v7/accordion/customization/expansion-styles/index.md
index cf8e04356b..e658241cd5 100644
--- a/static/usage/v7/accordion/customization/expansion-styles/index.md
+++ b/static/usage/v7/accordion/customization/expansion-styles/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="250px"
   src="usage/v7/accordion/customization/expansion-styles/demo.html"
diff --git a/static/usage/v7/accordion/customization/icons/angular.md b/static/usage/v7/accordion/customization/icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/customization/icons/angular.md
rename to static/usage/v7/accordion/customization/icons/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v7/accordion/customization/icons/angular/example_component_ts.md
new file mode 100644
index 0000000000..ed5c7f01d9
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { caretDownCircle } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+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 });
+  }
+}
+```
diff --git a/static/usage/v7/accordion/customization/icons/index.md b/static/usage/v7/accordion/customization/icons/index.md
index 604cd78eb4..96d5c01d93 100644
--- a/static/usage/v7/accordion/customization/icons/index.md
+++ b/static/usage/v7/accordion/customization/icons/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="250px"
   src="usage/v7/accordion/customization/icons/demo.html"
diff --git a/static/usage/v7/accordion/customization/theming/angular/example_component_ts.md b/static/usage/v7/accordion/customization/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/customization/theming/index.md b/static/usage/v7/accordion/customization/theming/index.md
index 5d57f883cf..710dffd7d7 100644
--- a/static/usage/v7/accordion/customization/theming/index.md
+++ b/static/usage/v7/accordion/customization/theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html
deleted file mode 100644
index bc0ea29986..0000000000
--- a/static/usage/v7/accordion/disable-group/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group disabled="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">First Content</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Second Content</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Third Content</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v7/accordion/disable-group/index.md b/static/usage/v7/accordion/disable-group/index.md
deleted file mode 100644
index 204508c6b3..0000000000
--- a/static/usage/v7/accordion/disable-group/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  version="7"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/v7/accordion/disable-group/demo.html"
-/>
diff --git a/static/usage/v7/accordion/disable-group/javascript.md b/static/usage/v7/accordion/disable-group/javascript.md
deleted file mode 100644
index 163641a544..0000000000
--- a/static/usage/v7/accordion/disable-group/javascript.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-accordion-group disabled="true">
-  <ion-accordion value="first">
-    <ion-item slot="header" color="light">
-      <ion-label>First Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">First Content</div>
-  </ion-accordion>
-  <ion-accordion value="second">
-    <ion-item slot="header" color="light">
-      <ion-label>Second Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Second Content</div>
-  </ion-accordion>
-  <ion-accordion value="third">
-    <ion-item slot="header" color="light">
-      <ion-label>Third Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Third Content</div>
-  </ion-accordion>
-</ion-accordion-group>
-```
diff --git a/static/usage/v7/accordion/disable-group/react.md b/static/usage/v7/accordion/disable-group/react.md
deleted file mode 100644
index b2ff09b5fe..0000000000
--- a/static/usage/v7/accordion/disable-group/react.md
+++ /dev/null
@@ -1,35 +0,0 @@
-```tsx
-import React from 'react';
-import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
-function Example() {
-  return (
-    <IonAccordionGroup disabled={true}>
-      <IonAccordion value="first">
-        <IonItem slot="header" color="light">
-          <IonLabel>First Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          First Content
-        </div>
-      </IonAccordion>
-      <IonAccordion value="second">
-        <IonItem slot="header" color="light">
-          <IonLabel>Second Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          Second Content
-        </div>
-      </IonAccordion>
-      <IonAccordion value="third">
-        <IonItem slot="header" color="light">
-          <IonLabel>Third Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          Third Content
-        </div>
-      </IonAccordion>
-    </IonAccordionGroup>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v7/accordion/disable-group/vue.md b/static/usage/v7/accordion/disable-group/vue.md
deleted file mode 100644
index 6c9e356784..0000000000
--- a/static/usage/v7/accordion/disable-group/vue.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```html
-<template>
-  <ion-accordion-group :disabled="true">
-    <ion-accordion value="first">
-      <ion-item slot="header" color="light">
-        <ion-label>First Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">First Content</div>
-    </ion-accordion>
-    <ion-accordion value="second">
-      <ion-item slot="header" color="light">
-        <ion-label>Second Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">Second Content</div>
-    </ion-accordion>
-    <ion-accordion value="third">
-      <ion-item slot="header" color="light">
-        <ion-label>Third Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">Third Content</div>
-    </ion-accordion>
-  </ion-accordion-group>
-</template>
-
-<script lang="ts">
-  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
-</script>
-```
diff --git a/static/usage/v7/accordion/disable-group/angular.md b/static/usage/v7/accordion/disable/group/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/disable-group/angular.md
rename to static/usage/v7/accordion/disable/group/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/disable/group/angular/example_component_ts.md b/static/usage/v7/accordion/disable/group/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.md
index c564a2d16b..32a10a6cf9 100644
--- a/static/usage/v7/accordion/disable/group/index.md
+++ b/static/usage/v7/accordion/disable/group/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/accordion/disable/group/demo.html"
 />
diff --git a/static/usage/v7/accordion/disable/individual/angular.md b/static/usage/v7/accordion/disable/individual/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/disable/individual/angular.md
rename to static/usage/v7/accordion/disable/individual/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md b/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.md
index 28172bca32..da216e2c64 100644
--- a/static/usage/v7/accordion/disable/individual/index.md
+++ b/static/usage/v7/accordion/disable/individual/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="210px"
   src="usage/v7/accordion/disable/individual/demo.html"
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
index 3ebbccce6f..24055f1533 100644
--- a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
@@ -1,14 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
 })
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];
 
-  accordionGroupChange = (ev: any) => {
+  accordionGroupChange = (ev: CustomEvent) => {
     const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
     const selectedValue = ev.detail.value;
 
diff --git a/static/usage/v7/accordion/multiple/angular.md b/static/usage/v7/accordion/multiple/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/multiple/angular.md
rename to static/usage/v7/accordion/multiple/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/multiple/angular/example_component_ts.md b/static/usage/v7/accordion/multiple/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.md
index 868eaaa7c1..b63360d76c 100644
--- a/static/usage/v7/accordion/multiple/index.md
+++ b/static/usage/v7/accordion/multiple/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="320px"
   src="usage/v7/accordion/multiple/demo.html"
diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/readonly/group/angular.md
rename to static/usage/v7/accordion/readonly/group/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/readonly/group/angular/example_component_ts.md b/static/usage/v7/accordion/readonly/group/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/readonly/group/index.md b/static/usage/v7/accordion/readonly/group/index.md
index 78689ede73..655d2eb843 100644
--- a/static/usage/v7/accordion/readonly/group/index.md
+++ b/static/usage/v7/accordion/readonly/group/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="210px"
   src="usage/v7/accordion/readonly/group/demo.html"
diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/readonly/individual/angular.md
rename to static/usage/v7/accordion/readonly/individual/angular/example_component_html.md
diff --git a/static/usage/v7/accordion/readonly/individual/angular/example_component_ts.md b/static/usage/v7/accordion/readonly/individual/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/readonly/individual/index.md b/static/usage/v7/accordion/readonly/individual/index.md
index c7efd45b80..52c6b3bba6 100644
--- a/static/usage/v7/accordion/readonly/individual/index.md
+++ b/static/usage/v7/accordion/readonly/individual/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/accordion/readonly/individual/demo.html"
 />
diff --git a/static/usage/v7/accordion/toggle/angular/example_component_ts.md b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
index bdcac1d862..3afda996a1 100644
--- a/static/usage/v7/accordion/toggle/angular/example_component_ts.md
+++ b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
@@ -1,13 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonAccordionGroup } from '@ionic/angular';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel],
 })
 export class ExampleComponent {
-  @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
+  @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup;
 
   toggleAccordion = () => {
     const nativeEl = this.accordionGroup;
diff --git a/static/usage/v7/action-sheet/controller/angular/example_component_ts.md b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
index c7ecc27266..7257bcb45e 100644
--- a/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ActionSheetController } from '@ionic/angular';
+import { ActionSheetController, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
index 78d9ddf05c..df6c89aabe 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   isActionSheetOpen = false;
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
index f991151c4a..082f779fe1 100644
--- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
index a38c0b9230..f0f7fcc8d5 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
+import type { OverlayEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
@@ -32,8 +35,8 @@ export class ExampleComponent {
 
   constructor() {}
 
-  logResult(ev) {
-    console.log(JSON.stringify(ev.detail, null, 2));
+  logResult(event: CustomEvent<OverlayEventDetail<string>>) {
+    console.log(JSON.stringify(event.detail, null, 2));
   }
 }
 ```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
index d9714abb66..709135c1c1 100644
--- a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
index d9714abb66..709135c1c1 100644
--- a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md
index 20858d60e4..55be132d67 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
+import type { OverlayEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = [
@@ -23,7 +27,8 @@ export class ExampleComponent {
     },
   ];
 
-  setResult(ev) {
+  setResult(event: Event) {
+    const ev = event as CustomEvent<OverlayEventDetail<string>>;
     console.log(`Dismissed with role: ${ev.detail.role}`);
   }
 }
diff --git a/static/usage/v7/alert/customization/angular/example_component_ts.md b/static/usage/v7/alert/customization/angular/example_component_ts.md
index 51552ff985..ebfd969430 100644
--- a/static/usage/v7/alert/customization/angular/example_component_ts.md
+++ b/static/usage/v7/alert/customization/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = [
diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
index 34f44b288d..56ca5fedeb 100644
--- a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = ['OK'];
diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
index 713dc9067f..ae2c39e616 100644
--- a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
+++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = ['OK'];
diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
index 6fdd69c7f6..baf0999fd3 100644
--- a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { AlertController, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
index 82d1f17e45..e2f5ccac60 100644
--- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   isAlertOpen = false;
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
index 9526ebdde8..7d7adf11d2 100644
--- a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   alertButtons = ['Action'];
diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md
index e8a1dae1af..117dd07dcb 100644
--- a/static/usage/v7/animations/basic/angular/example_component_ts.md
+++ b/static/usage/v7/animations/basic/angular/example_component_ts.md
@@ -1,17 +1,18 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
index 36a7e22081..32c5089fdc 100644
--- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -1,40 +1,48 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
-    const card = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(0).nativeElement)
-      .duration(2000)
-      .beforeStyles({
-        filter: 'invert(75%)',
-      })
-      .beforeClearStyles(['box-shadow'])
-      .afterStyles({
-        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
-      })
-      .afterClearStyles(['filter'])
-      .keyframes([
-        { offset: 0, transform: 'scale(1)' },
-        { offset: 0.5, transform: 'scale(1.5)' },
-        { offset: 1, transform: 'scale(1)' },
-      ]);
-
-    this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+    const cardEl = this.cardElements.get(0);
+
+    const card = cardEl
+      ? this.animationCtrl
+          .create()
+          .addElement(cardEl.nativeElement)
+          .duration(2000)
+          .beforeStyles({
+            filter: 'invert(75%)',
+          })
+          .beforeClearStyles(['box-shadow'])
+          .afterStyles({
+            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+          })
+          .afterClearStyles(['filter'])
+          .keyframes([
+            { offset: 0, transform: 'scale(1)' },
+            { offset: 0.5, transform: 'scale(1.5)' },
+            { offset: 1, transform: 'scale(1)' },
+          ])
+      : null;
+
+    if (card) {
+      this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+    }
   }
 
   play() {
diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md
index 6c6acbef99..cb81d2e30d 100644
--- a/static/usage/v7/animations/chain/angular/example_component_ts.md
+++ b/static/usage/v7/animations/chain/angular/example_component_ts.md
@@ -1,73 +1,85 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private cardA: Animation;
-  private cardB: Animation;
-  private cardC: Animation;
+  private cardA!: Animation | null;
+  private cardB!: Animation | null;
+  private cardC!: Animation | null;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
-    this.cardA = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(0).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1) rotate(0)' },
-        { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-        { offset: 1, transform: 'scale(1) rotate(0)' },
-      ]);
+    const cardElA = this.cardElements.get(0);
+    const cardElB = this.cardElements.get(1);
+    const cardElC = this.cardElements.get(2);
 
-    this.cardB = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(1).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1)', opacity: '1' },
-        { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-        { offset: 1, transform: 'scale(1)', opacity: '1' },
-      ]);
+    this.cardA = cardElA
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElA.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1) rotate(0)' },
+            { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+            { offset: 1, transform: 'scale(1) rotate(0)' },
+          ])
+      : null;
 
-    this.cardC = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(2).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-        { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
-      ]);
+    this.cardB = cardElB
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElB.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '1' },
+            { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+            { offset: 1, transform: 'scale(1)', opacity: '1' },
+          ])
+      : null;
+
+    this.cardC = cardElC
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElC.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+            { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+          ])
+      : null;
   }
 
   async play() {
-    await this.cardA.play();
-    await this.cardB.play();
-    await this.cardC.play();
+    await this.cardA?.play();
+    await this.cardB?.play();
+    await this.cardC?.play();
   }
 
   pause() {
-    this.cardA.pause();
-    this.cardB.pause();
-    this.cardC.pause();
+    this.cardA?.pause();
+    this.cardB?.pause();
+    this.cardC?.pause();
   }
 
-  stop() {
-    this.cardA.stop();
-    this.cardB.stop();
-    this.cardC.stop();
+  async stop() {
+    await this.cardA?.stop();
+    await this.cardB?.stop();
+    await this.cardC?.stop();
   }
 }
 ```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
index 7b9aadccf5..49bb9e92f6 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -1,18 +1,19 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, IonCard } from '@ionic/angular';
-import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
-  private gesture: Gesture;
+  private animation!: Animation;
+  private gesture!: Gesture;
   private started = false;
   private initialStep = 0;
 
diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
index 63f7a7b2f7..607b9e9cdc 100644
--- a/static/usage/v7/animations/group/angular/example_component_ts.md
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -1,33 +1,35 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
     const cardA = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(0).nativeElement)
+      .addElement(this.cardElements.get(0)!.nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1) rotate(0)' },
         { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-        { offset: 1, transform: 'scale(1) rotate(0) ' },
+        { offset: 1, transform: 'scale(1) rotate(0)' },
       ]);
 
     const cardB = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(1).nativeElement)
+      .addElement(this.cardElements.get(1)!.nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '1' },
         { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -36,7 +38,7 @@ export class ExampleComponent {
 
     const cardC = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(2).nativeElement)
+      .addElement(this.cardElements.get(2)!.nativeElement)
       .duration(5000)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '0.5' },
@@ -48,7 +50,7 @@ export class ExampleComponent {
       .create()
       .duration(2000)
       .iterations(Infinity)
-      .addAnimation([cardA, cardB, cardC]);
+      .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]);
   }
 
   play() {
diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md
index 4ee04bea42..88bc548bd6 100644
--- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md
+++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md
@@ -1,16 +1,18 @@
 ```ts
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
index b1fe997c1d..85a6a5f9b3 100644
--- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md
+++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
@@ -1,14 +1,24 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import type { IonModal } from '@ionic/angular';
-import { AnimationController } from '@ionic/angular';
+import {
+  AnimationController,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('modal', { static: true }) modal: IonModal;
+  @ViewChild('modal', { static: true }) modal!: IonModal;
 
   constructor(private animationCtrl: AnimationController) {}
 
@@ -16,18 +26,22 @@ export class ExampleComponent {
     const enterAnimation = (baseEl: HTMLElement) => {
       const root = baseEl.shadowRoot;
 
+      const backdropElement = root?.querySelector('ion-backdrop');
+      const wrapperElement = root?.querySelector('.modal-wrapper');
+
       const backdropAnimation = this.animationCtrl
         .create()
-        .addElement(root.querySelector('ion-backdrop'))
+        .addElement(backdropElement || baseEl)
         .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-      const wrapperAnimation = this.animationCtrl
-        .create()
-        .addElement(root.querySelector('.modal-wrapper'))
-        .keyframes([
+      const wrapperAnimation = this.animationCtrl.create();
+
+      if (wrapperElement) {
+        wrapperAnimation.addElement(wrapperElement).keyframes([
           { offset: 0, opacity: '0', transform: 'scale(0)' },
           { offset: 1, opacity: '0.99', transform: 'scale(1)' },
         ]);
+      }
 
       return this.animationCtrl
         .create()
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
index c0e383d5ec..98b3a8d411 100644
--- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md
+++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
@@ -1,18 +1,18 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v7/avatar/basic/angular.md b/static/usage/v7/avatar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/avatar/basic/angular.md
rename to static/usage/v7/avatar/basic/angular/example_component_html.md
diff --git a/static/usage/v7/avatar/basic/angular/example_component_ts.md b/static/usage/v7/avatar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..effe558024
--- /dev/null
+++ b/static/usage/v7/avatar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/avatar/basic/index.md b/static/usage/v7/avatar/basic/index.md
index 8c51fa21d0..e77c4d5719 100644
--- a/static/usage/v7/avatar/basic/index.md
+++ b/static/usage/v7/avatar/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/avatar/basic/demo.html"
+/>
diff --git a/static/usage/v7/avatar/chip/angular.md b/static/usage/v7/avatar/chip/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/avatar/chip/angular.md
rename to static/usage/v7/avatar/chip/angular/example_component_html.md
diff --git a/static/usage/v7/avatar/chip/angular/example_component_ts.md b/static/usage/v7/avatar/chip/angular/example_component_ts.md
new file mode 100644
index 0000000000..244bc7b789
--- /dev/null
+++ b/static/usage/v7/avatar/chip/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonChip, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonChip, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/avatar/chip/index.md b/static/usage/v7/avatar/chip/index.md
index d3a7fc0f6a..1c26e7fff7 100644
--- a/static/usage/v7/avatar/chip/index.md
+++ b/static/usage/v7/avatar/chip/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/chip/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/avatar/chip/demo.html"
+/>
diff --git a/static/usage/v7/avatar/item/angular.md b/static/usage/v7/avatar/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/avatar/item/angular.md
rename to static/usage/v7/avatar/item/angular/example_component_html.md
diff --git a/static/usage/v7/avatar/item/angular/example_component_ts.md b/static/usage/v7/avatar/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..80785adaf8
--- /dev/null
+++ b/static/usage/v7/avatar/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/avatar/item/index.md b/static/usage/v7/avatar/item/index.md
index 52814ca5af..dd14f3df10 100644
--- a/static/usage/v7/avatar/item/index.md
+++ b/static/usage/v7/avatar/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/avatar/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/avatar/item/demo.html"
+/>
diff --git a/static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..effe558024
--- /dev/null
+++ b/static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.md
index 38bc99f7e8..a030f931d0 100644
--- a/static/usage/v7/avatar/theming/css-properties/index.md
+++ b/static/usage/v7/avatar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/back-button/basic/angular/app_module_ts.md b/static/usage/v7/back-button/basic/angular/app_module_ts.md
deleted file mode 100644
index 3c20b51144..0000000000
--- a/static/usage/v7/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/v7/back-button/basic/angular/example_component_ts.md b/static/usage/v7/back-button/basic/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v7/back-button/basic/angular/example_component_ts.md
+++ b/static/usage/v7/back-button/basic/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v7/back-button/basic/angular/page_one_component_ts.md b/static/usage/v7/back-button/basic/angular/page_one_component_ts.md
index d181c5a526..2f9b78ab16 100644
--- a/static/usage/v7/back-button/basic/angular/page_one_component_ts.md
+++ b/static/usage/v7/back-button/basic/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
index b2cda11d2a..55048bd7b2 100644
--- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +18,7 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {}
 ```
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md
index 27c7d6b0c0..e1fc97ab64 100644
--- a/static/usage/v7/back-button/basic/index.md
+++ b/static/usage/v7/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/v7/back-button/custom/angular/app_module_ts.md b/static/usage/v7/back-button/custom/angular/app_module_ts.md
deleted file mode 100644
index 3c20b51144..0000000000
--- a/static/usage/v7/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/v7/back-button/custom/angular/example_component_ts.md b/static/usage/v7/back-button/custom/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v7/back-button/custom/angular/example_component_ts.md
+++ b/static/usage/v7/back-button/custom/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v7/back-button/custom/angular/page_one_component_ts.md b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
index d181c5a526..2f9b78ab16 100644
--- a/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
+++ b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
index 05a1bd64d7..b0fb5a01ec 100644
--- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
@@ -1,5 +1,9 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { caretBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +21,16 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
-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/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md
index d90a901513..61c3038ecf 100644
--- a/static/usage/v7/back-button/custom/index.md
+++ b/static/usage/v7/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: {
diff --git a/static/usage/v7/backdrop/basic/angular/example_component_ts.md b/static/usage/v7/backdrop/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..c4809eb965
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonBackdrop,
+  IonButton,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md
index 491b5eec6e..f42ba8c6fc 100644
--- a/static/usage/v7/backdrop/basic/index.md
+++ b/static/usage/v7/backdrop/basic/index.md
@@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_html from './angular/example_component_html.md'
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/backdrop/styling/angular/example_component_ts.md b/static/usage/v7/backdrop/styling/angular/example_component_ts.md
new file mode 100644
index 0000000000..ebf285b93a
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonBackdrop,
+  IonButton,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.md
index a7861a18ed..e32ab366cc 100644
--- a/static/usage/v7/backdrop/styling/index.md
+++ b/static/usage/v7/backdrop/styling/index.md
@@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/badge/basic/angular.md b/static/usage/v7/badge/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/badge/basic/angular.md
rename to static/usage/v7/badge/basic/angular/example_component_html.md
diff --git a/static/usage/v7/badge/basic/angular/example_component_ts.md b/static/usage/v7/badge/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v7/badge/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/badge/basic/index.md b/static/usage/v7/badge/basic/index.md
index 843c4a046c..4faf184aea 100644
--- a/static/usage/v7/badge/basic/index.md
+++ b/static/usage/v7/badge/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/badge/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/badge/basic/demo.html"
+/>
diff --git a/static/usage/v7/badge/theming/colors/angular.md b/static/usage/v7/badge/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/badge/theming/colors/angular.md
rename to static/usage/v7/badge/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/badge/theming/colors/angular/example_component_ts.md b/static/usage/v7/badge/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md
index 1b640d0675..24e4c35568 100644
--- a/static/usage/v7/badge/theming/colors/index.md
+++ b/static/usage/v7/badge/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/badge/theming/colors/demo.html"
 />
diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md
index 3fdf7e333a..427b06d533 100644
--- a/static/usage/v7/badge/theming/css-properties/index.md
+++ b/static/usage/v7/badge/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/breadcrumbs/basic/angular.md b/static/usage/v7/breadcrumbs/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/breadcrumbs/basic/angular.md
rename to static/usage/v7/breadcrumbs/basic/angular/example_component_html.md
diff --git a/static/usage/v7/breadcrumbs/basic/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/breadcrumbs/basic/index.md b/static/usage/v7/breadcrumbs/basic/index.md
index 0159e5aa44..8f00c928fc 100644
--- a/static/usage/v7/breadcrumbs/basic/index.md
+++ b/static/usage/v7/breadcrumbs/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/breadcrumbs/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/breadcrumbs/basic/demo.html"
+/>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
index 8ae69af72a..269836b83d 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
 })
 export class ExampleComponent {
-  maxBreadcrumbs = 4;
+  maxBreadcrumbs? = 4;
 
   expandBreadcrumbs() {
     this.maxBreadcrumbs = undefined;
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
rename to static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
index 3df433d189..6966fcca9b 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html"
 />
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
rename to static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
index 48e8a4ed82..78ec179e69 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/breadcrumbs/collapsing-items/max-items/demo.html"
 />
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
index e3c0462a14..abd91bba07 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
@@ -11,13 +11,11 @@
   <ng-template>
     <ion-content>
       <ion-list>
-        <ion-item
-          *ngFor="let breadcrumb of collapsedBreadcrumbs; last as isLast"
-          [href]="breadcrumb.href"
-          [lines]="isLast ? 'none' : null"
-        >
+        @for (breadcrumb of collapsedBreadcrumbs; track breadcrumb; let last = $last) {
+        <ion-item [href]="breadcrumb.href" [lines]="last ? 'none' : null">
           <ion-label>{{ breadcrumb.textContent }}</ion-label>
         </ion-item>
+        }
       </ion-list>
     </ion-content>
   </ng-template>
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
index aabfb29a82..17d100420d 100644
--- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -1,12 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPopover,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
   collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
index 072f2c1090..2634a7a252 100644
--- a/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { arrowForwardCircle } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { arrowForwardCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
index ccc9439a38..474da49689 100644
--- a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { camera, film, flash, home } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { camera, film, flash, home } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular.md b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/breadcrumbs/theming/colors/angular.md
rename to static/usage/v7/breadcrumbs/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md
index c100fffe65..647ec6cc98 100644
--- a/static/usage/v7/breadcrumbs/theming/colors/index.md
+++ b/static/usage/v7/breadcrumbs/theming/colors/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/breadcrumbs/theming/colors/demo.html"
 />
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
index d808d24927..c9ce8d95c7 100644
--- a/static/usage/v7/breadcrumbs/theming/css-properties/index.md
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -22,8 +23,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/basic/angular.md
rename to static/usage/v7/button/basic/angular/example_component_html.md
diff --git a/static/usage/v7/button/basic/angular/example_component_ts.md b/static/usage/v7/button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/basic/index.md b/static/usage/v7/button/basic/index.md
index 5113cbb410..54fdd58d3d 100644
--- a/static/usage/v7/button/basic/index.md
+++ b/static/usage/v7/button/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/basic/demo.html"
+/>
diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/expand/angular.md
rename to static/usage/v7/button/expand/angular/example_component_html.md
diff --git a/static/usage/v7/button/expand/angular/example_component_ts.md b/static/usage/v7/button/expand/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/expand/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/expand/index.md b/static/usage/v7/button/expand/index.md
index 6bf7c9907f..e93387cdcc 100644
--- a/static/usage/v7/button/expand/index.md
+++ b/static/usage/v7/button/expand/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/expand/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/expand/demo.html"
+/>
diff --git a/static/usage/v7/button/fill/angular.md b/static/usage/v7/button/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/fill/angular.md
rename to static/usage/v7/button/fill/angular/example_component_html.md
diff --git a/static/usage/v7/button/fill/angular/example_component_ts.md b/static/usage/v7/button/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/fill/index.md b/static/usage/v7/button/fill/index.md
index db05b92b34..1d97a1bbbd 100644
--- a/static/usage/v7/button/fill/index.md
+++ b/static/usage/v7/button/fill/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/fill/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/fill/demo.html"
+/>
diff --git a/static/usage/v7/button/icons/angular/example_component_ts.md b/static/usage/v7/button/icons/angular/example_component_ts.md
index 90bc1d24d3..b852f87302 100644
--- a/static/usage/v7/button/icons/angular/example_component_ts.md
+++ b/static/usage/v7/button/icons/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/shape/angular.md
rename to static/usage/v7/button/shape/angular/example_component_html.md
diff --git a/static/usage/v7/button/shape/angular/example_component_ts.md b/static/usage/v7/button/shape/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/shape/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/shape/index.md b/static/usage/v7/button/shape/index.md
index cc5417f8d5..2e5fa3e0a3 100644
--- a/static/usage/v7/button/shape/index.md
+++ b/static/usage/v7/button/shape/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/shape/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/shape/demo.html"
+/>
diff --git a/static/usage/v7/button/size/angular.md b/static/usage/v7/button/size/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/size/angular.md
rename to static/usage/v7/button/size/angular/example_component_html.md
diff --git a/static/usage/v7/button/size/angular/example_component_ts.md b/static/usage/v7/button/size/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/size/index.md b/static/usage/v7/button/size/index.md
index e59a99edb6..b7ff7457aa 100644
--- a/static/usage/v7/button/size/index.md
+++ b/static/usage/v7/button/size/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/size/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/size/demo.html"
+/>
diff --git a/static/usage/v7/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/text-wrapping/angular.md
rename to static/usage/v7/button/text-wrapping/angular/example_component_html.md
diff --git a/static/usage/v7/button/text-wrapping/angular/example_component_ts.md b/static/usage/v7/button/text-wrapping/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/text-wrapping/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/text-wrapping/index.md b/static/usage/v7/button/text-wrapping/index.md
index 7696d79885..508d80714b 100644
--- a/static/usage/v7/button/text-wrapping/index.md
+++ b/static/usage/v7/button/text-wrapping/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/text-wrapping/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/text-wrapping/demo.html"
+/>
diff --git a/static/usage/v7/button/theming/colors/angular.md b/static/usage/v7/button/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/button/theming/colors/angular.md
rename to static/usage/v7/button/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/button/theming/colors/angular/example_component_ts.md b/static/usage/v7/button/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/theming/colors/index.md b/static/usage/v7/button/theming/colors/index.md
index 88cb6539a8..4c7697f018 100644
--- a/static/usage/v7/button/theming/colors/index.md
+++ b/static/usage/v7/button/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/button/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/button/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/button/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md
index 32f67b6f00..d2c079e37c 100644
--- a/static/usage/v7/button/theming/css-properties/index.md
+++ b/static/usage/v7/button/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/buttons/basic/angular.md b/static/usage/v7/buttons/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/buttons/basic/angular.md
rename to static/usage/v7/buttons/basic/angular/example_component_html.md
diff --git a/static/usage/v7/buttons/basic/angular/example_component_ts.md b/static/usage/v7/buttons/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd7b99299d
--- /dev/null
+++ b/static/usage/v7/buttons/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/buttons/basic/index.md b/static/usage/v7/buttons/basic/index.md
index f9c82463e8..157f06ed9f 100644
--- a/static/usage/v7/buttons/basic/index.md
+++ b/static/usage/v7/buttons/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/buttons/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/buttons/basic/demo.html"
+/>
diff --git a/static/usage/v7/buttons/placement/angular.md b/static/usage/v7/buttons/placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/buttons/placement/angular.md
rename to static/usage/v7/buttons/placement/angular/example_component_html.md
diff --git a/static/usage/v7/buttons/placement/angular/example_component_ts.md b/static/usage/v7/buttons/placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd7b99299d
--- /dev/null
+++ b/static/usage/v7/buttons/placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/buttons/placement/index.md b/static/usage/v7/buttons/placement/index.md
index 9d2fd3dcfe..38e38bc256 100644
--- a/static/usage/v7/buttons/placement/index.md
+++ b/static/usage/v7/buttons/placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/buttons/placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/buttons/placement/demo.html"
+/>
diff --git a/static/usage/v7/buttons/types/angular/example_component_ts.md b/static/usage/v7/buttons/types/angular/example_component_ts.md
index 7af150bd16..94e3d6ef6f 100644
--- a/static/usage/v7/buttons/types/angular/example_component_ts.md
+++ b/static/usage/v7/buttons/types/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/card/basic/angular.md b/static/usage/v7/card/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/card/basic/angular.md
rename to static/usage/v7/card/basic/angular/example_component_html.md
diff --git a/static/usage/v7/card/basic/angular/example_component_ts.md b/static/usage/v7/card/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v7/card/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md
index 6c090f394b..acb83e4969 100644
--- a/static/usage/v7/card/basic/index.md
+++ b/static/usage/v7/card/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/card/basic/demo.html"
+/>
diff --git a/static/usage/v7/card/buttons/angular.md b/static/usage/v7/card/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/card/buttons/angular.md
rename to static/usage/v7/card/buttons/angular/example_component_html.md
diff --git a/static/usage/v7/card/buttons/angular/example_component_ts.md b/static/usage/v7/card/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..74ee512cb4
--- /dev/null
+++ b/static/usage/v7/card/buttons/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md
index c19055f3a7..2d837481db 100644
--- a/static/usage/v7/card/buttons/index.md
+++ b/static/usage/v7/card/buttons/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/buttons/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/card/buttons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/card/list/angular/example_component_ts.md b/static/usage/v7/card/list/angular/example_component_ts.md
new file mode 100644
index 0000000000..204d500d31
--- /dev/null
+++ b/static/usage/v7/card/list/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonThumbnail,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardSubtitle,
+    IonCardTitle,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonThumbnail,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/list/index.md b/static/usage/v7/card/list/index.md
index 3cc353476b..6acc2c4d2a 100644
--- a/static/usage/v7/card/list/index.md
+++ b/static/usage/v7/card/list/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/card/media/angular.md b/static/usage/v7/card/media/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/card/media/angular.md
rename to static/usage/v7/card/media/angular/example_component_html.md
diff --git a/static/usage/v7/card/media/angular/example_component_ts.md b/static/usage/v7/card/media/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v7/card/media/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/media/index.md b/static/usage/v7/card/media/index.md
index 3d4cda0926..a194c0c958 100644
--- a/static/usage/v7/card/media/index.md
+++ b/static/usage/v7/card/media/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/card/media/demo.html" size="350px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/card/media/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v7/card/theming/colors/angular.md b/static/usage/v7/card/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/card/theming/colors/angular.md
rename to static/usage/v7/card/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/card/theming/colors/angular/example_component_ts.md b/static/usage/v7/card/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.md
index 30ce310e99..69f6a1a5d0 100644
--- a/static/usage/v7/card/theming/colors/index.md
+++ b/static/usage/v7/card/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/card/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v7/card/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/card/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md
index cc473c03d3..2770079f8b 100644
--- a/static/usage/v7/card/theming/css-properties/index.md
+++ b/static/usage/v7/card/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/checkbox/alignment/angular.md b/static/usage/v7/checkbox/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/alignment/angular.md
rename to static/usage/v7/checkbox/alignment/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/alignment/angular/example_component_ts.md b/static/usage/v7/checkbox/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..b6b56f82f5
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/alignment/index.md b/static/usage/v7/checkbox/alignment/index.md
index 80aa3a8c53..72565eb94c 100644
--- a/static/usage/v7/checkbox/alignment/index.md
+++ b/static/usage/v7/checkbox/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/checkbox/alignment/demo.html"
 />
diff --git a/static/usage/v7/checkbox/basic/angular.md b/static/usage/v7/checkbox/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/basic/angular.md
rename to static/usage/v7/checkbox/basic/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/basic/angular/example_component_ts.md b/static/usage/v7/checkbox/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md
index e238ae9c63..ec6feae0a2 100644
--- a/static/usage/v7/checkbox/basic/index.md
+++ b/static/usage/v7/checkbox/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/checkbox/basic/demo.html"
 />
diff --git a/static/usage/v7/checkbox/indeterminate/angular.md b/static/usage/v7/checkbox/indeterminate/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/indeterminate/angular.md
rename to static/usage/v7/checkbox/indeterminate/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md b/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md
index bcc02a761e..d28dabb4d3 100644
--- a/static/usage/v7/checkbox/indeterminate/index.md
+++ b/static/usage/v7/checkbox/indeterminate/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/checkbox/indeterminate/demo.html"
 />
diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/justify/angular.md
rename to static/usage/v7/checkbox/justify/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/justify/angular/example_component_ts.md b/static/usage/v7/checkbox/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..b6b56f82f5
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/justify/index.md b/static/usage/v7/checkbox/justify/index.md
index 1128d74a9f..c27af62666 100644
--- a/static/usage/v7/checkbox/justify/index.md
+++ b/static/usage/v7/checkbox/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/checkbox/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/checkbox/justify/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/label-link/angular.md b/static/usage/v7/checkbox/label-link/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/label-link/angular.md
rename to static/usage/v7/checkbox/label-link/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/label-link/angular/example_component_ts.md b/static/usage/v7/checkbox/label-link/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v7/checkbox/label-link/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/label-link/index.md b/static/usage/v7/checkbox/label-link/index.md
index 1e34eef699..3c7ff7673d 100644
--- a/static/usage/v7/checkbox/label-link/index.md
+++ b/static/usage/v7/checkbox/label-link/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/checkbox/label-link/demo.html"
 />
diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/checkbox/label-placement/angular.md
rename to static/usage/v7/checkbox/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md b/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/label-placement/index.md b/static/usage/v7/checkbox/label-placement/index.md
index 2534249529..96474facc2 100644
--- a/static/usage/v7/checkbox/label-placement/index.md
+++ b/static/usage/v7/checkbox/label-placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/checkbox/label-placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/checkbox/label-placement/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md
index 51d619f8cc..d6ae616fd9 100644
--- a/static/usage/v7/checkbox/theming/css-properties/index.md
+++ b/static/usage/v7/checkbox/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/chip/basic/angular.md b/static/usage/v7/chip/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/chip/basic/angular.md
rename to static/usage/v7/chip/basic/angular/example_component_html.md
diff --git a/static/usage/v7/chip/basic/angular/example_component_ts.md b/static/usage/v7/chip/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v7/chip/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/chip/basic/index.md b/static/usage/v7/chip/basic/index.md
index e605cabed8..0028e62ec5 100644
--- a/static/usage/v7/chip/basic/index.md
+++ b/static/usage/v7/chip/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/chip/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/chip/basic/demo.html"
+/>
diff --git a/static/usage/v7/chip/slots/angular/example_component_ts.md b/static/usage/v7/chip/slots/angular/example_component_ts.md
index 6b388ef38d..5edb3cd886 100644
--- a/static/usage/v7/chip/slots/angular/example_component_ts.md
+++ b/static/usage/v7/chip/slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { close, closeCircle, pin } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { close, closeCircle, pin } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonChip, IonIcon, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/chip/theming/colors/angular.md b/static/usage/v7/chip/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/chip/theming/colors/angular.md
rename to static/usage/v7/chip/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/chip/theming/colors/angular/example_component_ts.md b/static/usage/v7/chip/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v7/chip/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/chip/theming/colors/index.md b/static/usage/v7/chip/theming/colors/index.md
index 08aba14cac..1fef347970 100644
--- a/static/usage/v7/chip/theming/colors/index.md
+++ b/static/usage/v7/chip/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/chip/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/chip/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md
index 2ce8f542f9..29019aac70 100644
--- a/static/usage/v7/chip/theming/css-properties/index.md
+++ b/static/usage/v7/chip/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/content/basic/angular.md b/static/usage/v7/content/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/content/basic/angular.md
rename to static/usage/v7/content/basic/angular/example_component_html.md
diff --git a/static/usage/v7/content/basic/angular/example_component_ts.md b/static/usage/v7/content/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v7/content/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/basic/index.md b/static/usage/v7/content/basic/index.md
index 2e49772c97..b11bd8af32 100644
--- a/static/usage/v7/content/basic/index.md
+++ b/static/usage/v7/content/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/content/basic/demo.html"
   includeIonContent={false}
   devicePreview={true}
diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md
deleted file mode 100644
index 82cb300712..0000000000
--- a/static/usage/v7/content/fixed/angular.md
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
-
-  <ion-button>Normal Button</ion-button>
-  <ion-button slot="fixed">Fixed Button</ion-button>
-
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
-    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
-    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
-    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
-    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
-    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
-    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
-    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
-    nulla sit amet erat malesuada euismod vel a nulla.
-  </p>
-  <p>
-    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
-    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
-    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
-    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
-    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
-    maximus.
-  </p>
-  <p>
-    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
-    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
-    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
-    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
-    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
-    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
-    turpis.
-  </p>
-  <p>
-    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
-    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
-    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
-    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
-    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
-    condimentum fermentum rutrum.
-  </p>
-  <p>
-    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
-    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
-    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
-    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
-    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
-    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
-    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
-  </p>
-</ion-content>
-```
diff --git a/static/usage/v7/content/fixed/angular/example_component_ts.md b/static/usage/v7/content/fixed/angular/example_component_ts.md
new file mode 100644
index 0000000000..38a7b14090
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md
index 6ff6db1f65..e389cbcc2c 100644
--- a/static/usage/v7/content/fixed/index.md
+++ b/static/usage/v7/content/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/content/fixed/react.md b/static/usage/v7/content/fixed/react.md
deleted file mode 100644
index 55d5e1b936..0000000000
--- a/static/usage/v7/content/fixed/react.md
+++ /dev/null
@@ -1,62 +0,0 @@
-```tsx
-import React from 'react';
-import { IonButton, IonContent } from '@ionic/react';
-
-function Example() {
-  return (
-    <IonContent className="ion-padding">
-      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
-
-      <IonButton>Normal Button</IonButton>
-      <IonButton slot="fixed">Fixed Button</IonButton>
-
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
-        in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
-        sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
-        neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
-        blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
-        justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
-        Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
-        mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
-        dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
-      </p>
-      <p>
-        Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
-        venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
-        sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
-        sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
-        et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
-        tristique maximus.
-      </p>
-      <p>
-        Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
-        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
-        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
-        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
-        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
-        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
-        molestie sed, pretium vitae turpis.
-      </p>
-      <p>
-        Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
-        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
-        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
-        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
-        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
-        at. Mauris condimentum fermentum rutrum.
-      </p>
-      <p>
-        Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
-        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
-        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
-        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
-        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
-        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
-        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
-      </p>
-    </IonContent>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_ts.md b/static/usage/v7/content/fullscreen/angular/example_component_ts.md
new file mode 100644
index 0000000000..5180063af5
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/fullscreen/index.md b/static/usage/v7/content/fullscreen/index.md
index cc20ddf507..20d142fbd0 100644
--- a/static/usage/v7/content/fullscreen/index.md
+++ b/static/usage/v7/content/fullscreen/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/content/header-footer/angular.md
rename to static/usage/v7/content/header-footer/angular/example_component_html.md
diff --git a/static/usage/v7/content/header-footer/angular/example_component_ts.md b/static/usage/v7/content/header-footer/angular/example_component_ts.md
new file mode 100644
index 0000000000..5180063af5
--- /dev/null
+++ b/static/usage/v7/content/header-footer/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.md
index d045cac7fa..040df25a77 100644
--- a/static/usage/v7/content/header-footer/index.md
+++ b/static/usage/v7/content/header-footer/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/content/header-footer/demo.html"
   includeIonContent={false}
   devicePreview={true}
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_ts.md b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
index ffd3d5b6d1..248333cb20 100644
--- a/static/usage/v7/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ScrollDetail } from '@ionic/angular';
+import { IonContent, ScrollDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
 })
 export class ExampleComponent {
   handleScrollStart() {
diff --git a/static/usage/v7/content/scroll-methods/angular/example_component_ts.md b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
index 1975fe3b34..0551d8df31 100644
--- a/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
@@ -1,13 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonContent } from '@ionic/angular';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonContent) content: IonContent;
+  @ViewChild(IonContent) content!: IonContent;
 
   scrollToBottom() {
     // Passing a duration to the method makes it so the scroll slowly
diff --git a/static/usage/v7/content/theming/colors/angular.md b/static/usage/v7/content/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/content/theming/colors/angular.md
rename to static/usage/v7/content/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/content/theming/colors/angular/example_component_ts.md b/static/usage/v7/content/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/theming/colors/index.md b/static/usage/v7/content/theming/colors/index.md
index 207e0aaaa7..38d33f457f 100644
--- a/static/usage/v7/content/theming/colors/index.md
+++ b/static/usage/v7/content/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/content/theming/colors/demo.html"
   includeIonContent={false}
   size="xlarge"
diff --git a/static/usage/v7/content/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/content/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.md
index 54c7fe1209..84912b03e1 100644
--- a/static/usage/v7/content/theming/css-properties/index.md
+++ b/static/usage/v7/content/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.md
index ce8ccc6ed3..43419f0799 100644
--- a/static/usage/v7/content/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/content/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_ts.md b/static/usage/v7/content/theming/safe-area/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md
index 6ab052ec2d..27f1d62a28 100644
--- a/static/usage/v7/content/theming/safe-area/index.md
+++ b/static/usage/v7/content/theming/safe-area/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -26,6 +27,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/datetime-button/basic/angular.md b/static/usage/v7/datetime-button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime-button/basic/angular.md
rename to static/usage/v7/datetime-button/basic/angular/example_component_html.md
diff --git a/static/usage/v7/datetime-button/basic/angular/example_component_ts.md b/static/usage/v7/datetime-button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..9a422284c2
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime, IonDatetimeButton, IonModal],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.md
index a55a9640c0..afa909273c 100644
--- a/static/usage/v7/datetime-button/basic/index.md
+++ b/static/usage/v7/datetime-button/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime-button/basic/demo.html"
 />
diff --git a/static/usage/v7/datetime-button/format-options/angular.md b/static/usage/v7/datetime-button/format-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime-button/format-options/angular.md
rename to static/usage/v7/datetime-button/format-options/angular/example_component_html.md
diff --git a/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md b/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md
new file mode 100644
index 0000000000..777f7fe66a
--- /dev/null
+++ b/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime, IonDatetimeButton, IonModal],
+  // This schema is used to bypass an issue in Ionic Framework v7
+  // where formatOptions is not exported. Upgrade to Ionic
+  // Framework 8.1.1 or later to remove this workaround.
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime-button/format-options/index.md b/static/usage/v7/datetime-button/format-options/index.md
index 482629caa3..28df6cbc5e 100644
--- a/static/usage/v7/datetime-button/format-options/index.md
+++ b/static/usage/v7/datetime-button/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/datetime-button/format-options/demo.html"
 />
diff --git a/static/usage/v7/datetime/basic/angular.md b/static/usage/v7/datetime/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/basic/angular.md
rename to static/usage/v7/datetime/basic/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/basic/angular/example_component_ts.md b/static/usage/v7/datetime/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.md
index 99e893af49..7c9181c434 100644
--- a/static/usage/v7/datetime/basic/index.md
+++ b/static/usage/v7/datetime/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/basic/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
rename to static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
index 7b03b2ff8f..ac1d29dc5a 100644
--- a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/buttons/customizing-button-texts/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/buttons/customizing-buttons/angular.md
rename to static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..9a2b1795d6
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
index 4224357f52..a133ce5eac 100644
--- a/static/usage/v7/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/buttons/customizing-buttons/demo.html"
 />
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
rename to static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
index 2510a15e89..77ad7161e8 100644
--- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html"
 />
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
index 3021390e18..37d9936a82 100644
--- a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/date-constraints/max-min/angular.md
rename to static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.md
index 808fa7bf75..13219e583f 100644
--- a/static/usage/v7/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v7/datetime/date-constraints/max-min/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/date-constraints/max-min/demo.html"
 />
diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/date-constraints/values/angular.md
rename to static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.md
index dc33ed9ac8..57b17c21e2 100644
--- a/static/usage/v7/datetime/date-constraints/values/index.md
+++ b/static/usage/v7/datetime/date-constraints/values/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/date-constraints/values/demo.html"
 />
diff --git a/static/usage/v7/datetime/format-options/angular.md b/static/usage/v7/datetime/format-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/format-options/angular.md
rename to static/usage/v7/datetime/format-options/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/format-options/angular/example_component_ts.md b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
new file mode 100644
index 0000000000..d762802859
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+  // This schema is used to bypass an issue in Ionic Framework v7
+  // where formatOptions is not exported. Upgrade to Ionic
+  // Framework 8.1.1 or later to remove this workaround.
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md
index f12a9dc3bd..bb5c3770fe 100644
--- a/static/usage/v7/datetime/format-options/index.md
+++ b/static/usage/v7/datetime/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/datetime/format-options/demo.html"
 />
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index 4ca93b85f4..1382b5db0e 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index 60f9c700d0..b877e31c7e 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
-  highlightedDates = (isoString) => {
+  highlightedDates = (isoString: string) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/localization/custom-locale/angular.md
rename to static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.md
index 566363cc08..ecbef0b093 100644
--- a/static/usage/v7/datetime/localization/custom-locale/index.md
+++ b/static/usage/v7/datetime/localization/custom-locale/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/localization/custom-locale/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/localization/first-day-of-week/angular.md
rename to static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.md
index 389010b430..eab3232865 100644
--- a/static/usage/v7/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v7/datetime/localization/first-day-of-week/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/localization/first-day-of-week/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/localization/hour-cycle/angular.md
rename to static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.md
index 5ffaf29bb4..b03b4360a2 100644
--- a/static/usage/v7/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v7/datetime/localization/hour-cycle/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/localization/hour-cycle/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/localization/locale-extension-tags/angular.md
rename to static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
index 33c92262f9..1355a44347 100644
--- a/static/usage/v7/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/localization/locale-extension-tags/demo.html"
 />
diff --git a/static/usage/v7/datetime/localization/time-label/angular.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/localization/time-label/angular.md
rename to static/usage/v7/datetime/localization/time-label/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.md
index e35108abac..3841888f4f 100644
--- a/static/usage/v7/datetime/localization/time-label/index.md
+++ b/static/usage/v7/datetime/localization/time-label/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/localization/time-label/demo.html"
 />
diff --git a/static/usage/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/multiple/angular.md
rename to static/usage/v7/datetime/multiple/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/multiple/angular/example_component_ts.md b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.md
index 84405fb740..250303f71b 100644
--- a/static/usage/v7/datetime/multiple/index.md
+++ b/static/usage/v7/datetime/multiple/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/multiple/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/date/angular.md b/static/usage/v7/datetime/presentation/date/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/presentation/date/angular.md
rename to static/usage/v7/datetime/presentation/date/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.md
index 9778082726..182b1d07ae 100644
--- a/static/usage/v7/datetime/presentation/date/index.md
+++ b/static/usage/v7/datetime/presentation/date/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/presentation/date/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/presentation/month-and-year/angular.md
rename to static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.md
index 524545fb03..b1f841692e 100644
--- a/static/usage/v7/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v7/datetime/presentation/month-and-year/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="240px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/presentation/month-and-year/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/time/angular.md b/static/usage/v7/datetime/presentation/time/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/presentation/time/angular.md
rename to static/usage/v7/datetime/presentation/time/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.md
index 9423cfba0f..c2482e6f00 100644
--- a/static/usage/v7/datetime/presentation/time/index.md
+++ b/static/usage/v7/datetime/presentation/time/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/presentation/time/demo.html"
 />
diff --git a/static/usage/v7/datetime/presentation/wheel/angular.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/presentation/wheel/angular.md
rename to static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.md
index 47e4923bba..8305adfc58 100644
--- a/static/usage/v7/datetime/presentation/wheel/index.md
+++ b/static/usage/v7/datetime/presentation/wheel/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/presentation/wheel/demo.html"
 />
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
index 56c95d0ba0..20df0e860f 100644
--- a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,5 +1,7 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,9 +11,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime, FormsModule],
 })
 export class ExampleComponent implements OnInit {
-  public datetime;
+  public datetime!: string;
 
   ngOnInit() {
     const date = new Date();
diff --git a/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
index 4ec3d3ecdf..08a64bf203 100644
--- a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
+++ b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md
@@ -1,19 +1,19 @@
 ```css
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
 
 :root {
   --ion-color-rose: #831843;
diff --git a/static/usage/v7/datetime/styling/global-theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.md
index f8824304f0..d566af6e99 100644
--- a/static/usage/v7/datetime/styling/global-theming/index.md
+++ b/static/usage/v7/datetime/styling/global-theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,6 +26,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
index 39bac10093..6541627176 100644
--- a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md
index 4ec3d3ecdf..08a64bf203 100644
--- a/static/usage/v7/datetime/theming/angular/global_css.md
+++ b/static/usage/v7/datetime/theming/angular/global_css.md
@@ -1,19 +1,19 @@
 ```css
 /* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
 
 :root {
   --ion-color-rose: #831843;
diff --git a/static/usage/v7/datetime/title/customizing-title/angular.md b/static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/title/customizing-title/angular.md
rename to static/usage/v7/datetime/title/customizing-title/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/index.md b/static/usage/v7/datetime/title/customizing-title/index.md
index 82a2b46e45..40c98b4891 100644
--- a/static/usage/v7/datetime/title/customizing-title/index.md
+++ b/static/usage/v7/datetime/title/customizing-title/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="large"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/title/customizing-title/demo.html"
 />
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/datetime/title/showing-default-title/angular.md
rename to static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.md
index c0efd60dc1..192f93026b 100644
--- a/static/usage/v7/datetime/title/showing-default-title/index.md
+++ b/static/usage/v7/datetime/title/showing-default-title/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="large"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/datetime/title/showing-default-title/demo.html"
 />
diff --git a/static/usage/v7/fab/basic/angular/example_component_ts.md b/static/usage/v7/fab/basic/angular/example_component_ts.md
index f881c10c61..29c5aeb300 100644
--- a/static/usage/v7/fab/basic/angular/example_component_ts.md
+++ b/static/usage/v7/fab/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/button-sizing/angular/example_component_ts.md b/static/usage/v7/fab/button-sizing/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v7/fab/button-sizing/angular/example_component_ts.md
+++ b/static/usage/v7/fab/button-sizing/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/list-side/angular/example_component_ts.md b/static/usage/v7/fab/list-side/angular/example_component_ts.md
index bc62ad83c7..7a2109d0c2 100644
--- a/static/usage/v7/fab/list-side/angular/example_component_ts.md
+++ b/static/usage/v7/fab/list-side/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/positioning/angular/example_component_ts.md b/static/usage/v7/fab/positioning/angular/example_component_ts.md
index 4fed5b64b8..11dac9f8e3 100644
--- a/static/usage/v7/fab/positioning/angular/example_component_ts.md
+++ b/static/usage/v7/fab/positioning/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonFabList,
+  IonHeader,
+  IonIcon,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import {
@@ -15,6 +25,7 @@ import {
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/safe-area/angular/example_component_ts.md b/static/usage/v7/fab/safe-area/angular/example_component_ts.md
index f881c10c61..29c5aeb300 100644
--- a/static/usage/v7/fab/safe-area/angular/example_component_ts.md
+++ b/static/usage/v7/fab/safe-area/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/theming/colors/angular/example_component_ts.md b/static/usage/v7/fab/theming/colors/angular/example_component_ts.md
index bc62ad83c7..7a2109d0c2 100644
--- a/static/usage/v7/fab/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v7/fab/theming/colors/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md
+++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md
+++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/footer/basic/angular.md b/static/usage/v7/footer/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/footer/basic/angular.md
rename to static/usage/v7/footer/basic/angular/example_component_html.md
diff --git a/static/usage/v7/footer/basic/angular/example_component_ts.md b/static/usage/v7/footer/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v7/footer/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/footer/basic/index.md b/static/usage/v7/footer/basic/index.md
index d9abf47d78..c63e64ffa3 100644
--- a/static/usage/v7/footer/basic/index.md
+++ b/static/usage/v7/footer/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/footer/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/footer/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/index.md b/static/usage/v7/footer/custom-scroll-target/index.md
index df2b8f1021..2701ab1833 100644
--- a/static/usage/v7/footer/custom-scroll-target/index.md
+++ b/static/usage/v7/footer/custom-scroll-target/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/footer/fade/angular.md b/static/usage/v7/footer/fade/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/footer/fade/angular.md
rename to static/usage/v7/footer/fade/angular/example_component_html.md
diff --git a/static/usage/v7/footer/fade/angular/example_component_ts.md b/static/usage/v7/footer/fade/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v7/footer/fade/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/footer/fade/index.md b/static/usage/v7/footer/fade/index.md
index 47248b6f35..b088873b04 100644
--- a/static/usage/v7/footer/fade/index.md
+++ b/static/usage/v7/footer/fade/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/footer/fade/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/footer/no-border/angular.md b/static/usage/v7/footer/no-border/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/footer/no-border/angular.md
rename to static/usage/v7/footer/no-border/angular/example_component_html.md
diff --git a/static/usage/v7/footer/no-border/angular/example_component_ts.md b/static/usage/v7/footer/no-border/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v7/footer/no-border/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/footer/no-border/index.md b/static/usage/v7/footer/no-border/index.md
index 61152f09bf..c255dcf675 100644
--- a/static/usage/v7/footer/no-border/index.md
+++ b/static/usage/v7/footer/no-border/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/footer/no-border/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/footer/translucent/angular.md b/static/usage/v7/footer/translucent/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/footer/translucent/angular.md
rename to static/usage/v7/footer/translucent/angular/example_component_html.md
diff --git a/static/usage/v7/footer/translucent/angular/example_component_ts.md b/static/usage/v7/footer/translucent/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v7/footer/translucent/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/footer/translucent/index.md b/static/usage/v7/footer/translucent/index.md
index 51e731fe97..7dd30a2d21 100644
--- a/static/usage/v7/footer/translucent/index.md
+++ b/static/usage/v7/footer/translucent/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/footer/translucent/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/gestures/basic/angular/example_component_ts.md b/static/usage/v7/gestures/basic/angular/example_component_ts.md
index 33482eca38..609e8ecc41 100644
--- a/static/usage/v7/gestures/basic/angular/example_component_ts.md
+++ b/static/usage/v7/gestures/basic/angular/example_component_ts.md
@@ -1,16 +1,17 @@
 ```ts
 import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
-import type { GestureDetail } from '@ionic/angular';
-import { GestureController, IonCard } from '@ionic/angular';
+import { GestureController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle } from '@ionic/angular/standalone';
+import type { GestureDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
-  @ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
+  @ViewChild('debug', { read: ElementRef }) debug!: ElementRef<HTMLParagraphElement>;
 
   isCardActive = false;
 
diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md
index 0815962155..8c963786c1 100644
--- a/static/usage/v7/gestures/double-click/angular/example_component_ts.md
+++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md
@@ -1,14 +1,15 @@
 ```ts
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { GestureController, IonCard } from '@ionic/angular';
+import { GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild('card', { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild('card', { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
   private currentOffset: number = 0;
   private lastOnStart: number = 0;
diff --git a/static/usage/v7/grid/basic/angular/example_component_ts.md b/static/usage/v7/grid/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.md
index 6945d9ba91..69b6f42c8e 100644
--- a/static/usage/v7/grid/basic/index.md
+++ b/static/usage/v7/grid/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/index.md b/static/usage/v7/grid/customizing/column-number/index.md
index eed737ae21..bad6acd3b7 100644
--- a/static/usage/v7/grid/customizing/column-number/index.md
+++ b/static/usage/v7/grid/customizing/column-number/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md b/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/padding/index.md b/static/usage/v7/grid/customizing/padding/index.md
index ea5280cc8f..48e7f36376 100644
--- a/static/usage/v7/grid/customizing/padding/index.md
+++ b/static/usage/v7/grid/customizing/padding/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_ts.md b/static/usage/v7/grid/customizing/width/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/customizing/width/index.md b/static/usage/v7/grid/customizing/width/index.md
index 99ea8710f8..71390dc2fc 100644
--- a/static/usage/v7/grid/customizing/width/index.md
+++ b/static/usage/v7/grid/customizing/width/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/fixed/angular/example_component_ts.md b/static/usage/v7/grid/fixed/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/fixed/index.md b/static/usage/v7/grid/fixed/index.md
index bede2ed6bc..6479c56219 100644
--- a/static/usage/v7/grid/fixed/index.md
+++ b/static/usage/v7/grid/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/index.md b/static/usage/v7/grid/horizontal-alignment/index.md
index aa44db5ad2..501413e47e 100644
--- a/static/usage/v7/grid/horizontal-alignment/index.md
+++ b/static/usage/v7/grid/horizontal-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md b/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md
index 8ed07e871b..d28812f684 100644
--- a/static/usage/v7/grid/offset-responsive/index.md
+++ b/static/usage/v7/grid/offset-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/offset/angular/example_component_ts.md b/static/usage/v7/grid/offset/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md
index 27a55412d5..5aaabfd4f9 100644
--- a/static/usage/v7/grid/offset/index.md
+++ b/static/usage/v7/grid/offset/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md
index cd608eaae7..d9fb4d8ca0 100644
--- a/static/usage/v7/grid/push-pull-responsive/index.md
+++ b/static/usage/v7/grid/push-pull-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_ts.md b/static/usage/v7/grid/push-pull/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md
index a723dfd08f..b46e98a6f1 100644
--- a/static/usage/v7/grid/push-pull/index.md
+++ b/static/usage/v7/grid/push-pull/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_ts.md b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
new file mode 100644
index 0000000000..875c999aa3
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonInput, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size-auto/index.md b/static/usage/v7/grid/size-auto/index.md
index 2da3611d3b..6e09fc94ee 100644
--- a/static/usage/v7/grid/size-auto/index.md
+++ b/static/usage/v7/grid/size-auto/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_ts.md b/static/usage/v7/grid/size-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size-responsive/index.md b/static/usage/v7/grid/size-responsive/index.md
index 3c46f6ab5d..242c08f591 100644
--- a/static/usage/v7/grid/size-responsive/index.md
+++ b/static/usage/v7/grid/size-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/size/angular/example_component_ts.md b/static/usage/v7/grid/size/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/size/index.md b/static/usage/v7/grid/size/index.md
index 132f75c639..b3b7340b7b 100644
--- a/static/usage/v7/grid/size/index.md
+++ b/static/usage/v7/grid/size/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/index.md b/static/usage/v7/grid/vertical-alignment/index.md
index 74d347e49a..66c0b3c9d4 100644
--- a/static/usage/v7/grid/vertical-alignment/index.md
+++ b/static/usage/v7/grid/vertical-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/header/basic/angular.md b/static/usage/v7/header/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/header/basic/angular.md
rename to static/usage/v7/header/basic/angular/example_component_html.md
diff --git a/static/usage/v7/header/basic/angular/example_component_ts.md b/static/usage/v7/header/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/basic/index.md b/static/usage/v7/header/basic/index.md
index 1058c42ba4..8227e1fcf8 100644
--- a/static/usage/v7/header/basic/index.md
+++ b/static/usage/v7/header/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/header/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/header/condense/angular.md b/static/usage/v7/header/condense/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/header/condense/angular.md
rename to static/usage/v7/header/condense/angular/example_component_html.md
diff --git a/static/usage/v7/header/condense/angular/example_component_ts.md b/static/usage/v7/header/condense/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/condense/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/condense/index.md b/static/usage/v7/header/condense/index.md
index 5ae68be3af..938ce8fa2a 100644
--- a/static/usage/v7/header/condense/index.md
+++ b/static/usage/v7/header/condense/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/header/condense/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md
index cf5ad71dd6..d1e2616d32 100644
--- a/static/usage/v7/header/custom-scroll-target/index.md
+++ b/static/usage/v7/header/custom-scroll-target/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/header/fade/angular.md
rename to static/usage/v7/header/fade/angular/example_component_html.md
diff --git a/static/usage/v7/header/fade/angular/example_component_ts.md b/static/usage/v7/header/fade/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/fade/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md
index 328ba025ad..f14eb2a3dd 100644
--- a/static/usage/v7/header/fade/index.md
+++ b/static/usage/v7/header/fade/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/header/fade/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/header/no-border/angular.md b/static/usage/v7/header/no-border/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/header/no-border/angular.md
rename to static/usage/v7/header/no-border/angular/example_component_html.md
diff --git a/static/usage/v7/header/no-border/angular/example_component_ts.md b/static/usage/v7/header/no-border/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/no-border/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.md
index e7300fb261..642bb451a0 100644
--- a/static/usage/v7/header/no-border/index.md
+++ b/static/usage/v7/header/no-border/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/header/no-border/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/header/translucent/angular.md
rename to static/usage/v7/header/translucent/angular/example_component_html.md
diff --git a/static/usage/v7/header/translucent/angular/example_component_ts.md b/static/usage/v7/header/translucent/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v7/header/translucent/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md
index fe8e8b04a8..e38709c150 100644
--- a/static/usage/v7/header/translucent/index.md
+++ b/static/usage/v7/header/translucent/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/header/translucent/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/icon/basic/angular/example_component_ts.md b/static/usage/v7/icon/basic/angular/example_component_ts.md
index 48b43c838c..b666e57911 100644
--- a/static/usage/v7/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v7/icon/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { logoIonic } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { logoIonic } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/img/basic/angular.md
rename to static/usage/v7/img/basic/angular/example_component_html.md
diff --git a/static/usage/v7/img/basic/angular/example_component_ts.md b/static/usage/v7/img/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..bec3c992a7
--- /dev/null
+++ b/static/usage/v7/img/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonImg } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonImg],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/img/basic/index.md b/static/usage/v7/img/basic/index.md
index 97f57f40ec..1a0e44f7bb 100644
--- a/static/usage/v7/img/basic/index.md
+++ b/static/usage/v7/img/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/img/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/img/basic/demo.html"
+/>
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
index 55469ab3c5..962be4924a 100644
--- a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
index 390ba6b75f..7c35aba213 100644
--- a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
@@ -1,15 +1,24 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  InfiniteScrollCustomEvent,
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev) {
+  onIonInfinite(ev: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      (ev as InfiniteScrollCustomEvent).target.complete();
+      ev.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
index 60c02b86ea..fb41f8761c 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <div class="infinite-scroll-content">
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8..e7a9c133f1 100644
--- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,15 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
index 2e23e35925..d73da98943 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8..e670c8c322 100644
--- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,23 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v7/input/basic/angular.md b/static/usage/v7/input/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/basic/angular.md
rename to static/usage/v7/input/basic/angular/example_component_html.md
diff --git a/static/usage/v7/input/basic/angular/example_component_ts.md b/static/usage/v7/input/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/basic/index.md b/static/usage/v7/input/basic/index.md
index ed54a84366..bd7cb7c7a4 100644
--- a/static/usage/v7/input/basic/index.md
+++ b/static/usage/v7/input/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/basic/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/input/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/input/clear/angular.md b/static/usage/v7/input/clear/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/clear/angular.md
rename to static/usage/v7/input/clear/angular/example_component_html.md
diff --git a/static/usage/v7/input/clear/angular/example_component_ts.md b/static/usage/v7/input/clear/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/clear/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/clear/index.md b/static/usage/v7/input/clear/index.md
index eecea0ba6c..6694366054 100644
--- a/static/usage/v7/input/clear/index.md
+++ b/static/usage/v7/input/clear/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/clear/demo.html" size="250px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/input/clear/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v7/input/counter-alignment/angular.md b/static/usage/v7/input/counter-alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/counter-alignment/angular.md
rename to static/usage/v7/input/counter-alignment/angular/example_component_html.md
diff --git a/static/usage/v7/input/counter-alignment/angular/example_component_ts.md b/static/usage/v7/input/counter-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/counter-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/counter-alignment/index.md b/static/usage/v7/input/counter-alignment/index.md
index c590c8a24c..f6e28f7b89 100644
--- a/static/usage/v7/input/counter-alignment/index.md
+++ b/static/usage/v7/input/counter-alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/input/counter-alignment/demo.html"
 />
diff --git a/static/usage/v7/input/counter/angular/example_component_ts.md b/static/usage/v7/input/counter/angular/example_component_ts.md
index 2c08dc06fc..2392e6cd2d 100644
--- a/static/usage/v7/input/counter/angular/example_component_ts.md
+++ b/static/usage/v7/input/counter/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/fill/angular.md
rename to static/usage/v7/input/fill/angular/example_component_html.md
diff --git a/static/usage/v7/input/fill/angular/example_component_ts.md b/static/usage/v7/input/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v7/input/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md
index 7a702b37d0..044fa65dca 100644
--- a/static/usage/v7/input/fill/index.md
+++ b/static/usage/v7/input/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/input/fill/demo.html"
   size="250px"
   mode="md"
diff --git a/static/usage/v7/input/filtering/angular/example_component_ts.md b/static/usage/v7/input/filtering/angular/example_component_ts.md
index b0fc6a3331..19554af7c4 100644
--- a/static/usage/v7/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v7/input/filtering/angular/example_component_ts.md
@@ -1,21 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import type { IonInput } from '@ionic/angular';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
 })
 export class ExampleComponent {
   inputModel = '';
 
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
 
-  onInput(ev) {
-    const value = ev.target!.value;
+  onInput(ev: CustomEvent) {
+    const value = (ev.target as HTMLIonInputElement).value ?? '';
 
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+    const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');
 
     /**
      * Update both the state variable and
diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/helper-error/angular.md
rename to static/usage/v7/input/helper-error/angular/example_component_html.md
diff --git a/static/usage/v7/input/helper-error/angular/example_component_ts.md b/static/usage/v7/input/helper-error/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v7/input/helper-error/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/helper-error/index.md b/static/usage/v7/input/helper-error/index.md
index 03393f19b2..62daa30938 100644
--- a/static/usage/v7/input/helper-error/index.md
+++ b/static/usage/v7/input/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/input/helper-error/demo.html"
   size="150px"
diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/label-placement/angular.md
rename to static/usage/v7/input/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/input/label-placement/angular/example_component_ts.md b/static/usage/v7/input/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/label-placement/index.md b/static/usage/v7/input/label-placement/index.md
index a3f377c079..a643727606 100644
--- a/static/usage/v7/input/label-placement/index.md
+++ b/static/usage/v7/input/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/input/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/input/label-slot/angular.md b/static/usage/v7/input/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/label-slot/angular.md
rename to static/usage/v7/input/label-slot/angular/example_component_html.md
diff --git a/static/usage/v7/input/label-slot/angular/example_component_ts.md b/static/usage/v7/input/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..39bae8be84
--- /dev/null
+++ b/static/usage/v7/input/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.md
index 5161508076..74fa89cb4f 100644
--- a/static/usage/v7/input/label-slot/index.md
+++ b/static/usage/v7/input/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/input/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/input/mask/angular/app_module_ts.md b/static/usage/v7/input/mask/angular/app_module_ts.md
deleted file mode 100644
index 7eb78206d7..0000000000
--- a/static/usage/v7/input/mask/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 { MaskitoDirective } from '@maskito/angular';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, MaskitoDirective, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md
index c7f0c89801..a118f6faa7 100644
--- a/static/usage/v7/input/mask/angular/example_component_ts.md
+++ b/static/usage/v7/input/mask/angular/example_component_ts.md
@@ -1,11 +1,16 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
+import { MaskitoDirective } from '@maskito/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective],
 })
 export class ExampleComponent {
   readonly phoneMask: MaskitoOptions = {
diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md
index 68e8194ca7..30609f6f16 100644
--- a/static/usage/v7/input/mask/index.md
+++ b/static/usage/v7/input/mask/index.md
@@ -7,7 +7,6 @@ import react_main_tsx from './react.md';
 
 import vue_example_vue from './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';
 
@@ -43,7 +42,6 @@ import angular_example_component_ts from './angular/example_component_ts.md';
     },
     angular: {
       files: {
-        'src/app/app.module.ts': angular_app_module_ts,
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
diff --git a/static/usage/v7/input/no-visible-label/angular.md b/static/usage/v7/input/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/no-visible-label/angular.md
rename to static/usage/v7/input/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v7/input/no-visible-label/angular/example_component_ts.md b/static/usage/v7/input/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.md
index 715c46e475..930cb9b462 100644
--- a/static/usage/v7/input/no-visible-label/index.md
+++ b/static/usage/v7/input/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/input/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/input/set-focus/angular.md b/static/usage/v7/input/set-focus/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/set-focus/angular.md
rename to static/usage/v7/input/set-focus/angular/example_component_html.md
diff --git a/static/usage/v7/input/set-focus/angular/example_component_ts.md b/static/usage/v7/input/set-focus/angular/example_component_ts.md
new file mode 100644
index 0000000000..f950296880
--- /dev/null
+++ b/static/usage/v7/input/set-focus/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/set-focus/index.md b/static/usage/v7/input/set-focus/index.md
index 4728673f04..6d06e405f1 100644
--- a/static/usage/v7/input/set-focus/index.md
+++ b/static/usage/v7/input/set-focus/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import vue from './vue.md';
 import react from './react.md';
 
@@ -9,9 +11,14 @@ import react from './react.md';
   version="7"
   code={{
     javascript,
-    vue,
-    angular,
     react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/input/set-focus/demo.html"
 />
diff --git a/static/usage/v7/input/start-end-slots/angular/example_component_ts.md b/static/usage/v7/input/start-end-slots/angular/example_component_ts.md
index 899f7a826a..2a33933595 100644
--- a/static/usage/v7/input/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v7/input/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonInput, IonItem, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/input/theming/colors/angular.md b/static/usage/v7/input/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/theming/colors/angular.md
rename to static/usage/v7/input/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/input/theming/colors/angular/example_component_ts.md b/static/usage/v7/input/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md
index 17c29f994c..84623a174b 100644
--- a/static/usage/v7/input/theming/colors/index.md
+++ b/static/usage/v7/input/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/input/theming/colors/demo.html"
   size="200px"
 />
diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/input/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md
index b87bfe5194..5861fbac21 100644
--- a/static/usage/v7/input/theming/css-properties/index.md
+++ b/static/usage/v7/input/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -26,6 +27,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/input/types/angular.md b/static/usage/v7/input/types/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/input/types/angular.md
rename to static/usage/v7/input/types/angular/example_component_html.md
diff --git a/static/usage/v7/input/types/angular/example_component_ts.md b/static/usage/v7/input/types/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/input/types/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/input/types/index.md b/static/usage/v7/input/types/index.md
index 7640d15d59..b75df8759b 100644
--- a/static/usage/v7/input/types/index.md
+++ b/static/usage/v7/input/types/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/input/types/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/input/types/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-divider/basic/angular.md
rename to static/usage/v7/item-divider/basic/angular/example_component_html.md
diff --git a/static/usage/v7/item-divider/basic/angular/example_component_ts.md b/static/usage/v7/item-divider/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..1d2ea0f0db
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md
index 9c8a9e292b..1415cd6805 100644
--- a/static/usage/v7/item-divider/basic/index.md
+++ b/static/usage/v7/item-divider/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item-divider/basic/demo.html"
   size="medium"
 />
diff --git a/static/usage/v7/item-divider/theming/colors/angular.md b/static/usage/v7/item-divider/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-divider/theming/colors/angular.md
rename to static/usage/v7/item-divider/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..11c0c268eb
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md
index a728b84c5d..0e3629f0d4 100644
--- a/static/usage/v7/item-divider/theming/colors/index.md
+++ b/static/usage/v7/item-divider/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item-divider/theming/colors/demo.html"
   size="medium"
 />
diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..11c0c268eb
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md
index f425706d75..7ee7eda8a5 100644
--- a/static/usage/v7/item-divider/theming/css-properties/index.md
+++ b/static/usage/v7/item-divider/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/item-group/basic/angular.md b/static/usage/v7/item-group/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-group/basic/angular.md
rename to static/usage/v7/item-group/basic/angular/example_component_html.md
diff --git a/static/usage/v7/item-group/basic/angular/example_component_ts.md b/static/usage/v7/item-group/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..90f7723d62
--- /dev/null
+++ b/static/usage/v7/item-group/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.md
index a752ec6227..648471b0f7 100644
--- a/static/usage/v7/item-group/basic/index.md
+++ b/static/usage/v7/item-group/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item-group/basic/demo.html"
   size="medium"
 />
diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-group/sliding-items/angular.md
rename to static/usage/v7/item-group/sliding-items/angular/example_component_html.md
diff --git a/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md
new file mode 100644
index 0000000000..5c823eabc6
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonItem,
+  IonItemDivider,
+  IonItemGroup,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md
index 39983e2a9b..1c23e3b9e2 100644
--- a/static/usage/v7/item-group/sliding-items/index.md
+++ b/static/usage/v7/item-group/sliding-items/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item-group/sliding-items/demo.html"
   size="medium"
 />
diff --git a/static/usage/v7/item-sliding/basic/angular.md b/static/usage/v7/item-sliding/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-sliding/basic/angular.md
rename to static/usage/v7/item-sliding/basic/angular/example_component_html.md
diff --git a/static/usage/v7/item-sliding/basic/angular/example_component_ts.md b/static/usage/v7/item-sliding/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..e06ea993f9
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-sliding/basic/index.md b/static/usage/v7/item-sliding/basic/index.md
index a75eff57b6..5f2438a5d2 100644
--- a/static/usage/v7/item-sliding/basic/index.md
+++ b/static/usage/v7/item-sliding/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item-sliding/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item-sliding/basic/demo.html"
+/>
diff --git a/static/usage/v7/item-sliding/expandable/angular.md b/static/usage/v7/item-sliding/expandable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item-sliding/expandable/angular.md
rename to static/usage/v7/item-sliding/expandable/angular/example_component_html.md
diff --git a/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md
new file mode 100644
index 0000000000..e06ea993f9
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item-sliding/expandable/index.md b/static/usage/v7/item-sliding/expandable/index.md
index f794264ce0..3920ea07be 100644
--- a/static/usage/v7/item-sliding/expandable/index.md
+++ b/static/usage/v7/item-sliding/expandable/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item-sliding/expandable/demo.html"
   size="100px"
 />
diff --git a/static/usage/v7/item-sliding/icons/angular/example_component_ts.md b/static/usage/v7/item-sliding/icons/angular/example_component_ts.md
index 5f32e92459..a3169b9226 100644
--- a/static/usage/v7/item-sliding/icons/angular/example_component_ts.md
+++ b/static/usage/v7/item-sliding/icons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { archive, heart, trash } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { archive, heart, trash } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/basic/angular.md
rename to static/usage/v7/item/basic/angular/example_component_html.md
diff --git a/static/usage/v7/item/basic/angular/example_component_ts.md b/static/usage/v7/item/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/basic/index.md b/static/usage/v7/item/basic/index.md
index f5c330d7b4..095abe32ac 100644
--- a/static/usage/v7/item/basic/index.md
+++ b/static/usage/v7/item/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/basic/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/item/buttons/angular/example_component_ts.md b/static/usage/v7/item/buttons/angular/example_component_ts.md
index 5f8f10b788..6d056d6d71 100644
--- a/static/usage/v7/item/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/item/buttons/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { home, navigate, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { home, navigate, star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/clickable/angular.md b/static/usage/v7/item/clickable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/clickable/angular.md
rename to static/usage/v7/item/clickable/angular/example_component_html.md
diff --git a/static/usage/v7/item/clickable/angular/example_component_ts.md b/static/usage/v7/item/clickable/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/clickable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/clickable/index.md b/static/usage/v7/item/clickable/index.md
index 11fe249d0c..16fb201599 100644
--- a/static/usage/v7/item/clickable/index.md
+++ b/static/usage/v7/item/clickable/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/clickable/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item/clickable/demo.html"
+/>
diff --git a/static/usage/v7/item/content-types/actions/angular/example_component_ts.md b/static/usage/v7/item/content-types/actions/angular/example_component_ts.md
index 019d31f99f..5944353da3 100644
--- a/static/usage/v7/item/content-types/actions/angular/example_component_ts.md
+++ b/static/usage/v7/item/content-types/actions/angular/example_component_ts.md
@@ -1,5 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pin, share, trash } from 'ionicons/icons';
@@ -8,6 +22,20 @@ import { pin, share, trash } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonItemOption,
+    IonItemOptions,
+    IonItemSliding,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/content-types/controls/angular.md b/static/usage/v7/item/content-types/controls/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/content-types/controls/angular.md
rename to static/usage/v7/item/content-types/controls/angular/example_component_html.md
diff --git a/static/usage/v7/item/content-types/controls/angular/example_component_ts.md b/static/usage/v7/item/content-types/controls/angular/example_component_ts.md
new file mode 100644
index 0000000000..18cbb2e592
--- /dev/null
+++ b/static/usage/v7/item/content-types/controls/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/content-types/controls/index.md b/static/usage/v7/item/content-types/controls/index.md
index 8c878934a0..22248a9414 100644
--- a/static/usage/v7/item/content-types/controls/index.md
+++ b/static/usage/v7/item/content-types/controls/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/item/content-types/controls/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v7/item/content-types/metadata/angular/example_component_ts.md b/static/usage/v7/item/content-types/metadata/angular/example_component_ts.md
index d17dd7f8e8..503048117c 100644
--- a/static/usage/v7/item/content-types/metadata/angular/example_component_ts.md
+++ b/static/usage/v7/item/content-types/metadata/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { chevronForward, listCircle } from 'ionicons/icons';
@@ -8,6 +20,7 @@ import { chevronForward, listCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonText, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/content-types/supporting-visuals/angular/example_component_ts.md b/static/usage/v7/item/content-types/supporting-visuals/angular/example_component_ts.md
index b31c839589..058c733eb2 100644
--- a/static/usage/v7/item/content-types/supporting-visuals/angular/example_component_ts.md
+++ b/static/usage/v7/item/content-types/supporting-visuals/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAvatar, IonIcon, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonIcon, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/content-types/text/angular/example_component_ts.md b/static/usage/v7/item/content-types/text/angular/example_component_ts.md
new file mode 100644
index 0000000000..7927993348
--- /dev/null
+++ b/static/usage/v7/item/content-types/text/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonTextarea,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonTextarea,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/content-types/text/index.md b/static/usage/v7/item/content-types/text/index.md
index fad22f71dd..6c0eda6453 100644
--- a/static/usage/v7/item/content-types/text/index.md
+++ b/static/usage/v7/item/content-types/text/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/item/detail-arrows/angular.md b/static/usage/v7/item/detail-arrows/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/detail-arrows/angular.md
rename to static/usage/v7/item/detail-arrows/angular/example_component_html.md
diff --git a/static/usage/v7/item/detail-arrows/angular/example_component_ts.md b/static/usage/v7/item/detail-arrows/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/detail-arrows/index.md b/static/usage/v7/item/detail-arrows/index.md
index 37b9b495dc..c2bab578c4 100644
--- a/static/usage/v7/item/detail-arrows/index.md
+++ b/static/usage/v7/item/detail-arrows/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item/detail-arrows/demo.html"
   size="350px"
 />
diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/inputs/angular.md
rename to static/usage/v7/item/inputs/angular/example_component_html.md
diff --git a/static/usage/v7/item/inputs/angular/example_component_ts.md b/static/usage/v7/item/inputs/angular/example_component_ts.md
new file mode 100644
index 0000000000..e42eafb824
--- /dev/null
+++ b/static/usage/v7/item/inputs/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCheckbox,
+  IonInput,
+  IonItem,
+  IonRange,
+  IonSelect,
+  IonSelectOption,
+  IonToggle,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md
index 1925824c43..6e81dc877a 100644
--- a/static/usage/v7/item/inputs/index.md
+++ b/static/usage/v7/item/inputs/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/inputs/demo.html" size="large" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item/inputs/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v7/item/lines/angular/example_component_ts.md b/static/usage/v7/item/lines/angular/example_component_ts.md
index 3122a1f730..06597ba96c 100644
--- a/static/usage/v7/item/lines/angular/example_component_ts.md
+++ b/static/usage/v7/item/lines/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { informationCircle, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { informationCircle, star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/item/media/angular.md b/static/usage/v7/item/media/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/media/angular.md
rename to static/usage/v7/item/media/angular/example_component_html.md
diff --git a/static/usage/v7/item/media/angular/example_component_ts.md b/static/usage/v7/item/media/angular/example_component_ts.md
new file mode 100644
index 0000000000..d8cb142b8f
--- /dev/null
+++ b/static/usage/v7/item/media/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/media/index.md b/static/usage/v7/item/media/index.md
index c8c7d6e309..a073a87227 100644
--- a/static/usage/v7/item/media/index.md
+++ b/static/usage/v7/item/media/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/media/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/item/media/demo.html"
+/>
diff --git a/static/usage/v7/item/theming/colors/angular.md b/static/usage/v7/item/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/item/theming/colors/angular.md
rename to static/usage/v7/item/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/item/theming/colors/angular/example_component_ts.md b/static/usage/v7/item/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md
index 9973f9daa3..ff8d9aa25c 100644
--- a/static/usage/v7/item/theming/colors/index.md
+++ b/static/usage/v7/item/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/item/theming/colors/demo.html"
   size="500px"
 />
diff --git a/static/usage/v7/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/item/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md
index f3d49f6332..bbd5334bd9 100644
--- a/static/usage/v7/item/theming/css-properties/index.md
+++ b/static/usage/v7/item/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.md
index 10f1bfc6ba..01adcac950 100644
--- a/static/usage/v7/item/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/item/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_ts.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md
index 4782bfdd6a..ac81dab16d 100644
--- a/static/usage/v7/item/theming/input-highlight/index.md
+++ b/static/usage/v7/item/theming/input-highlight/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/keyboard/enterkeyhint/angular.md b/static/usage/v7/keyboard/enterkeyhint/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/keyboard/enterkeyhint/angular.md
rename to static/usage/v7/keyboard/enterkeyhint/angular/example_component_html.md
diff --git a/static/usage/v7/keyboard/enterkeyhint/angular/example_component_ts.md b/static/usage/v7/keyboard/enterkeyhint/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/keyboard/enterkeyhint/index.md b/static/usage/v7/keyboard/enterkeyhint/index.md
index eeadc6869c..f7944a4c66 100644
--- a/static/usage/v7/keyboard/enterkeyhint/index.md
+++ b/static/usage/v7/keyboard/enterkeyhint/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/keyboard/enterkeyhint/demo.html"
 />
diff --git a/static/usage/v7/keyboard/inputmode/angular.md b/static/usage/v7/keyboard/inputmode/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/keyboard/inputmode/angular.md
rename to static/usage/v7/keyboard/inputmode/angular/example_component_html.md
diff --git a/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/keyboard/inputmode/index.md b/static/usage/v7/keyboard/inputmode/index.md
index 44379c3901..b52747c514 100644
--- a/static/usage/v7/keyboard/inputmode/index.md
+++ b/static/usage/v7/keyboard/inputmode/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/keyboard/inputmode/demo.html"
 />
diff --git a/static/usage/v7/label/basic/angular.md b/static/usage/v7/label/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/label/basic/angular.md
rename to static/usage/v7/label/basic/angular/example_component_html.md
diff --git a/static/usage/v7/label/basic/angular/example_component_ts.md b/static/usage/v7/label/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5a7fdcebe2
--- /dev/null
+++ b/static/usage/v7/label/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/label/basic/index.md b/static/usage/v7/label/basic/index.md
index b9365587f5..fd1b9312fd 100644
--- a/static/usage/v7/label/basic/index.md
+++ b/static/usage/v7/label/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/label/basic/demo.html"
+/>
diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/label/input/angular.md
rename to static/usage/v7/label/input/angular/example_component_html.md
diff --git a/static/usage/v7/label/input/angular/example_component_ts.md b/static/usage/v7/label/input/angular/example_component_ts.md
new file mode 100644
index 0000000000..88e481153b
--- /dev/null
+++ b/static/usage/v7/label/input/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md
index a1e95d3ab9..72d429fd52 100644
--- a/static/usage/v7/label/input/index.md
+++ b/static/usage/v7/label/input/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/input/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/label/input/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/label/item/angular.md b/static/usage/v7/label/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/label/item/angular.md
rename to static/usage/v7/label/item/angular/example_component_html.md
diff --git a/static/usage/v7/label/item/angular/example_component_ts.md b/static/usage/v7/label/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v7/label/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/label/item/index.md b/static/usage/v7/label/item/index.md
index 2c712e8218..4cdbf40692 100644
--- a/static/usage/v7/label/item/index.md
+++ b/static/usage/v7/label/item/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/item/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/label/item/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/label/theming/colors/angular.md b/static/usage/v7/label/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/label/theming/colors/angular.md
rename to static/usage/v7/label/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/label/theming/colors/angular/example_component_ts.md b/static/usage/v7/label/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..5a7fdcebe2
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/label/theming/colors/index.md b/static/usage/v7/label/theming/colors/index.md
index 45363df63a..9abf731610 100644
--- a/static/usage/v7/label/theming/colors/index.md
+++ b/static/usage/v7/label/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/label/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md
index 4e45ccc667..d5a2831627 100644
--- a/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md
+++ b/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { create } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonFooter,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/list-header/basic/angular.md b/static/usage/v7/list-header/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list-header/basic/angular.md
rename to static/usage/v7/list-header/basic/angular/example_component_html.md
diff --git a/static/usage/v7/list-header/basic/angular/example_component_ts.md b/static/usage/v7/list-header/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd5f0b5005
--- /dev/null
+++ b/static/usage/v7/list-header/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md
index 79b5b31a75..771693f735 100644
--- a/static/usage/v7/list-header/basic/index.md
+++ b/static/usage/v7/list-header/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/list-header/basic/demo.html"
   size="325px"
 />
diff --git a/static/usage/v7/list-header/buttons/angular.md b/static/usage/v7/list-header/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list-header/buttons/angular.md
rename to static/usage/v7/list-header/buttons/angular/example_component_html.md
diff --git a/static/usage/v7/list-header/buttons/angular/example_component_ts.md b/static/usage/v7/list-header/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..a608c44a22
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md
index 5c724b1a8f..c4668f07f0 100644
--- a/static/usage/v7/list-header/buttons/index.md
+++ b/static/usage/v7/list-header/buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/list-header/buttons/demo.html"
   size="325px"
 />
diff --git a/static/usage/v7/list-header/lines/angular.md b/static/usage/v7/list-header/lines/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list-header/lines/angular.md
rename to static/usage/v7/list-header/lines/angular/example_component_html.md
diff --git a/static/usage/v7/list-header/lines/angular/example_component_ts.md b/static/usage/v7/list-header/lines/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd5f0b5005
--- /dev/null
+++ b/static/usage/v7/list-header/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md
index a8e84eddf7..1ec366f734 100644
--- a/static/usage/v7/list-header/lines/index.md
+++ b/static/usage/v7/list-header/lines/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/list-header/lines/demo.html"
   size="500px"
 />
diff --git a/static/usage/v7/list-header/theming/colors/angular.md b/static/usage/v7/list-header/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list-header/theming/colors/angular.md
rename to static/usage/v7/list-header/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..3a455a0c90
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md
index 13af9007f8..2a04d1f6ae 100644
--- a/static/usage/v7/list-header/theming/colors/index.md
+++ b/static/usage/v7/list-header/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/list-header/theming/colors/demo.html"
   size="650px"
 />
diff --git a/static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..3a455a0c90
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md
index e273cdb2b9..e5ec0bbf4c 100644
--- a/static/usage/v7/list-header/theming/css-properties/index.md
+++ b/static/usage/v7/list-header/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/list/basic/angular.md b/static/usage/v7/list/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list/basic/angular.md
rename to static/usage/v7/list/basic/angular/example_component_html.md
diff --git a/static/usage/v7/list/basic/angular/example_component_ts.md b/static/usage/v7/list/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef7c74f5d4
--- /dev/null
+++ b/static/usage/v7/list/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list/basic/index.md b/static/usage/v7/list/basic/index.md
index 7569f140fb..a7faa873bc 100644
--- a/static/usage/v7/list/basic/index.md
+++ b/static/usage/v7/list/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/basic/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/list/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/list/inset/angular.md b/static/usage/v7/list/inset/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list/inset/angular.md
rename to static/usage/v7/list/inset/angular/example_component_html.md
diff --git a/static/usage/v7/list/inset/angular/example_component_ts.md b/static/usage/v7/list/inset/angular/example_component_ts.md
new file mode 100644
index 0000000000..0ebeec81ff
--- /dev/null
+++ b/static/usage/v7/list/inset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
index db7339d24e..5ecc37224d 100644
--- a/static/usage/v7/list/inset/index.md
+++ b/static/usage/v7/list/inset/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/list/inset/demo.html"
   size="350px"
   includeIonContent={false}
diff --git a/static/usage/v7/list/lines/angular.md b/static/usage/v7/list/lines/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/list/lines/angular.md
rename to static/usage/v7/list/lines/angular/example_component_html.md
diff --git a/static/usage/v7/list/lines/angular/example_component_ts.md b/static/usage/v7/list/lines/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef7c74f5d4
--- /dev/null
+++ b/static/usage/v7/list/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/list/lines/index.md b/static/usage/v7/list/lines/index.md
index bbf9d599cc..efdf12cfdc 100644
--- a/static/usage/v7/list/lines/index.md
+++ b/static/usage/v7/list/lines/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/lines/demo.html" size="500px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/list/lines/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v7/loading/controller/angular/example_component_ts.md b/static/usage/v7/loading/controller/angular/example_component_ts.md
index bd4b86eef2..cec468c627 100644
--- a/static/usage/v7/loading/controller/angular/example_component_ts.md
+++ b/static/usage/v7/loading/controller/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { LoadingController } from '@ionic/angular';
+import { IonButton, LoadingController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v7/loading/inline/angular.md b/static/usage/v7/loading/inline/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/loading/inline/angular.md
rename to static/usage/v7/loading/inline/angular/example_component_html.md
diff --git a/static/usage/v7/loading/inline/angular/example_component_ts.md b/static/usage/v7/loading/inline/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v7/loading/inline/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md
index e4038ad027..25ef6e6463 100644
--- a/static/usage/v7/loading/inline/index.md
+++ b/static/usage/v7/loading/inline/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/loading/inline/demo.html"
 />
diff --git a/static/usage/v7/loading/spinners/angular.md b/static/usage/v7/loading/spinners/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/loading/spinners/angular.md
rename to static/usage/v7/loading/spinners/angular/example_component_html.md
diff --git a/static/usage/v7/loading/spinners/angular/example_component_ts.md b/static/usage/v7/loading/spinners/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v7/loading/spinners/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md
index c9aa963a5f..99b1adcad2 100644
--- a/static/usage/v7/loading/spinners/index.md
+++ b/static/usage/v7/loading/spinners/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -11,7 +13,12 @@ import vue from './vue.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/loading/spinners/demo.html"
 />
diff --git a/static/usage/v7/loading/theming/angular/example_component_ts.md b/static/usage/v7/loading/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md
index f0a5a37959..0a36d4cd6e 100644
--- a/static/usage/v7/loading/theming/index.md
+++ b/static/usage/v7/loading/theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/menu/basic/angular.md
rename to static/usage/v7/menu/basic/angular/example_component_html.md
diff --git a/static/usage/v7/menu/basic/angular/example_component_ts.md b/static/usage/v7/menu/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a72338d19
--- /dev/null
+++ b/static/usage/v7/menu/basic/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.md
index e682c266d6..90ae32ef96 100644
--- a/static/usage/v7/menu/basic/index.md
+++ b/static/usage/v7/menu/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/menu/basic/demo.html"
   devicePreview
diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md
index 3c4f3f1fbb..b52e182b29 100644
--- a/static/usage/v7/menu/multiple/angular/example_component_ts.md
+++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md
@@ -1,10 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-import { MenuController } from '@ionic/angular';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonTitle,
+  IonToolbar,
+  MenuController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor(private menuCtrl: MenuController) {}
diff --git a/static/usage/v7/menu/sides/angular.md b/static/usage/v7/menu/sides/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/menu/sides/angular.md
rename to static/usage/v7/menu/sides/angular/example_component_html.md
diff --git a/static/usage/v7/menu/sides/angular/example_component_ts.md b/static/usage/v7/menu/sides/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a72338d19
--- /dev/null
+++ b/static/usage/v7/menu/sides/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/menu/sides/index.md b/static/usage/v7/menu/sides/index.md
index f62678655f..3c96349a6a 100644
--- a/static/usage/v7/menu/sides/index.md
+++ b/static/usage/v7/menu/sides/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/menu/sides/demo.html"
   devicePreview
diff --git a/static/usage/v7/menu/theming/angular/example_component_ts.md b/static/usage/v7/menu/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..44a5ab0fab
--- /dev/null
+++ b/static/usage/v7/menu/theming/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonApp,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonApp, IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.md
index 83a016b19b..cc7d62d867 100644
--- a/static/usage/v7/menu/theming/index.md
+++ b/static/usage/v7/menu/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/menu/toggle/angular.md b/static/usage/v7/menu/toggle/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/menu/toggle/angular.md
rename to static/usage/v7/menu/toggle/angular/example_component_html.md
diff --git a/static/usage/v7/menu/toggle/angular/example_component_ts.md b/static/usage/v7/menu/toggle/angular/example_component_ts.md
new file mode 100644
index 0000000000..f1cb627698
--- /dev/null
+++ b/static/usage/v7/menu/toggle/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.md
index df6df9fccb..3e85047b9b 100644
--- a/static/usage/v7/menu/toggle/index.md
+++ b/static/usage/v7/menu/toggle/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/menu/toggle/demo.html"
   devicePreview
diff --git a/static/usage/v7/menu/type/angular/example_component_ts.md b/static/usage/v7/menu/type/angular/example_component_ts.md
index 5f03ec13b7..1c304dad52 100644
--- a/static/usage/v7/menu/type/angular/example_component_ts.md
+++ b/static/usage/v7/menu/type/angular/example_component_ts.md
@@ -1,9 +1,36 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonMenu,
+  IonMenuToggle,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonMenu,
+    IonMenuToggle,
+    IonRadio,
+    IonRadioGroup,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   menuType: string = 'overlay';
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
index b13c147dc2..eeb7aa9fce 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -1,15 +1,28 @@
 ```ts
 import { Component } from '@angular/core';
-import { CheckboxCustomEvent } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   canDismiss = false;
 
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');
diff --git a/static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md b/static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md
deleted file mode 100644
index b273d851f9..0000000000
--- a/static/usage/v7/modal/can-dismiss/child-state/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 { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-import { ChildComponent } from './child.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, ChildComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md b/static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md
index 420359602a..7c1f7d610a 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md
@@ -1,20 +1,33 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
-import { CheckboxCustomEvent, IonModal } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonModal,
+  IonNote,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-child',
   templateUrl: 'child.component.html',
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonNote, IonToolbar, IonTitle],
 })
 export class ChildComponent {
   @Input() modal!: IonModal;
 
   @Output() dismissChange = new EventEmitter<boolean>();
 
-  checkboxChanged(event: any) {
-    const ev = event as CheckboxCustomEvent;
-    const checked = ev.detail.checked;
+  checkboxChanged(event: CheckboxCustomEvent) {
+    const checked = event.detail.checked;
 
     this.dismissChange.emit(checked);
   }
diff --git a/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md
index 19544ec574..1f1f3fd5e5 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md
@@ -1,14 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  ActionSheetController,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
+import { ChildComponent } from './child.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
diff --git a/static/usage/v7/modal/can-dismiss/child-state/index.md b/static/usage/v7/modal/can-dismiss/child-state/index.md
index d213d28366..d77ccf9032 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/index.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/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_child_component_html from './angular/child_component_html.md';
 import angular_child_component_ts from './angular/child_component_ts.md';
-import angular_app_module_ts from './angular/app_module_ts.md';
 
 <Playground
   version="7"
@@ -33,7 +32,6 @@ import angular_app_module_ts from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/child.component.html': angular_child_component_html,
         'src/app/child.component.ts': angular_child_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
   }}
diff --git a/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
index a62465cfee..35aace1d20 100644
--- a/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
@@ -1,14 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ActionSheetController } from '@ionic/angular';
+import {
+  ActionSheetController,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   constructor(private actionSheetCtrl: ActionSheetController) {}
 
diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 788b9a14c0..5cf4b754bf 100644
--- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,12 +1,23 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  async canDismiss(data?: any, role?: string) {
+  async canDismiss(data?: undefined, role?: string) {
     return role !== 'gesture';
   }
 }
diff --git a/static/usage/v7/modal/card/basic/angular/example_component_ts.md b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
index 5a28a156a3..1dad2a6af9 100644
--- a/static/usage/v7/modal/card/basic/angular/example_component_ts.md
+++ b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');
diff --git a/static/usage/v7/modal/controller/angular/app_module_ts.md b/static/usage/v7/modal/controller/angular/app_module_ts.md
deleted file mode 100644
index e9e4f00dff..0000000000
--- a/static/usage/v7/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/v7/modal/controller/angular/example_component_ts.md b/static/usage/v7/modal/controller/angular/example_component_ts.md
index 920a233525..8f8c0acde9 100644
--- a/static/usage/v7/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v7/modal/controller/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
 
-import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [FormsModule, IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';
diff --git a/static/usage/v7/modal/controller/angular/modal-example_component_ts.md b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
index 621996015b..e82dcffc02 100644
--- a/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
@@ -1,14 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { ModalController } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: 'modal-example.component.html',
+  imports: [FormsModule, IonButton, IonButtons, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
 })
 export class ModalExampleComponent {
-  name: string;
+  name!: string;
 
   constructor(private modalCtrl: ModalController) {}
 
diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md
index 750bbe53ef..8c864ebf73 100644
--- a/static/usage/v7/modal/controller/index.md
+++ b/static/usage/v7/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/v7/modal/custom-dialogs/angular/example_component_ts.md b/static/usage/v7/modal/custom-dialogs/angular/example_component_ts.md
index 387bce9547..9c60713564 100644
--- a/static/usage/v7/modal/custom-dialogs/angular/example_component_ts.md
+++ b/static/usage/v7/modal/custom-dialogs/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle } from 'ionicons/icons';
@@ -8,6 +20,7 @@ import { personCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
index a21954ec5f..ab087edaad 100644
--- a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
@@ -1,17 +1,41 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonInput,
+    IonItem,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
-  @ViewChild(IonModal) modal: IonModal;
+  @ViewChild(IonModal) modal!: IonModal;
 
   message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
-  name: string;
+  name!: string;
 
   cancel() {
     this.modal.dismiss(null, 'cancel');
diff --git a/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
index 321577939a..7e324c0446 100644
--- a/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/modal/performance/mount/angular.md
rename to static/usage/v7/modal/performance/mount/angular/example_component_html.md
diff --git a/static/usage/v7/modal/performance/mount/angular/example_component_ts.md b/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
new file mode 100644
index 0000000000..834c04ea00
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.md
index 16018d4123..baa65b7b7a 100644
--- a/static/usage/v7/modal/performance/mount/index.md
+++ b/static/usage/v7/modal/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/modal/performance/mount/demo.html"
   devicePreview
diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_ts.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_ts.md
new file mode 100644
index 0000000000..60d2613a19
--- /dev/null
+++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.md
index 35cec0645c..58e0637004 100644
--- a/static/usage/v7/modal/sheet/auto-height/index.md
+++ b/static/usage/v7/modal/sheet/auto-height/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -24,6 +25,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
index e132d2f84c..1b0d5bfcb8 100644
--- a/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_ts.md
@@ -1,10 +1,38 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   count = 0;
diff --git a/static/usage/v7/modal/sheet/basic/angular.md b/static/usage/v7/modal/sheet/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/modal/sheet/basic/angular.md
rename to static/usage/v7/modal/sheet/basic/angular/example_component_html.md
diff --git a/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md b/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a7209d892
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/modal/sheet/basic/index.md b/static/usage/v7/modal/sheet/basic/index.md
index 837a75b049..9e67d2a290 100644
--- a/static/usage/v7/modal/sheet/basic/index.md
+++ b/static/usage/v7/modal/sheet/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/modal/sheet/basic/demo.html"
   devicePreview
diff --git a/static/usage/v7/modal/sheet/handle-behavior/angular.md b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/modal/sheet/handle-behavior/angular.md
rename to static/usage/v7/modal/sheet/handle-behavior/angular/example_component_html.md
diff --git a/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md
new file mode 100644
index 0000000000..ee03f01adc
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/index.md b/static/usage/v7/modal/sheet/handle-behavior/index.md
index 11ed9f0449..8592cc686f 100644
--- a/static/usage/v7/modal/sheet/handle-behavior/index.md
+++ b/static/usage/v7/modal/sheet/handle-behavior/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/modal/sheet/handle-behavior/demo.html"
   devicePreview
diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
index c4a743b274..3adcfbfb56 100644
--- a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
+++ b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
@@ -1,10 +1,39 @@
 ```ts
 import { Component } from '@angular/core';
-import { AnimationController } from '@ionic/angular';
+import {
+  AnimationController,
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}
@@ -14,12 +43,12 @@ export class ExampleComponent {
 
     const backdropAnimation = this.animationCtrl
       .create()
-      .addElement(root.querySelector('ion-backdrop')!)
+      .addElement(root!.querySelector('ion-backdrop')!)
       .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
     const wrapperAnimation = this.animationCtrl
       .create()
-      .addElement(root.querySelector('.modal-wrapper')!)
+      .addElement(root!.querySelector('.modal-wrapper')!)
       .keyframes([
         { offset: 0, opacity: '0', transform: 'scale(0)' },
         { offset: 1, opacity: '0.99', transform: 'scale(1)' },
diff --git a/static/usage/v7/modal/styling/theming/angular/example_component_ts.md b/static/usage/v7/modal/styling/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..7db30b437f
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonImg,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonImg,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/modal/styling/theming/index.md b/static/usage/v7/modal/styling/theming/index.md
index 3d0ebd1709..e087f1b7bb 100644
--- a/static/usage/v7/modal/styling/theming/index.md
+++ b/static/usage/v7/modal/styling/theming/index.md
@@ -6,8 +6,9 @@ import vue from './vue.md';
 import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
-import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="7"
@@ -23,6 +24,7 @@ import angular_example_component_html from './angular/example_component_html.md'
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6c..0000000000
--- a/static/usage/v7/nav/modal-navigation/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/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246..1c3ee80655 100644
--- a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -1,15 +1,26 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d0..6467b66e9a 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c347..03f298b15a 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c06..769b0bc9bd 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md
index 73ce3215f6..7e443a6d98 100644
--- a/static/usage/v7/nav/modal-navigation/index.md
+++ b/static/usage/v7/nav/modal-navigation/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_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.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: {
diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6c..0000000000
--- a/static/usage/v7/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/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v7/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342c..b6a83169e1 100644
--- a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed721..4cc4fc01be 100644
--- a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a59..d1986f19a9 100644
--- a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md
index de4e4e0156..0456c3ca67 100644
--- a/static/usage/v7/nav/nav-link/index.md
+++ b/static/usage/v7/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: {
diff --git a/static/usage/v7/note/basic/angular.md b/static/usage/v7/note/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/note/basic/angular.md
rename to static/usage/v7/note/basic/angular/example_component_html.md
diff --git a/static/usage/v7/note/basic/angular/example_component_ts.md b/static/usage/v7/note/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v7/note/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/note/basic/index.md b/static/usage/v7/note/basic/index.md
index c1ff54b6c7..d319a0ad69 100644
--- a/static/usage/v7/note/basic/index.md
+++ b/static/usage/v7/note/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/note/basic/demo.html"
+/>
diff --git a/static/usage/v7/note/item/angular.md b/static/usage/v7/note/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/note/item/angular.md
rename to static/usage/v7/note/item/angular/example_component_html.md
diff --git a/static/usage/v7/note/item/angular/example_component_ts.md b/static/usage/v7/note/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..56ed0d0187
--- /dev/null
+++ b/static/usage/v7/note/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/note/item/index.md b/static/usage/v7/note/item/index.md
index 5c32457e00..6090fc71c4 100644
--- a/static/usage/v7/note/item/index.md
+++ b/static/usage/v7/note/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/note/item/demo.html"
+/>
diff --git a/static/usage/v7/note/theming/colors/angular.md b/static/usage/v7/note/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/note/theming/colors/angular.md
rename to static/usage/v7/note/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/note/theming/colors/angular/example_component_ts.md b/static/usage/v7/note/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/note/theming/colors/index.md b/static/usage/v7/note/theming/colors/index.md
index daadf060f1..f1e9be4095 100644
--- a/static/usage/v7/note/theming/colors/index.md
+++ b/static/usage/v7/note/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/note/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/note/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/note/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/note/theming/css-properties/index.md b/static/usage/v7/note/theming/css-properties/index.md
index 07c1802c04..d7374e0c94 100644
--- a/static/usage/v7/note/theming/css-properties/index.md
+++ b/static/usage/v7/note/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/picker/controller/angular/example_component_ts.md b/static/usage/v7/picker/controller/angular/example_component_ts.md
index 16f56cd0ca..35edd60c59 100644
--- a/static/usage/v7/picker/controller/angular/example_component_ts.md
+++ b/static/usage/v7/picker/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { PickerController } from '@ionic/angular';
+import { IonButton, PickerController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
index 69a5fb611a..9bd0236210 100644
--- a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
@@ -1,9 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPicker } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  languages: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPicker],
 })
 export class ExampleComponent {
   isPickerOpen = false;
@@ -39,7 +49,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected: ${value.languages.value}`);
       },
     },
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
index 7a638c6096..3af371232c 100644
--- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
@@ -1,9 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPicker } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  languages: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPicker],
 })
 export class ExampleComponent {
   public pickerColumns = [
@@ -37,7 +47,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected: ${value.languages.value}`);
       },
     },
diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
index 6f252e19dc..f2e223ccef 100644
--- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
@@ -1,9 +1,27 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPicker } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  meat: {
+    text: string;
+    value: string;
+  };
+  veggies: {
+    text: string;
+    value: string;
+  };
+  crust: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPicker],
 })
 export class ExampleComponent {
   public pickerColumns = [
@@ -67,7 +85,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
       },
     },
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
index 4db53a836a..3d0ceecf83 100644
--- a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/popover/customization/sizing/angular.md b/static/usage/v7/popover/customization/sizing/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/popover/customization/sizing/angular.md
rename to static/usage/v7/popover/customization/sizing/angular/example_component_html.md
diff --git a/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md
index 3eb127648d..dd1f84ade4 100644
--- a/static/usage/v7/popover/customization/sizing/index.md
+++ b/static/usage/v7/popover/customization/sizing/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/customization/sizing/demo.html"
 />
diff --git a/static/usage/v7/popover/customization/styling/angular/example_component_ts.md b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md
index 658ef72d45..4bf193fb78 100644
--- a/static/usage/v7/popover/customization/styling/index.md
+++ b/static/usage/v7/popover/customization/styling/index.md
@@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/popover/nested/angular.md b/static/usage/v7/popover/nested/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/popover/nested/angular.md
rename to static/usage/v7/popover/nested/angular/example_component_html.md
diff --git a/static/usage/v7/popover/nested/angular/example_component_ts.md b/static/usage/v7/popover/nested/angular/example_component_ts.md
new file mode 100644
index 0000000000..b32f800ad5
--- /dev/null
+++ b/static/usage/v7/popover/nested/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md
index cb8a824edb..c9cf4cedca 100644
--- a/static/usage/v7/popover/nested/index.md
+++ b/static/usage/v7/popover/nested/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/nested/demo.html"
 />
diff --git a/static/usage/v7/popover/performance/mount/angular.md b/static/usage/v7/popover/performance/mount/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/popover/performance/mount/angular.md
rename to static/usage/v7/popover/performance/mount/angular/example_component_html.md
diff --git a/static/usage/v7/popover/performance/mount/angular/example_component_ts.md b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md
index 9c846cc784..4e995fa375 100644
--- a/static/usage/v7/popover/performance/mount/index.md
+++ b/static/usage/v7/popover/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="medium"
   src="usage/v7/popover/performance/mount/demo.html"
diff --git a/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
deleted file mode 100644
index 887ca3acf8..0000000000
--- a/static/usage/v7/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/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
index 647bef04da..0ef12b6fd4 100644
--- a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -1,13 +1,14 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
-
-import { PopoverController } from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonButton, PopoverController } from '@ionic/angular/standalone';
 
 import { PopoverComponent } from './popover.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(public popoverController: PopoverController) {}
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
index 2900a32240..64d3666e3e 100644
--- a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
@@ -1,10 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
+  imports: [IonContent],
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md
index 9bbfc24fc1..98d6d7216e 100644
--- a/static/usage/v7/popover/presenting/controller/index.md
+++ b/static/usage/v7/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="7"
@@ -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/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
index ef604e603d..617cd653a4 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
 
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular.md b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/popover/presenting/inline-trigger/angular.md
rename to static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md
index ac99108a56..37e86a4ac5 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v7/popover/presenting/inline-trigger/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/presenting/inline-trigger/demo.html"
 />
diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
index a876a37620..fbf879f8d3 100644
--- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
index 971d3d92ed..383264f58d 100644
--- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
 })
 export class ExampleComponent {
   public progress = 0;
diff --git a/static/usage/v7/progress-bar/indeterminate/angular.md b/static/usage/v7/progress-bar/indeterminate/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/progress-bar/indeterminate/angular.md
rename to static/usage/v7/progress-bar/indeterminate/angular/example_component_html.md
diff --git a/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md b/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md
index db428ba587..ab84f691c3 100644
--- a/static/usage/v7/progress-bar/indeterminate/index.md
+++ b/static/usage/v7/progress-bar/indeterminate/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/progress-bar/indeterminate/demo.html"
 />
diff --git a/static/usage/v7/progress-bar/theming/colors/angular.md b/static/usage/v7/progress-bar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/progress-bar/theming/colors/angular.md
rename to static/usage/v7/progress-bar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md b/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md
index 7e6638a7e7..597a47e552 100644
--- a/static/usage/v7/progress-bar/theming/colors/index.md
+++ b/static/usage/v7/progress-bar/theming/colors/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/progress-bar/theming/colors/demo.html"
 />
diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md
index 5d6c694d10..d775905c2d 100644
--- a/static/usage/v7/progress-bar/theming/css-properties/index.md
+++ b/static/usage/v7/progress-bar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
index e289ac2035..e41fb77b57 100644
--- a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/radio/alignment/angular.md b/static/usage/v7/radio/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/alignment/angular.md
rename to static/usage/v7/radio/alignment/angular/example_component_html.md
diff --git a/static/usage/v7/radio/alignment/angular/example_component_ts.md b/static/usage/v7/radio/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..151a9f44f8
--- /dev/null
+++ b/static/usage/v7/radio/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/alignment/index.md b/static/usage/v7/radio/alignment/index.md
index eb491f6f69..81a6888f43 100644
--- a/static/usage/v7/radio/alignment/index.md
+++ b/static/usage/v7/radio/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/radio/alignment/demo.html"
 />
diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/basic/angular.md
rename to static/usage/v7/radio/basic/angular/example_component_html.md
diff --git a/static/usage/v7/radio/basic/angular/example_component_ts.md b/static/usage/v7/radio/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md
index 25f829a31f..b1b5522da8 100644
--- a/static/usage/v7/radio/basic/index.md
+++ b/static/usage/v7/radio/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/radio/basic/demo.html"
+/>
diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/empty-selection/angular.md
rename to static/usage/v7/radio/empty-selection/angular/example_component_html.md
diff --git a/static/usage/v7/radio/empty-selection/angular/example_component_ts.md b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md
index 2223f07657..31b149c9f3 100644
--- a/static/usage/v7/radio/empty-selection/index.md
+++ b/static/usage/v7/radio/empty-selection/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/empty-selection/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/radio/empty-selection/demo.html"
+/>
diff --git a/static/usage/v7/radio/justify/angular.md b/static/usage/v7/radio/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/justify/angular.md
rename to static/usage/v7/radio/justify/angular/example_component_html.md
diff --git a/static/usage/v7/radio/justify/angular/example_component_ts.md b/static/usage/v7/radio/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..151a9f44f8
--- /dev/null
+++ b/static/usage/v7/radio/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.md
index 3105943de6..62930c29a8 100644
--- a/static/usage/v7/radio/justify/index.md
+++ b/static/usage/v7/radio/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/radio/justify/demo.html"
+/>
diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/label-placement/angular.md
rename to static/usage/v7/radio/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/radio/label-placement/angular/example_component_ts.md b/static/usage/v7/radio/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/label-placement/index.md b/static/usage/v7/radio/label-placement/index.md
index 24df0d8ca2..5098f50aa8 100644
--- a/static/usage/v7/radio/label-placement/index.md
+++ b/static/usage/v7/radio/label-placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/radio/label-placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/radio/label-placement/demo.html"
+/>
diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/radio/theming/colors/angular.md
rename to static/usage/v7/radio/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/radio/theming/colors/angular/example_component_ts.md b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.md
index 3cd9a87cdb..b8dbd61631 100644
--- a/static/usage/v7/radio/theming/colors/index.md
+++ b/static/usage/v7/radio/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/radio/theming/colors/demo.html"
   size="100px"
 />
diff --git a/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.md
index 032b2ee66c..8669ba8cd0 100644
--- a/static/usage/v7/radio/theming/css-properties/index.md
+++ b/static/usage/v7/radio/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/index.md b/static/usage/v7/radio/theming/css-shadow-parts/index.md
index 92071383ef..08701b90b7 100644
--- a/static/usage/v7/radio/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/radio/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/radio/using-comparewith/angular/example_component_html.md b/static/usage/v7/radio/using-comparewith/angular/example_component_html.md
index 1e5e93819f..e80e73021d 100644
--- a/static/usage/v7/radio/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v7/radio/using-comparewith/angular/example_component_html.md
@@ -1,9 +1,11 @@
 ```html
 <ion-list>
   <ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
-    <ion-item *ngFor="let food of foods; trackBy: trackItems">
+    @for (food of foods; track food.id) {
+    <ion-item>
       <ion-radio [value]="food">{{ food.name }}</ion-radio>
     </ion-item>
+    }
   </ion-radio-group>
 </ion-list>
 ```
diff --git a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
index d7f803aea0..1158167fc1 100644
--- a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,16 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food, o2: Food): boolean {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
-  }
-
-  trackItems(index: number, item: any) {
-    return item.id;
+  handleChange(ev: Event): void {
+    const target = ev.target as HTMLInputElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/basic/angular.md
rename to static/usage/v7/range/basic/angular/example_component_html.md
diff --git a/static/usage/v7/range/basic/angular/example_component_ts.md b/static/usage/v7/range/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
index 49aed4c5b4..c8dfeaf033 100644
--- a/static/usage/v7/range/basic/index.md
+++ b/static/usage/v7/range/basic/index.md
@@ -5,6 +5,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/basic/demo.html"
+/>
diff --git a/static/usage/v7/range/dual-knobs/angular.md b/static/usage/v7/range/dual-knobs/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/dual-knobs/angular.md
rename to static/usage/v7/range/dual-knobs/angular/example_component_html.md
diff --git a/static/usage/v7/range/dual-knobs/angular/example_component_ts.md b/static/usage/v7/range/dual-knobs/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/dual-knobs/index.md b/static/usage/v7/range/dual-knobs/index.md
index ead42b93ad..66d3a06fe2 100644
--- a/static/usage/v7/range/dual-knobs/index.md
+++ b/static/usage/v7/range/dual-knobs/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/dual-knobs/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/dual-knobs/demo.html"
+/>
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
index 377ccd2dc2..e150234409 100644
--- a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   onIonChange(ev: Event) {
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
index e1b920f66d..b13b84b308 100644
--- a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   onIonKnobMoveStart(ev: Event) {
diff --git a/static/usage/v7/range/label-slot/angular.md b/static/usage/v7/range/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/label-slot/angular.md
rename to static/usage/v7/range/label-slot/angular/example_component_html.md
diff --git a/static/usage/v7/range/label-slot/angular/example_component_ts.md b/static/usage/v7/range/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..2c58b35ac6
--- /dev/null
+++ b/static/usage/v7/range/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/label-slot/index.md b/static/usage/v7/range/label-slot/index.md
index f885a98ce7..f778ab0d51 100644
--- a/static/usage/v7/range/label-slot/index.md
+++ b/static/usage/v7/range/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/labels/angular.md
rename to static/usage/v7/range/labels/angular/example_component_html.md
diff --git a/static/usage/v7/range/labels/angular/example_component_ts.md b/static/usage/v7/range/labels/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/labels/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/labels/index.md b/static/usage/v7/range/labels/index.md
index 0a450c0c60..6980824fbe 100644
--- a/static/usage/v7/range/labels/index.md
+++ b/static/usage/v7/range/labels/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/labels/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/labels/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v7/range/no-visible-label/angular.md b/static/usage/v7/range/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/no-visible-label/angular.md
rename to static/usage/v7/range/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v7/range/no-visible-label/angular/example_component_ts.md b/static/usage/v7/range/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/no-visible-label/index.md b/static/usage/v7/range/no-visible-label/index.md
index f23fc3fd99..38c3f06b37 100644
--- a/static/usage/v7/range/no-visible-label/index.md
+++ b/static/usage/v7/range/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/range/pins/angular/example_component_ts.md b/static/usage/v7/range/pins/angular/example_component_ts.md
index 8dc875e1bd..fdae87ebf9 100644
--- a/static/usage/v7/range/pins/angular/example_component_ts.md
+++ b/static/usage/v7/range/pins/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   pinFormatter(value: number) {
diff --git a/static/usage/v7/range/slots/angular/example_component_ts.md b/static/usage/v7/range/slots/angular/example_component_ts.md
index f61ba54a33..3ada922624 100644
--- a/static/usage/v7/range/slots/angular/example_component_ts.md
+++ b/static/usage/v7/range/slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonRange } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { snowOutline, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { snowOutline, sunnyOutline } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonRange],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/range/snapping-ticks/angular.md b/static/usage/v7/range/snapping-ticks/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/range/snapping-ticks/angular.md
rename to static/usage/v7/range/snapping-ticks/angular/example_component_html.md
diff --git a/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md b/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/snapping-ticks/index.md b/static/usage/v7/range/snapping-ticks/index.md
index 0fc7d22e2e..f7f4bb1e51 100644
--- a/static/usage/v7/range/snapping-ticks/index.md
+++ b/static/usage/v7/range/snapping-ticks/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/snapping-ticks/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/range/snapping-ticks/demo.html"
+/>
diff --git a/static/usage/v7/range/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/range/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/theming/css-properties/index.md b/static/usage/v7/range/theming/css-properties/index.md
index 380bd5204d..5dd2a606e5 100644
--- a/static/usage/v7/range/theming/css-properties/index.md
+++ b/static/usage/v7/range/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/index.md b/static/usage/v7/range/theming/css-shadow-parts/index.md
index 4b384ac3d8..72b700c12e 100644
--- a/static/usage/v7/range/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/range/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_html.md b/static/usage/v7/refresher/advanced/angular/example_component_html.md
index e724a1da71..c2dc6ff3e9 100644
--- a/static/usage/v7/refresher/advanced/angular/example_component_html.md
+++ b/static/usage/v7/refresher/advanced/angular/example_component_html.md
@@ -11,13 +11,15 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item [button]="true" *ngFor="let item of items">
+    @for (item of items; track item) {
+    <ion-item [button]="true">
       <ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
       <ion-label>
         <h2>{{ item.name }}</h2>
         <p>New message from {{ item.name }}</p>
       </ion-label>
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
index 9d1f3a5f19..db6bd8d609 100644
--- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -44,7 +73,7 @@ export class ExampleComponent {
     return this.names[Math.floor(Math.random() * this.names.length)];
   }
 
-  addItems(count, unread = false) {
+  addItems(count: number, unread = false) {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v7/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
index a5ac7eaaa9..8edb4e4dc1 100644
--- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -1,16 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
index 7a5c867f79..a0e47f6b8b 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
index 17e7d981c8..d4f3cc02ac 100644
--- a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -1,7 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pizza } from 'ionicons/icons';
@@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
index 2cd3dd6674..4ebfef05c5 100644
--- a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,12 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
index af0ff643b2..0914b726e0 100644
--- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,11 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
index 2485a55824..873daed0e9 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -3,10 +3,12 @@
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
-    <ion-item *ngFor="let item of items; trackBy: trackItems">
+    @for (item of items; track item) {
+    <ion-item>
       <ion-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
+    }
   </ion-reorder-group>
 </ion-list>
 ```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e3..bab1ace34d 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
@@ -23,9 +31,5 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
-
-  trackItems(index: number, itemNumber: number) {
-    return itemNumber;
-  }
 }
 ```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
index 7a5c867f79..a0e47f6b8b 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md b/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/ripple-effect/basic/index.md b/static/usage/v7/ripple-effect/basic/index.md
index 56050b2e4d..2a95bb0901 100644
--- a/static/usage/v7/ripple-effect/basic/index.md
+++ b/static/usage/v7/ripple-effect/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/ripple-effect/customizing/angular/example_component_ts.md b/static/usage/v7/ripple-effect/customizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v7/ripple-effect/customizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/ripple-effect/customizing/index.md b/static/usage/v7/ripple-effect/customizing/index.md
index 3f77c9fb51..593b69a896 100644
--- a/static/usage/v7/ripple-effect/customizing/index.md
+++ b/static/usage/v7/ripple-effect/customizing/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/ripple-effect/type/angular/example_component_ts.md b/static/usage/v7/ripple-effect/type/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v7/ripple-effect/type/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/ripple-effect/type/index.md b/static/usage/v7/ripple-effect/type/index.md
index db81e91755..dd45a0718b 100644
--- a/static/usage/v7/ripple-effect/type/index.md
+++ b/static/usage/v7/ripple-effect/type/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/searchbar/basic/angular.md b/static/usage/v7/searchbar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/searchbar/basic/angular.md
rename to static/usage/v7/searchbar/basic/angular/example_component_html.md
diff --git a/static/usage/v7/searchbar/basic/angular/example_component_ts.md b/static/usage/v7/searchbar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/searchbar/basic/index.md b/static/usage/v7/searchbar/basic/index.md
index 163e4ff689..41822d1287 100644
--- a/static/usage/v7/searchbar/basic/index.md
+++ b/static/usage/v7/searchbar/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/searchbar/basic/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/searchbar/cancel-button/angular.md b/static/usage/v7/searchbar/cancel-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/searchbar/cancel-button/angular.md
rename to static/usage/v7/searchbar/cancel-button/angular/example_component_html.md
diff --git a/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md
new file mode 100644
index 0000000000..4069269cd0
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { trash } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v7/searchbar/cancel-button/index.md b/static/usage/v7/searchbar/cancel-button/index.md
index c1f4e1977c..898cb36579 100644
--- a/static/usage/v7/searchbar/cancel-button/index.md
+++ b/static/usage/v7/searchbar/cancel-button/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/searchbar/cancel-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v7/searchbar/clear-button/angular.md b/static/usage/v7/searchbar/clear-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/searchbar/clear-button/angular.md
rename to static/usage/v7/searchbar/clear-button/angular/example_component_html.md
diff --git a/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md
new file mode 100644
index 0000000000..b93e2ab390
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { trashBin } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v7/searchbar/clear-button/index.md b/static/usage/v7/searchbar/clear-button/index.md
index 1d5212a124..b5c5a84477 100644
--- a/static/usage/v7/searchbar/clear-button/index.md
+++ b/static/usage/v7/searchbar/clear-button/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/searchbar/clear-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
index 4e69a17914..f0ee9b81eb 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_html.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
@@ -2,8 +2,10 @@
 <ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
 
 <ion-list>
-  <ion-item *ngFor="let result of results">
+  @for (result of results; track result) {
+  <ion-item>
     <ion-label>{{ result }}</ion-label>
   </ion-item>
+  }
 </ion-list>
 ```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
index 9a88f1c135..6a97ecbba5 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonSearchbar],
 })
 export class ExampleComponent {
   public data = [
@@ -20,9 +23,10 @@ export class ExampleComponent {
   ];
   public results = [...this.data];
 
-  handleInput(event) {
-    const query = event.target.value.toLowerCase();
-    this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+  handleInput(event: Event) {
+    const target = event.target as HTMLIonSearchbarElement;
+    const query = target.value?.toLowerCase() || '';
+    this.results = this.data.filter((d) => d.toLowerCase().includes(query));
   }
 }
 ```
diff --git a/static/usage/v7/searchbar/search-icon/angular.md b/static/usage/v7/searchbar/search-icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/searchbar/search-icon/angular.md
rename to static/usage/v7/searchbar/search-icon/angular/example_component_html.md
diff --git a/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md
new file mode 100644
index 0000000000..1339bfebf8
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { searchCircle } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v7/searchbar/search-icon/index.md b/static/usage/v7/searchbar/search-icon/index.md
index 951485a080..90f4e93ced 100644
--- a/static/usage/v7/searchbar/search-icon/index.md
+++ b/static/usage/v7/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/searchbar/search-icon/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/searchbar/search-icon/demo.html"
+/>
diff --git a/static/usage/v7/searchbar/theming/colors/angular.md b/static/usage/v7/searchbar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/searchbar/theming/colors/angular.md
rename to static/usage/v7/searchbar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md b/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/searchbar/theming/colors/index.md b/static/usage/v7/searchbar/theming/colors/index.md
index 670a3db203..20cecd3ae2 100644
--- a/static/usage/v7/searchbar/theming/colors/index.md
+++ b/static/usage/v7/searchbar/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/searchbar/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/index.md b/static/usage/v7/searchbar/theming/css-properties/index.md
index 65e3fca530..ad19f95488 100644
--- a/static/usage/v7/searchbar/theming/css-properties/index.md
+++ b/static/usage/v7/searchbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/segment-button/basic/angular.md b/static/usage/v7/segment-button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/segment-button/basic/angular.md
rename to static/usage/v7/segment-button/basic/angular/example_component_html.md
diff --git a/static/usage/v7/segment-button/basic/angular/example_component_ts.md b/static/usage/v7/segment-button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment-button/basic/index.md b/static/usage/v7/segment-button/basic/index.md
index ec9dd3aaae..8042de219d 100644
--- a/static/usage/v7/segment-button/basic/index.md
+++ b/static/usage/v7/segment-button/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/segment-button/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/segment-button/basic/demo.html"
+/>
diff --git a/static/usage/v7/segment-button/layout/angular/example_component_ts.md b/static/usage/v7/segment-button/layout/angular/example_component_ts.md
index 8540f8ec1b..d974333e9a 100644
--- a/static/usage/v7/segment-button/layout/angular/example_component_ts.md
+++ b/static/usage/v7/segment-button/layout/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { call, heart, pin } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { call, heart, pin } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/index.md b/static/usage/v7/segment-button/theming/css-properties/index.md
index 66e2e50f58..2895629cf0 100644
--- a/static/usage/v7/segment-button/theming/css-properties/index.md
+++ b/static/usage/v7/segment-button/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/index.md b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
index 9fe4b9f5e0..c63e35244d 100644
--- a/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/segment/basic/angular.md b/static/usage/v7/segment/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/segment/basic/angular.md
rename to static/usage/v7/segment/basic/angular/example_component_html.md
diff --git a/static/usage/v7/segment/basic/angular/example_component_ts.md b/static/usage/v7/segment/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment/basic/index.md b/static/usage/v7/segment/basic/index.md
index 3b98e622e3..dc16483ede 100644
--- a/static/usage/v7/segment/basic/index.md
+++ b/static/usage/v7/segment/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/segment/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/segment/basic/demo.html"
+/>
diff --git a/static/usage/v7/segment/scrollable/angular/example_component_ts.md b/static/usage/v7/segment/scrollable/angular/example_component_ts.md
index 807b3ff612..fb95a4ea91 100644
--- a/static/usage/v7/segment/scrollable/angular/example_component_ts.md
+++ b/static/usage/v7/segment/scrollable/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { barbell, basket, call, globe, heart, home, person, pin, star, trash } f
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonSegment, IonSegmentButton],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/segment/theming/colors/angular.md b/static/usage/v7/segment/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/segment/theming/colors/angular.md
rename to static/usage/v7/segment/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/segment/theming/colors/angular/example_component_ts.md b/static/usage/v7/segment/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment/theming/colors/index.md b/static/usage/v7/segment/theming/colors/index.md
index bdcf06a9de..6942380586 100644
--- a/static/usage/v7/segment/theming/colors/index.md
+++ b/static/usage/v7/segment/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/segment/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/segment/theming/css-properties/index.md b/static/usage/v7/segment/theming/css-properties/index.md
index da21c55735..ecc038e1c3 100644
--- a/static/usage/v7/segment/theming/css-properties/index.md
+++ b/static/usage/v7/segment/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/basic/multiple-selection/angular.md
rename to static/usage/v7/select/basic/multiple-selection/angular/example_component_html.md
diff --git a/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.md
index 2523a47bcc..36f20a19ee 100644
--- a/static/usage/v7/select/basic/multiple-selection/index.md
+++ b/static/usage/v7/select/basic/multiple-selection/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/basic/multiple-selection/demo.html"
 />
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
index fb51c040a2..fb988662d5 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -1,13 +1,16 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  handleChange(e) {
-    console.log('ionChange fired with value: ' + e.detail.value);
+  handleChange(event: CustomEvent) {
+    console.log('ionChange fired with value: ' + event.detail.value);
   }
 
   handleCancel() {
diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/basic/single-selection/angular.md
rename to static/usage/v7/select/basic/single-selection/angular/example_component_html.md
diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md
index 1fc60d79fe..22f6b1f770 100644
--- a/static/usage/v7/select/basic/single-selection/index.md
+++ b/static/usage/v7/select/basic/single-selection/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/basic/single-selection/demo.html"
 />
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/customization/button-text/angular.md
rename to static/usage/v7/select/customization/button-text/angular/example_component_html.md
diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md
index 9e1a07063f..c5a6fc0923 100644
--- a/static/usage/v7/select/customization/button-text/index.md
+++ b/static/usage/v7/select/customization/button-text/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="350px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/customization/button-text/demo.html"
 />
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/customization/custom-toggle-icons/angular.md
rename to static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
new file mode 100644
index 0000000000..61e221a24b
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { add, remove } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ add, remove });
+  }
+}
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md
index 0617a54da7..86f22e705f 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/index.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="400px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/customization/custom-toggle-icons/demo.html"
 />
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
index 4db53a836a..d85d416636 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -1,10 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { caretDownSharp } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDownSharp });
+  }
+}
 ```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
index c3f34d0ada..2ab0bd1d62 100644
--- a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
index 4db53a836a..1b377b7721 100644
--- a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/fill/angular.md
rename to static/usage/v7/select/fill/angular/example_component_html.md
diff --git a/static/usage/v7/select/fill/angular/example_component_ts.md b/static/usage/v7/select/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..1b377b7721
--- /dev/null
+++ b/static/usage/v7/select/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md
index 393a8af448..16a2819974 100644
--- a/static/usage/v7/select/fill/index.md
+++ b/static/usage/v7/select/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/fill/demo.html"
   size="300px"
   mode="md"
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular.md b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/interfaces/action-sheet/angular.md
rename to static/usage/v7/select/interfaces/action-sheet/angular/example_component_html.md
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/index.md b/static/usage/v7/select/interfaces/action-sheet/index.md
index 1dc5472394..b0f69a4a49 100644
--- a/static/usage/v7/select/interfaces/action-sheet/index.md
+++ b/static/usage/v7/select/interfaces/action-sheet/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/interfaces/action-sheet/demo.html"
 />
diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/interfaces/popover/angular.md
rename to static/usage/v7/select/interfaces/popover/angular/example_component_html.md
diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md
index ae4fa7b752..4519e559ec 100644
--- a/static/usage/v7/select/interfaces/popover/index.md
+++ b/static/usage/v7/select/interfaces/popover/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="400px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/interfaces/popover/demo.html"
 />
diff --git a/static/usage/v7/select/justify/angular.md b/static/usage/v7/select/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/justify/angular.md
rename to static/usage/v7/select/justify/angular/example_component_html.md
diff --git a/static/usage/v7/select/justify/angular/example_component_ts.md b/static/usage/v7/select/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..edeb5fb217
--- /dev/null
+++ b/static/usage/v7/select/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md
index 17356a8466..1142c6f8dc 100644
--- a/static/usage/v7/select/justify/index.md
+++ b/static/usage/v7/select/justify/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/justify/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/label-placement/angular.md b/static/usage/v7/select/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/label-placement/angular.md
rename to static/usage/v7/select/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/select/label-placement/angular/example_component_ts.md b/static/usage/v7/select/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md
index b0464726fb..ceeb3cf665 100644
--- a/static/usage/v7/select/label-placement/index.md
+++ b/static/usage/v7/select/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/label-slot/angular.md
rename to static/usage/v7/select/label-slot/angular/example_component_html.md
diff --git a/static/usage/v7/select/label-slot/angular/example_component_ts.md b/static/usage/v7/select/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..a8cb5c497c
--- /dev/null
+++ b/static/usage/v7/select/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md
index 1b25e6b83f..cefb2b96fd 100644
--- a/static/usage/v7/select/label-slot/index.md
+++ b/static/usage/v7/select/label-slot/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/label-slot/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/select/no-visible-label/angular.md
rename to static/usage/v7/select/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md
index 214708de57..2fc29ce267 100644
--- a/static/usage/v7/select/no-visible-label/index.md
+++ b/static/usage/v7/select/no-visible-label/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/select/no-visible-label/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
index af00be1957..361cfbad1b 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -8,7 +8,9 @@
       (ionChange)="handleChange($event)"
       [multiple]="true"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index c33570deec..976de91ea5 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,7 +33,7 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | Food[] | null): boolean {
     if (!o1 || !o2) {
       return o1 === o2;
     }
@@ -36,8 +45,9 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
index 7354647f22..808a9743cc 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -7,7 +7,9 @@
       placeholder="Select food"
       (ionChange)="handleChange($event)"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 20d05fa847..e984a6f654 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,12 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | null): boolean {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
index f7717b55dc..4cdf6bc2b3 100644
--- a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, leaf } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md
deleted file mode 100644
index 0fa5803771..0000000000
--- a/static/usage/v7/select/typeahead/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { TypeaheadComponent } from './typeahead.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
index ded6fa60b0..9276b8b13e 100644
--- a/static/usage/v7/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -1,11 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
 import { Item } from './types';
 
+import { TypeaheadComponent } from './typeahead.component';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
@@ -41,15 +45,23 @@ export class ExampleComponent {
     { text: 'Strawberry', value: 'strawberry' },
   ];
 
-  private formatData(data: string[]) {
+  /**
+   * Formats the display text based on the selected fruits.
+   * @param data - Array of selected fruit values
+   * @returns A formatted string for display
+   */
+  private formatData(data: string[]): string {
     if (data.length === 1) {
       const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
-      return fruit.text;
+      return fruit ? fruit.text : '';
     }
-
     return `${data.length} items`;
   }
 
+  /**
+   * Handles fruit selection changes and updates the selected fruits and text.
+   * @param fruits - Array of selected fruit values
+   */
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md
similarity index 90%
rename from static/usage/v8/select/typeahead/angular/modal-example_component_html.md
rename to static/usage/v7/select/typeahead/angular/typeahead_component_html.md
index 64da05a7a9..ed147c6425 100644
--- a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md
@@ -16,11 +16,13 @@
 
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
-    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+    @for (item of filteredItems; track item.value) {
+    <ion-item>
       <ion-checkbox [value]="item.value" [checked]="isChecked(item.value)" (ionChange)="checkboxChange($event)"
         >{{ item.text }}</ion-checkbox
       >
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
similarity index 67%
rename from static/usage/v8/select/typeahead/angular/modal-example_component_ts.md
rename to static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
index 9bd21f1b40..f9de32444d 100644
--- a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
@@ -1,11 +1,37 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import type { OnInit } from '@angular/core';
+
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
 import { Item } from './types';
 
 @Component({
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
+  imports: [
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonList,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
@@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit {
     this.workingSelectedValues = [...this.selectedItems];
   }
 
-  trackItems(index: number, item: Item) {
-    return item.value;
-  }
-
   cancelChanges() {
     this.selectionCancel.emit();
   }
@@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev) {
-    this.filterList(ev.target.value);
+  searchbarInput(ev: Event) {
+    const inputElement = ev.target as HTMLInputElement;
+    this.filterList(inputElement.value);
   }
 
   /**
@@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit {
      * If no search query is defined,
      * return all options.
      */
-    if (searchQuery === undefined) {
+    if (searchQuery === undefined || searchQuery.trim() === '') {
       this.filteredItems = [...this.items];
     } else {
       /**
@@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      this.filteredItems = this.items.filter((item) => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      });
+      this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery));
     }
   }
 
-  isChecked(value: string) {
-    return this.workingSelectedValues.find((item) => item === value);
+  isChecked(value: string): boolean {
+    return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev) {
+  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
     const { checked, value } = ev.detail;
 
     if (checked) {
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
index e81d8b0aa5..86565f3370 100644
--- a/static/usage/v7/select/typeahead/index.md
+++ b/static/usage/v7/select/typeahead/index.md
@@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md';
 import vue_types_ts from './vue/vue_types_ts.md';
 import vue_typeahead_component from './vue/typeahead_component_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
-import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+import angular_typeahead_component_ts from './angular/typeahead_component_ts.md';
+import angular_typeahead_component_html from './angular/typeahead_component_html.md';
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
@@ -39,9 +38,8 @@ import angular_types_ts from './angular/angular_types_ts.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/typeahead.component.html': angular_modal_example_component_html,
-        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/typeahead.component.html': angular_typeahead_component_html,
+        'src/app/typeahead.component.ts': angular_typeahead_component_ts,
         'src/app/types.ts': angular_types_ts,
       },
     },
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_html.md b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
index bea0ee9043..de7aaafd2f 100644
--- a/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
@@ -1,5 +1,6 @@
 ```html
-<ion-list *ngIf="loaded">
+@if (loaded) {
+<ion-list>
   <ion-list-header>Albums</ion-list-header>
   <ion-item>
     <ion-thumbnail slot="start">
@@ -12,8 +13,8 @@
     </ion-label>
   </ion-item>
 </ion-list>
-
-<ion-list *ngIf="!loaded">
+} @else {
+<ion-list>
   <ion-list-header>
     <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
   </ion-list-header>
@@ -34,6 +35,7 @@
     </ion-label>
   </ion-item>
 </ion-list>
+}
 
 <ion-button (click)="loaded = !loaded">Toggle</ion-button>
 ```
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
index c74fbd4855..1a2f83bccc 100644
--- a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonSkeletonText,
+  IonThumbnail,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { musicalNotes } from 'ionicons/icons';
@@ -8,6 +18,7 @@ import { musicalNotes } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
 })
 export class ExampleComponent {
   public loaded = false;
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d4e5d48be6
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.md
index c131f6dbe1..a0c8f88ff5 100644
--- a/static/usage/v7/skeleton-text/theming/css-properties/index.md
+++ b/static/usage/v7/skeleton-text/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/spinner/basic/angular.md b/static/usage/v7/spinner/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/spinner/basic/angular.md
rename to static/usage/v7/spinner/basic/angular/example_component_html.md
diff --git a/static/usage/v7/spinner/basic/angular/example_component_ts.md b/static/usage/v7/spinner/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..15a3c981bf
--- /dev/null
+++ b/static/usage/v7/spinner/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/spinner/basic/index.md b/static/usage/v7/spinner/basic/index.md
index dd6417ff23..278e300030 100644
--- a/static/usage/v7/spinner/basic/index.md
+++ b/static/usage/v7/spinner/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/spinner/basic/demo.html"
   size="500px"
 />
diff --git a/static/usage/v7/spinner/theming/colors/angular.md b/static/usage/v7/spinner/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/spinner/theming/colors/angular.md
rename to static/usage/v7/spinner/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md b/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/spinner/theming/colors/index.md b/static/usage/v7/spinner/theming/colors/index.md
index ee82596cc0..07a90f122d 100644
--- a/static/usage/v7/spinner/theming/colors/index.md
+++ b/static/usage/v7/spinner/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/spinner/theming/colors/demo.html"
   size="100px"
 />
diff --git a/static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/index.md b/static/usage/v7/spinner/theming/css-properties/index.md
index 22b93f802b..1a2f60f7b8 100644
--- a/static/usage/v7/spinner/theming/css-properties/index.md
+++ b/static/usage/v7/spinner/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_ts.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/spinner/theming/resizing/index.md b/static/usage/v7/spinner/theming/resizing/index.md
index 5d4b142092..0f21cdccea 100644
--- a/static/usage/v7/spinner/theming/resizing/index.md
+++ b/static/usage/v7/spinner/theming/resizing/index.md
@@ -9,9 +9,10 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
-  version="6"
+  version="7"
   code={{
     javascript,
     react: {
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/split-pane/basic/angular.md b/static/usage/v7/split-pane/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/split-pane/basic/angular.md
rename to static/usage/v7/split-pane/basic/angular/example_component_html.md
diff --git a/static/usage/v7/split-pane/basic/angular/example_component_ts.md b/static/usage/v7/split-pane/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..1e20f96fbf
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/split-pane/basic/index.md b/static/usage/v7/split-pane/basic/index.md
index 40ec0cfe8a..adf4c76c4e 100644
--- a/static/usage/v7/split-pane/basic/index.md
+++ b/static/usage/v7/split-pane/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/split-pane/basic/demo.html"
   size="500px"
 />
diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..1e20f96fbf
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md
index 336074baaa..a89d6e8305 100644
--- a/static/usage/v7/split-pane/theming/css-properties/index.md
+++ b/static/usage/v7/split-pane/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/tabs/router/angular/app_component_html.md b/static/usage/v7/tabs/router/angular/app_component_html.md
index 7636539f28..3b819dc640 100644
--- a/static/usage/v7/tabs/router/angular/app_component_html.md
+++ b/static/usage/v7/tabs/router/angular/app_component_html.md
@@ -1,3 +1,5 @@
 ```html
-<ion-router-outlet></ion-router-outlet>
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>
 ```
diff --git a/static/usage/v7/tabs/router/angular/app_component_ts.md b/static/usage/v7/tabs/router/angular/app_component_ts.md
new file mode 100644
index 0000000000..69438d5bb0
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_component_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+  constructor() {}
+}
+```
diff --git a/static/usage/v7/tabs/router/angular/app_module_ts.md b/static/usage/v7/tabs/router/angular/app_module_ts.md
deleted file mode 100644
index e36b8c6316..0000000000
--- a/static/usage/v7/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/v7/tabs/router/angular/app_routes_ts.md b/static/usage/v7/tabs/router/angular/app_routes_ts.md
new file mode 100644
index 0000000000..fd959555b2
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_routes_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Routes } from '@angular/router';
+import { ExampleComponent } from './example.component';
+
+export const routes: Routes = [
+  {
+    path: 'example',
+    component: ExampleComponent,
+    children: [
+      {
+        path: 'home',
+        loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent),
+      },
+      {
+        path: 'library',
+        loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent),
+      },
+      {
+        path: 'radio',
+        loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent),
+      },
+      {
+        path: 'search',
+        loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/example/home',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/example/home',
+    pathMatch: 'full',
+  },
+];
+```
diff --git a/static/usage/v7/tabs/router/angular/app_routing_module_ts.md b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md
deleted file mode 100644
index 7ff1067030..0000000000
--- a/static/usage/v7/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/v7/tabs/router/angular/example_component_ts.md b/static/usage/v7/tabs/router/angular/example_component_ts.md
index 7762322ce9..84c7d490b4 100644
--- a/static/usage/v7/tabs/router/angular/example_component_ts.md
+++ b/static/usage/v7/tabs/router/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { library, playCircle, radio, search } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { library, playCircle, radio, search } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonTabBar, IonTabButton, IonTabs],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/tabs/router/angular/home_page_component_ts.md b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
index 9e2ef0a3e8..7d3d344681 100644
--- a/static/usage/v7/tabs/router/angular/home_page_component_ts.md
+++ b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class HomePageComponent {}
 ```
diff --git a/static/usage/v7/tabs/router/angular/home_page_module_ts.md b/static/usage/v7/tabs/router/angular/home_page_module_ts.md
deleted file mode 100644
index 2a1fb15b46..0000000000
--- a/static/usage/v7/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/v7/tabs/router/angular/library_page_component_ts.md b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
index f5a92a4868..072cd0a779 100644
--- a/static/usage/v7/tabs/router/angular/library_page_component_ts.md
+++ b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-library-page',
   templateUrl: './library-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class LibraryPageComponent {}
 ```
diff --git a/static/usage/v7/tabs/router/angular/library_page_module_ts.md b/static/usage/v7/tabs/router/angular/library_page_module_ts.md
deleted file mode 100644
index 8e2ab48cf3..0000000000
--- a/static/usage/v7/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/v7/tabs/router/angular/radio_page_component_ts.md b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
index d29209c00d..63273c0280 100644
--- a/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
+++ b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class RadioPageComponent {}
 ```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_module_ts.md b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md
deleted file mode 100644
index f50a008863..0000000000
--- a/static/usage/v7/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/v7/tabs/router/angular/search_page_component_ts.md b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
index bd6e723d33..00eb12be82 100644
--- a/static/usage/v7/tabs/router/angular/search_page_component_ts.md
+++ b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-search-page',
   templateUrl: './search-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class SearchPageComponent {}
 ```
diff --git a/static/usage/v7/tabs/router/angular/search_page_module_ts.md b/static/usage/v7/tabs/router/angular/search_page_module_ts.md
deleted file mode 100644
index a1d599c5d9..0000000000
--- a/static/usage/v7/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/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md
index 072832ae97..c11fd49969 100644
--- a/static/usage/v7/tabs/router/index.md
+++ b/static/usage/v7/tabs/router/index.md
@@ -3,26 +3,22 @@ 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 angular_app_routes_ts from './angular/app_routes_ts.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_app_component_ts from './angular/app_component_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';
 
@@ -54,24 +50,20 @@ import react_search_page_tsx from './react/search_page_tsx.md';
     },
     angular: {
       files: {
+        'src/global.css': angular_global_css,
+        'src/app/app.routes.ts': angular_app_routes_ts,
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_component_ts,
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_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: {
diff --git a/static/usage/v7/text/basic/angular/example_component_ts.md b/static/usage/v7/text/basic/angular/example_component_ts.md
index 122ee98dfb..b49066098d 100644
--- a/static/usage/v7/text/basic/angular/example_component_ts.md
+++ b/static/usage/v7/text/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonText } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { warning } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { warning } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonText],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/autogrow/angular.md
rename to static/usage/v7/textarea/autogrow/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/autogrow/angular/example_component_ts.md b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
new file mode 100644
index 0000000000..a407eaef3b
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md
index 9dd79cbd7c..043d89b9f4 100644
--- a/static/usage/v7/textarea/autogrow/index.md
+++ b/static/usage/v7/textarea/autogrow/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="small"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/textarea/autogrow/demo.html"
 />
diff --git a/static/usage/v7/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/basic/angular.md
rename to static/usage/v7/textarea/basic/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/basic/angular/example_component_ts.md b/static/usage/v7/textarea/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v7/textarea/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md
index 3070fbea85..181f202fdc 100644
--- a/static/usage/v7/textarea/basic/index.md
+++ b/static/usage/v7/textarea/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="250px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/textarea/basic/demo.html"
 />
diff --git a/static/usage/v7/textarea/clear-on-edit/angular.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/clear-on-edit/angular.md
rename to static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md
index cc1e09366e..d69f619b8b 100644
--- a/static/usage/v7/textarea/clear-on-edit/index.md
+++ b/static/usage/v7/textarea/clear-on-edit/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="xsmall"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/textarea/clear-on-edit/demo.html"
 />
diff --git a/static/usage/v7/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md
index 2c08dc06fc..2b46bbe6da 100644
--- a/static/usage/v7/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/counter/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v7/textarea/fill/angular.md b/static/usage/v7/textarea/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/fill/angular.md
rename to static/usage/v7/textarea/fill/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/fill/angular/example_component_ts.md b/static/usage/v7/textarea/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v7/textarea/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md
index bfc5b54da5..50cb3a6227 100644
--- a/static/usage/v7/textarea/fill/index.md
+++ b/static/usage/v7/textarea/fill/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="250px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/textarea/fill/demo.html"
   mode="md"
 />
diff --git a/static/usage/v7/textarea/helper-error/angular.md b/static/usage/v7/textarea/helper-error/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/helper-error/angular.md
rename to static/usage/v7/textarea/helper-error/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/helper-error/angular/example_component_ts.md b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md
index 5d4ca92e48..c8b578ce9c 100644
--- a/static/usage/v7/textarea/helper-error/index.md
+++ b/static/usage/v7/textarea/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/textarea/helper-error/demo.html"
   size="200px"
diff --git a/static/usage/v7/textarea/label-placement/angular.md b/static/usage/v7/textarea/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/label-placement/angular.md
rename to static/usage/v7/textarea/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/label-placement/angular/example_component_ts.md b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md
index 8ced2454c7..b1a25eacc3 100644
--- a/static/usage/v7/textarea/label-placement/index.md
+++ b/static/usage/v7/textarea/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/textarea/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/label-slot/angular.md
rename to static/usage/v7/textarea/label-slot/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/label-slot/angular/example_component_ts.md b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..874d21ed01
--- /dev/null
+++ b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonText, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md
index a9f9136612..824120c838 100644
--- a/static/usage/v7/textarea/label-slot/index.md
+++ b/static/usage/v7/textarea/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/textarea/label-slot/demo.html"
+/>
diff --git a/static/usage/v7/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/textarea/no-visible-label/angular.md
rename to static/usage/v7/textarea/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md
index 411fc52d50..0928d01334 100644
--- a/static/usage/v7/textarea/no-visible-label/index.md
+++ b/static/usage/v7/textarea/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/textarea/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/textarea/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
index 899f7a826a..c110f8c159 100644
--- a/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/textarea/theming/angular/example_component_ts.md b/static/usage/v7/textarea/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md
index 3a50362dce..f128fc8e77 100644
--- a/static/usage/v7/textarea/theming/index.md
+++ b/static/usage/v7/textarea/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,8 +26,9 @@ import angular_global_css from './angular/global_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
index d2ef8d59a2..98835fee79 100644
--- a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +24,24 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   constructor() {
diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
index ccf31cc2cd..b0b74b8e2f 100644
--- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   themeToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the theme based on isDark
-  initializeDarkTheme(isDark) {
+  initializeDarkTheme(isDark: boolean) {
     this.themeToggle = isDark;
     this.toggleDarkTheme(isDark);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark theme
-  toggleChange(ev) {
-    this.toggleDarkTheme(ev.detail.checked);
+  toggleChange(event: CustomEvent) {
+    this.toggleDarkTheme(event.detail.checked);
   }
 
   // Add or remove the "dark" class on the document body
-  toggleDarkTheme(shouldAdd) {
+  toggleDarkTheme(shouldAdd: boolean) {
     document.body.classList.toggle('dark', shouldAdd);
   }
 }
diff --git a/static/usage/v7/thumbnail/basic/angular.md b/static/usage/v7/thumbnail/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/thumbnail/basic/angular.md
rename to static/usage/v7/thumbnail/basic/angular/example_component_html.md
diff --git a/static/usage/v7/thumbnail/basic/angular/example_component_ts.md b/static/usage/v7/thumbnail/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..a82583c287
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/thumbnail/basic/index.md b/static/usage/v7/thumbnail/basic/index.md
index 60e254955c..b5b8d5fcb3 100644
--- a/static/usage/v7/thumbnail/basic/index.md
+++ b/static/usage/v7/thumbnail/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/thumbnail/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/thumbnail/basic/demo.html"
+/>
diff --git a/static/usage/v7/thumbnail/item/angular.md b/static/usage/v7/thumbnail/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/thumbnail/item/angular.md
rename to static/usage/v7/thumbnail/item/angular/example_component_html.md
diff --git a/static/usage/v7/thumbnail/item/angular/example_component_ts.md b/static/usage/v7/thumbnail/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..fd6269b877
--- /dev/null
+++ b/static/usage/v7/thumbnail/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/thumbnail/item/index.md b/static/usage/v7/thumbnail/item/index.md
index 89a2a19fb8..87dd7e8cac 100644
--- a/static/usage/v7/thumbnail/item/index.md
+++ b/static/usage/v7/thumbnail/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/thumbnail/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/thumbnail/item/demo.html"
+/>
diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..a82583c287
--- /dev/null
+++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.md
index 36674cc72c..905f7a2555 100644
--- a/static/usage/v7/thumbnail/theming/css-properties/index.md
+++ b/static/usage/v7/thumbnail/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/title/basic/angular.md b/static/usage/v7/title/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/title/basic/angular.md
rename to static/usage/v7/title/basic/angular/example_component_html.md
diff --git a/static/usage/v7/title/basic/angular/example_component_ts.md b/static/usage/v7/title/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..6383d97aa5
--- /dev/null
+++ b/static/usage/v7/title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/title/basic/index.md b/static/usage/v7/title/basic/index.md
index 2ff7e96f44..75f58a2a0f 100644
--- a/static/usage/v7/title/basic/index.md
+++ b/static/usage/v7/title/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v7/title/collapsible-large-title/basic/angular.md b/static/usage/v7/title/collapsible-large-title/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/title/collapsible-large-title/basic/angular.md
rename to static/usage/v7/title/collapsible-large-title/basic/angular/example_component_html.md
diff --git a/static/usage/v7/title/collapsible-large-title/basic/angular/example_component_ts.md b/static/usage/v7/title/collapsible-large-title/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5ef16cdb9d
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md
index 8cb9a0cd0a..dd2343af62 100644
--- a/static/usage/v7/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v7/title/collapsible-large-title/basic/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   mode="ios"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/title/collapsible-large-title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/angular.md b/static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/title/collapsible-large-title/buttons/angular.md
rename to static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_html.md
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_ts.md b/static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..a62dc474d6
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.md
index b11f1bbe65..338eaa7287 100644
--- a/static/usage/v7/title/collapsible-large-title/buttons/index.md
+++ b/static/usage/v7/title/collapsible-large-title/buttons/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   mode="ios"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/title/collapsible-large-title/buttons/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v7/title/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/title/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..5ef16cdb9d
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.md
index aed27e7915..9a7c282dad 100644
--- a/static/usage/v7/title/theming/css-properties/index.md
+++ b/static/usage/v7/title/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,6 +26,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/global.css': angular_global_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
index 4e1c0e564b..f9ead20f1e 100644
--- a/static/usage/v7/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
@@ -23,8 +26,8 @@ export class ExampleComponent {
     },
   ];
 
-  setRoleMessage(ev) {
-    const { role } = ev.detail;
+  setRoleMessage(event: CustomEvent) {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   }
 }
diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toast/icon/angular.md
rename to static/usage/v7/toast/icon/angular/example_component_html.md
diff --git a/static/usage/v7/toast/icon/angular/example_component_ts.md b/static/usage/v7/toast/icon/angular/example_component_ts.md
new file mode 100644
index 0000000000..159c8d6693
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
+})
+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({ globe });
+  }
+}
+```
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
index aef5d5a8cc..bdc7b842c3 100644
--- a/static/usage/v7/toast/icon/index.md
+++ b/static/usage/v7/toast/icon/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/icon/demo.html"
 />
diff --git a/static/usage/v7/toast/inline/basic/angular.md b/static/usage/v7/toast/inline/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toast/inline/basic/angular.md
rename to static/usage/v7/toast/inline/basic/angular/example_component_html.md
diff --git a/static/usage/v7/toast/inline/basic/angular/example_component_ts.md b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..4e602aa671
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md
index aa61cab896..73f11ad210 100644
--- a/static/usage/v7/toast/inline/basic/index.md
+++ b/static/usage/v7/toast/inline/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/inline/basic/demo.html"
   devicePreview
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
index 67fb0c7676..55a00eb135 100644
--- a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
   isToastOpen = false;
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
index 89c39c3332..c3ad043e17 100644
--- a/static/usage/v7/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   toastButtons = [
diff --git a/static/usage/v7/toast/position-anchor/angular.md b/static/usage/v7/toast/position-anchor/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toast/position-anchor/angular.md
rename to static/usage/v7/toast/position-anchor/angular/example_component_html.md
diff --git a/static/usage/v7/toast/position-anchor/angular/example_component_ts.md b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
new file mode 100644
index 0000000000..3f5a4a3404
--- /dev/null
+++ b/static/usage/v7/toast/position-anchor/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/position-anchor/index.md b/static/usage/v7/toast/position-anchor/index.md
index dfcf9edde7..45cf57993c 100644
--- a/static/usage/v7/toast/position-anchor/index.md
+++ b/static/usage/v7/toast/position-anchor/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/position-anchor/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
index db133a99f1..a6c9eb4ead 100644
--- a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonButton, ToastController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v7/toast/swipe-gesture/angular.md b/static/usage/v7/toast/swipe-gesture/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toast/swipe-gesture/angular.md
rename to static/usage/v7/toast/swipe-gesture/angular/example_component_html.md
diff --git a/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef2f87437f
--- /dev/null
+++ b/static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toast/swipe-gesture/index.md b/static/usage/v7/toast/swipe-gesture/index.md
index 59e7afcab7..492e62b23b 100644
--- a/static/usage/v7/toast/swipe-gesture/index.md
+++ b/static/usage/v7/toast/swipe-gesture/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toast/swipe-gesture/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
index 361391ca54..b68a983109 100644
--- a/static/usage/v7/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
diff --git a/static/usage/v7/toggle/alignment/angular.md b/static/usage/v7/toggle/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/alignment/angular.md
rename to static/usage/v7/toggle/alignment/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/alignment/angular/example_component_ts.md b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/alignment/index.md b/static/usage/v7/toggle/alignment/index.md
index 0d94dbd5e1..b0a9995966 100644
--- a/static/usage/v7/toggle/alignment/index.md
+++ b/static/usage/v7/toggle/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v7/toggle/alignment/demo.html"
 />
diff --git a/static/usage/v7/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/basic/angular.md
rename to static/usage/v7/toggle/basic/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/basic/angular/example_component_ts.md b/static/usage/v7/toggle/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.md
index 565b56f559..a161ca4746 100644
--- a/static/usage/v7/toggle/basic/index.md
+++ b/static/usage/v7/toggle/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';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/basic/demo.html"
+/>
diff --git a/static/usage/v7/toggle/justify/angular.md b/static/usage/v7/toggle/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/justify/angular.md
rename to static/usage/v7/toggle/justify/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/justify/angular/example_component_ts.md b/static/usage/v7/toggle/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..80a17959d0
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.md
index 63ae27756f..d8ed39bb74 100644
--- a/static/usage/v7/toggle/justify/index.md
+++ b/static/usage/v7/toggle/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/justify/demo.html"
+/>
diff --git a/static/usage/v7/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/label-placement/angular.md
rename to static/usage/v7/toggle/label-placement/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/label-placement/angular/example_component_ts.md b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/label-placement/index.md b/static/usage/v7/toggle/label-placement/index.md
index 160f05db92..61da485809 100644
--- a/static/usage/v7/toggle/label-placement/index.md
+++ b/static/usage/v7/toggle/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toggle/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v7/toggle/list/angular.md b/static/usage/v7/toggle/list/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/list/angular.md
rename to static/usage/v7/toggle/list/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/list/angular/example_component_ts.md b/static/usage/v7/toggle/list/angular/example_component_ts.md
new file mode 100644
index 0000000000..80a17959d0
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.md
index ad3aef2e12..91f18ff10d 100644
--- a/static/usage/v7/toggle/list/index.md
+++ b/static/usage/v7/toggle/list/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/list/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/list/demo.html"
+/>
diff --git a/static/usage/v7/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/on-off/angular.md
rename to static/usage/v7/toggle/on-off/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/on-off/angular/example_component_ts.md b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.md
index 00a4e4800a..f7660455a4 100644
--- a/static/usage/v7/toggle/on-off/index.md
+++ b/static/usage/v7/toggle/on-off/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/on-off/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/on-off/demo.html"
+/>
diff --git a/static/usage/v7/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toggle/theming/colors/angular.md
rename to static/usage/v7/toggle/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.md
index e67d2cf069..af9aa6700f 100644
--- a/static/usage/v7/toggle/theming/colors/index.md
+++ b/static/usage/v7/toggle/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/toggle/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toggle/theming/colors/demo.html"
+/>
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.md
index b7f767691f..fceacaf000 100644
--- a/static/usage/v7/toggle/theming/css-properties/index.md
+++ b/static/usage/v7/toggle/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/index.md b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
index 6241f8b029..4e6c98b918 100644
--- a/static/usage/v7/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v7/toolbar/basic/angular.md b/static/usage/v7/toolbar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toolbar/basic/angular.md
rename to static/usage/v7/toolbar/basic/angular/example_component_html.md
diff --git a/static/usage/v7/toolbar/basic/angular/example_component_ts.md b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0f1535b112
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/basic/index.md b/static/usage/v7/toolbar/basic/index.md
index 43cc48e1fe..9278617495 100644
--- a/static/usage/v7/toolbar/basic/index.md
+++ b/static/usage/v7/toolbar/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toolbar/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/buttons/angular/example_component_ts.md b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
index 7af150bd16..94e3d6ef6f 100644
--- a/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v7/toolbar/progress-bars/angular.md b/static/usage/v7/toolbar/progress-bars/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toolbar/progress-bars/angular.md
rename to static/usage/v7/toolbar/progress-bars/angular/example_component_html.md
diff --git a/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
new file mode 100644
index 0000000000..989441ea2b
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/progress-bars/index.md b/static/usage/v7/toolbar/progress-bars/index.md
index 067e8bed05..eef3350c81 100644
--- a/static/usage/v7/toolbar/progress-bars/index.md
+++ b/static/usage/v7/toolbar/progress-bars/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toolbar/progress-bars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/searchbars/angular.md b/static/usage/v7/toolbar/searchbars/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toolbar/searchbars/angular.md
rename to static/usage/v7/toolbar/searchbars/angular/example_component_html.md
diff --git a/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
new file mode 100644
index 0000000000..994d94b0a9
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/searchbars/index.md b/static/usage/v7/toolbar/searchbars/index.md
index c1327b9c45..4c0a044ea2 100644
--- a/static/usage/v7/toolbar/searchbars/index.md
+++ b/static/usage/v7/toolbar/searchbars/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toolbar/searchbars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toolbar/segments/angular.md
rename to static/usage/v7/toolbar/segments/angular/example_component_html.md
diff --git a/static/usage/v7/toolbar/segments/angular/example_component_ts.md b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
new file mode 100644
index 0000000000..3dc563173a
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/segments/index.md b/static/usage/v7/toolbar/segments/index.md
index 1cd0613d88..3ab676cfff 100644
--- a/static/usage/v7/toolbar/segments/index.md
+++ b/static/usage/v7/toolbar/segments/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toolbar/segments/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v7/toolbar/theming/colors/angular.md b/static/usage/v7/toolbar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/toolbar/theming/colors/angular.md
rename to static/usage/v7/toolbar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..680c14e048
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/theming/colors/index.md b/static/usage/v7/toolbar/theming/colors/index.md
index 686cc8df40..0be07354d2 100644
--- a/static/usage/v7/toolbar/theming/colors/index.md
+++ b/static/usage/v7/toolbar/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/toolbar/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..680c14e048
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.md
index 9ca22f52d0..1e7377339c 100644
--- a/static/usage/v7/toolbar/theming/css-properties/index.md
+++ b/static/usage/v7/toolbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/accordion/accessibility/animations/angular.md b/static/usage/v8/accordion/accessibility/animations/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/accessibility/animations/angular.md
rename to static/usage/v8/accordion/accessibility/animations/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/accessibility/animations/angular/example_component_ts.md b/static/usage/v8/accordion/accessibility/animations/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/accessibility/animations/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/accessibility/animations/index.md b/static/usage/v8/accordion/accessibility/animations/index.md
index 6529526e80..5fd7d05da4 100644
--- a/static/usage/v8/accordion/accessibility/animations/index.md
+++ b/static/usage/v8/accordion/accessibility/animations/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/accordion/accessibility/animations/demo.html"
 />
diff --git a/static/usage/v8/accordion/basic/angular.md b/static/usage/v8/accordion/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/basic/angular.md
rename to static/usage/v8/accordion/basic/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/basic/angular/example_component_ts.md b/static/usage/v8/accordion/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/basic/index.md b/static/usage/v8/accordion/basic/index.md
index 2f68543883..8e59be8724 100644
--- a/static/usage/v8/accordion/basic/index.md
+++ b/static/usage/v8/accordion/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/accordion/basic/demo.html"
   size="210px"
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
index 4db53a836a..b1a1813cc1 100644
--- a/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/angular.md b/static/usage/v8/accordion/customization/expansion-styles/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/customization/expansion-styles/angular.md
rename to static/usage/v8/accordion/customization/expansion-styles/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/customization/expansion-styles/angular/example_component_ts.md b/static/usage/v8/accordion/customization/expansion-styles/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/index.md b/static/usage/v8/accordion/customization/expansion-styles/index.md
index 9d1b7b0bad..ca5fedc169 100644
--- a/static/usage/v8/accordion/customization/expansion-styles/index.md
+++ b/static/usage/v8/accordion/customization/expansion-styles/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="250px"
   src="usage/v8/accordion/customization/expansion-styles/demo.html"
diff --git a/static/usage/v8/accordion/customization/icons/angular.md b/static/usage/v8/accordion/customization/icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/customization/icons/angular.md
rename to static/usage/v8/accordion/customization/icons/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v8/accordion/customization/icons/angular/example_component_ts.md
new file mode 100644
index 0000000000..ed5c7f01d9
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { caretDownCircle } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+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 });
+  }
+}
+```
diff --git a/static/usage/v8/accordion/customization/icons/index.md b/static/usage/v8/accordion/customization/icons/index.md
index fd33e08fe9..7d8bf4bbf8 100644
--- a/static/usage/v8/accordion/customization/icons/index.md
+++ b/static/usage/v8/accordion/customization/icons/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="250px"
   src="usage/v8/accordion/customization/icons/demo.html"
diff --git a/static/usage/v8/accordion/customization/theming/angular/example_component_ts.md b/static/usage/v8/accordion/customization/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/customization/theming/index.md b/static/usage/v8/accordion/customization/theming/index.md
index fd7198eda7..11e53c9897 100644
--- a/static/usage/v8/accordion/customization/theming/index.md
+++ b/static/usage/v8/accordion/customization/theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/accordion/disable-group/angular.md b/static/usage/v8/accordion/disable-group/angular.md
deleted file mode 100644
index 5c4cf3b51b..0000000000
--- a/static/usage/v8/accordion/disable-group/angular.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-accordion-group [disabled]="true">
-  <ion-accordion value="first">
-    <ion-item slot="header" color="light">
-      <ion-label>First Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">First Content</div>
-  </ion-accordion>
-  <ion-accordion value="second">
-    <ion-item slot="header" color="light">
-      <ion-label>Second Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Second Content</div>
-  </ion-accordion>
-  <ion-accordion value="third">
-    <ion-item slot="header" color="light">
-      <ion-label>Third Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Third Content</div>
-  </ion-accordion>
-</ion-accordion-group>
-```
diff --git a/static/usage/v8/accordion/disable-group/demo.html b/static/usage/v8/accordion/disable-group/demo.html
deleted file mode 100644
index 2b9dd56626..0000000000
--- a/static/usage/v8/accordion/disable-group/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-accordion-group disabled="true">
-            <ion-accordion value="first">
-              <ion-item slot="header" color="light">
-                <ion-label>First Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">First Content</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header" color="light">
-                <ion-label>Second Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Second Content</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header" color="light">
-                <ion-label>Third Accordion</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Third Content</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v8/accordion/disable-group/index.md b/static/usage/v8/accordion/disable-group/index.md
deleted file mode 100644
index 8b7c022593..0000000000
--- a/static/usage/v8/accordion/disable-group/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-import react from './react.md';
-import vue from './vue.md';
-import angular from './angular.md';
-
-<Playground
-  version="8"
-  code={{
-    javascript,
-    react,
-    vue,
-    angular,
-  }}
-  src="usage/v8/accordion/disable-group/demo.html"
-/>
diff --git a/static/usage/v8/accordion/disable-group/javascript.md b/static/usage/v8/accordion/disable-group/javascript.md
deleted file mode 100644
index 163641a544..0000000000
--- a/static/usage/v8/accordion/disable-group/javascript.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-accordion-group disabled="true">
-  <ion-accordion value="first">
-    <ion-item slot="header" color="light">
-      <ion-label>First Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">First Content</div>
-  </ion-accordion>
-  <ion-accordion value="second">
-    <ion-item slot="header" color="light">
-      <ion-label>Second Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Second Content</div>
-  </ion-accordion>
-  <ion-accordion value="third">
-    <ion-item slot="header" color="light">
-      <ion-label>Third Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Third Content</div>
-  </ion-accordion>
-</ion-accordion-group>
-```
diff --git a/static/usage/v8/accordion/disable-group/react.md b/static/usage/v8/accordion/disable-group/react.md
deleted file mode 100644
index b2ff09b5fe..0000000000
--- a/static/usage/v8/accordion/disable-group/react.md
+++ /dev/null
@@ -1,35 +0,0 @@
-```tsx
-import React from 'react';
-import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
-function Example() {
-  return (
-    <IonAccordionGroup disabled={true}>
-      <IonAccordion value="first">
-        <IonItem slot="header" color="light">
-          <IonLabel>First Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          First Content
-        </div>
-      </IonAccordion>
-      <IonAccordion value="second">
-        <IonItem slot="header" color="light">
-          <IonLabel>Second Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          Second Content
-        </div>
-      </IonAccordion>
-      <IonAccordion value="third">
-        <IonItem slot="header" color="light">
-          <IonLabel>Third Accordion</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          Third Content
-        </div>
-      </IonAccordion>
-    </IonAccordionGroup>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v8/accordion/disable-group/vue.md b/static/usage/v8/accordion/disable-group/vue.md
deleted file mode 100644
index 6c9e356784..0000000000
--- a/static/usage/v8/accordion/disable-group/vue.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```html
-<template>
-  <ion-accordion-group :disabled="true">
-    <ion-accordion value="first">
-      <ion-item slot="header" color="light">
-        <ion-label>First Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">First Content</div>
-    </ion-accordion>
-    <ion-accordion value="second">
-      <ion-item slot="header" color="light">
-        <ion-label>Second Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">Second Content</div>
-    </ion-accordion>
-    <ion-accordion value="third">
-      <ion-item slot="header" color="light">
-        <ion-label>Third Accordion</ion-label>
-      </ion-item>
-      <div class="ion-padding" slot="content">Third Content</div>
-    </ion-accordion>
-  </ion-accordion-group>
-</template>
-
-<script lang="ts">
-  import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
-  export default defineComponent({
-    components: {
-      IonAccordion,
-      IonAccordionGroup,
-      IonItem,
-      IonLabel,
-    },
-  });
-</script>
-```
diff --git a/static/usage/v8/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular.md
deleted file mode 100644
index 5c4cf3b51b..0000000000
--- a/static/usage/v8/accordion/disable/group/angular.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-accordion-group [disabled]="true">
-  <ion-accordion value="first">
-    <ion-item slot="header" color="light">
-      <ion-label>First Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">First Content</div>
-  </ion-accordion>
-  <ion-accordion value="second">
-    <ion-item slot="header" color="light">
-      <ion-label>Second Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Second Content</div>
-  </ion-accordion>
-  <ion-accordion value="third">
-    <ion-item slot="header" color="light">
-      <ion-label>Third Accordion</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">Third Content</div>
-  </ion-accordion>
-</ion-accordion-group>
-```
diff --git a/static/usage/v7/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular/example_component_html.md
similarity index 100%
rename from static/usage/v7/accordion/disable/group/angular.md
rename to static/usage/v8/accordion/disable/group/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/disable/group/angular/example_component_ts.md b/static/usage/v8/accordion/disable/group/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/disable/group/index.md b/static/usage/v8/accordion/disable/group/index.md
index df2ebb1afc..a19686a17f 100644
--- a/static/usage/v8/accordion/disable/group/index.md
+++ b/static/usage/v8/accordion/disable/group/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/accordion/disable/group/demo.html"
 />
diff --git a/static/usage/v8/accordion/disable/individual/angular.md b/static/usage/v8/accordion/disable/individual/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/disable/individual/angular.md
rename to static/usage/v8/accordion/disable/individual/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md b/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/disable/individual/index.md b/static/usage/v8/accordion/disable/individual/index.md
index 34e3110805..710beaa836 100644
--- a/static/usage/v8/accordion/disable/individual/index.md
+++ b/static/usage/v8/accordion/disable/individual/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="210px"
   src="usage/v8/accordion/disable/individual/demo.html"
diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
index 3ebbccce6f..24055f1533 100644
--- a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
@@ -1,14 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
 })
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];
 
-  accordionGroupChange = (ev: any) => {
+  accordionGroupChange = (ev: CustomEvent) => {
     const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
     const selectedValue = ev.detail.value;
 
diff --git a/static/usage/v8/accordion/multiple/angular.md b/static/usage/v8/accordion/multiple/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/multiple/angular.md
rename to static/usage/v8/accordion/multiple/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/multiple/angular/example_component_ts.md b/static/usage/v8/accordion/multiple/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/multiple/index.md b/static/usage/v8/accordion/multiple/index.md
index 0e1104ea9a..444b3bab7c 100644
--- a/static/usage/v8/accordion/multiple/index.md
+++ b/static/usage/v8/accordion/multiple/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="320px"
   src="usage/v8/accordion/multiple/demo.html"
diff --git a/static/usage/v8/accordion/readonly/group/angular.md b/static/usage/v8/accordion/readonly/group/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/readonly/group/angular.md
rename to static/usage/v8/accordion/readonly/group/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/readonly/group/angular/example_component_ts.md b/static/usage/v8/accordion/readonly/group/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/readonly/group/index.md b/static/usage/v8/accordion/readonly/group/index.md
index 940c7f6f31..78d70b650d 100644
--- a/static/usage/v8/accordion/readonly/group/index.md
+++ b/static/usage/v8/accordion/readonly/group/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="210px"
   src="usage/v8/accordion/readonly/group/demo.html"
diff --git a/static/usage/v8/accordion/readonly/individual/angular.md b/static/usage/v8/accordion/readonly/individual/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/accordion/readonly/individual/angular.md
rename to static/usage/v8/accordion/readonly/individual/angular/example_component_html.md
diff --git a/static/usage/v8/accordion/readonly/individual/angular/example_component_ts.md b/static/usage/v8/accordion/readonly/individual/angular/example_component_ts.md
new file mode 100644
index 0000000000..b1a1813cc1
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/accordion/readonly/individual/index.md b/static/usage/v8/accordion/readonly/individual/index.md
index 7a05160e76..be254cd38b 100644
--- a/static/usage/v8/accordion/readonly/individual/index.md
+++ b/static/usage/v8/accordion/readonly/individual/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/accordion/readonly/individual/demo.html"
 />
diff --git a/static/usage/v8/accordion/toggle/angular/example_component_ts.md b/static/usage/v8/accordion/toggle/angular/example_component_ts.md
index bdcac1d862..3afda996a1 100644
--- a/static/usage/v8/accordion/toggle/angular/example_component_ts.md
+++ b/static/usage/v8/accordion/toggle/angular/example_component_ts.md
@@ -1,13 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonAccordionGroup } from '@ionic/angular';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel],
 })
 export class ExampleComponent {
-  @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
+  @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup;
 
   toggleAccordion = () => {
     const nativeEl = this.accordionGroup;
diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md
index c7ecc27266..7257bcb45e 100644
--- a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ActionSheetController } from '@ionic/angular';
+import { ActionSheetController, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}
diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md
index 78d9ddf05c..df6c89aabe 100644
--- a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   isActionSheetOpen = false;
diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md
index f991151c4a..082f779fe1 100644
--- a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
index a38c0b9230..f0f7fcc8d5 100644
--- a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -1,10 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
+import type { OverlayEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
@@ -32,8 +35,8 @@ export class ExampleComponent {
 
   constructor() {}
 
-  logResult(ev) {
-    console.log(JSON.stringify(ev.detail, null, 2));
+  logResult(event: CustomEvent<OverlayEventDetail<string>>) {
+    console.log(JSON.stringify(event.detail, null, 2));
   }
 }
 ```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md
index d9714abb66..709135c1c1 100644
--- a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md
index d9714abb66..709135c1c1 100644
--- a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton],
 })
 export class ExampleComponent {
   public actionSheetButtons = [
diff --git a/static/usage/v8/alert/buttons/angular/example_component_ts.md b/static/usage/v8/alert/buttons/angular/example_component_ts.md
index 20858d60e4..55be132d67 100644
--- a/static/usage/v8/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/alert/buttons/angular/example_component_ts.md
@@ -1,9 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
+import type { OverlayEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = [
@@ -23,7 +27,8 @@ export class ExampleComponent {
     },
   ];
 
-  setResult(ev) {
+  setResult(event: Event) {
+    const ev = event as CustomEvent<OverlayEventDetail<string>>;
     console.log(`Dismissed with role: ${ev.detail.role}`);
   }
 }
diff --git a/static/usage/v8/alert/customization/angular/example_component_ts.md b/static/usage/v8/alert/customization/angular/example_component_ts.md
index 51552ff985..ebfd969430 100644
--- a/static/usage/v8/alert/customization/angular/example_component_ts.md
+++ b/static/usage/v8/alert/customization/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = [
diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md
index 34f44b288d..56ca5fedeb 100644
--- a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md
+++ b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = ['OK'];
diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md
index 713dc9067f..ae2c39e616 100644
--- a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md
+++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   public alertButtons = ['OK'];
diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md
index 6fdd69c7f6..baf0999fd3 100644
--- a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { AlertController, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private alertController: AlertController) {}
diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md
index 82d1f17e45..e2f5ccac60 100644
--- a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md
+++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   isAlertOpen = false;
diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md
index 9526ebdde8..7d7adf11d2 100644
--- a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md
+++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAlert, IonButton],
 })
 export class ExampleComponent {
   alertButtons = ['Action'];
diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md
index e8a1dae1af..eef9ba4482 100644
--- a/static/usage/v8/animations/basic/angular/example_component_ts.md
+++ b/static/usage/v8/animations/basic/angular/example_component_ts.md
@@ -1,17 +1,19 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md
index 36a7e22081..84ca1f2a47 100644
--- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md
+++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -1,40 +1,49 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
-    const card = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(0).nativeElement)
-      .duration(2000)
-      .beforeStyles({
-        filter: 'invert(75%)',
-      })
-      .beforeClearStyles(['box-shadow'])
-      .afterStyles({
-        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
-      })
-      .afterClearStyles(['filter'])
-      .keyframes([
-        { offset: 0, transform: 'scale(1)' },
-        { offset: 0.5, transform: 'scale(1.5)' },
-        { offset: 1, transform: 'scale(1)' },
-      ]);
-
-    this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+    const cardEl = this.cardElements.get(0);
+
+    const card = cardEl
+      ? this.animationCtrl
+          .create()
+          .addElement(cardEl.nativeElement)
+          .duration(2000)
+          .beforeStyles({
+            filter: 'invert(75%)',
+          })
+          .beforeClearStyles(['box-shadow'])
+          .afterStyles({
+            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+          })
+          .afterClearStyles(['filter'])
+          .keyframes([
+            { offset: 0, transform: 'scale(1)' },
+            { offset: 0.5, transform: 'scale(1.5)' },
+            { offset: 1, transform: 'scale(1)' },
+          ])
+      : null;
+
+    if (card) {
+      this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+    }
   }
 
   play() {
diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md
index 6c6acbef99..ac8959f5fa 100644
--- a/static/usage/v8/animations/chain/angular/example_component_ts.md
+++ b/static/usage/v8/animations/chain/angular/example_component_ts.md
@@ -1,73 +1,86 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private cardA: Animation;
-  private cardB: Animation;
-  private cardC: Animation;
+  private cardA!: Animation | null;
+  private cardB!: Animation | null;
+  private cardC!: Animation | null;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
-    this.cardA = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(0).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1) rotate(0)' },
-        { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-        { offset: 1, transform: 'scale(1) rotate(0)' },
-      ]);
+    const cardElA = this.cardElements.get(0);
+    const cardElB = this.cardElements.get(1);
+    const cardElC = this.cardElements.get(2);
 
-    this.cardB = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(1).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1)', opacity: '1' },
-        { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-        { offset: 1, transform: 'scale(1)', opacity: '1' },
-      ]);
+    this.cardA = cardElA
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElA.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1) rotate(0)' },
+            { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+            { offset: 1, transform: 'scale(1) rotate(0)' },
+          ])
+      : null;
 
-    this.cardC = this.animationCtrl
-      .create()
-      .addElement(this.cardElements.get(2).nativeElement)
-      .fill('none')
-      .duration(1000)
-      .keyframes([
-        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-        { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
-      ]);
+    this.cardB = cardElB
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElB.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '1' },
+            { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+            { offset: 1, transform: 'scale(1)', opacity: '1' },
+          ])
+      : null;
+
+    this.cardC = cardElC
+      ? this.animationCtrl
+          .create()
+          .addElement(cardElC.nativeElement)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+            { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+          ])
+      : null;
   }
 
   async play() {
-    await this.cardA.play();
-    await this.cardB.play();
-    await this.cardC.play();
+    await this.cardA?.play();
+    await this.cardB?.play();
+    await this.cardC?.play();
   }
 
   pause() {
-    this.cardA.pause();
-    this.cardB.pause();
-    this.cardC.pause();
+    this.cardA?.pause();
+    this.cardB?.pause();
+    this.cardC?.pause();
   }
 
-  stop() {
-    this.cardA.stop();
-    this.cardB.stop();
-    this.cardC.stop();
+  async stop() {
+    await this.cardA?.stop();
+    await this.cardB?.stop();
+    await this.cardC?.stop();
   }
 }
 ```
diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md
index 7b9aadccf5..49bb9e92f6 100644
--- a/static/usage/v8/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md
@@ -1,18 +1,19 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, IonCard } from '@ionic/angular';
-import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
-  private gesture: Gesture;
+  private animation!: Animation;
+  private gesture!: Gesture;
   private started = false;
   private initialStep = 0;
 
diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md
index 63f7a7b2f7..a75e3041da 100644
--- a/static/usage/v8/animations/group/angular/example_component_ts.md
+++ b/static/usage/v8/animations/group/angular/example_component_ts.md
@@ -1,33 +1,36 @@
 ```ts
 import { Component, ElementRef, ViewChildren } from '@angular/core';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
     const cardA = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(0).nativeElement)
+      .addElement(this.cardElements.get(0)!.nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1) rotate(0)' },
         { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-        { offset: 1, transform: 'scale(1) rotate(0) ' },
+        { offset: 1, transform: 'scale(1) rotate(0)' },
       ]);
 
     const cardB = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(1).nativeElement)
+      .addElement(this.cardElements.get(1)!.nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '1' },
         { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -36,7 +39,7 @@ export class ExampleComponent {
 
     const cardC = this.animationCtrl
       .create()
-      .addElement(this.cardElements.get(2).nativeElement)
+      .addElement(this.cardElements.get(2)!.nativeElement)
       .duration(5000)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '0.5' },
@@ -48,7 +51,7 @@ export class ExampleComponent {
       .create()
       .duration(2000)
       .iterations(Infinity)
-      .addAnimation([cardA, cardB, cardC]);
+      .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]);
   }
 
   play() {
diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md
index 4ee04bea42..d6739439d9 100644
--- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md
+++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md
@@ -1,16 +1,19 @@
 ```ts
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md
index b1fe997c1d..21dd0d187c 100644
--- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md
+++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md
@@ -1,14 +1,24 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import type { IonModal } from '@ionic/angular';
-import { AnimationController } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('modal', { static: true }) modal: IonModal;
+  @ViewChild('modal', { static: true }) modal!: IonModal;
 
   constructor(private animationCtrl: AnimationController) {}
 
@@ -16,18 +26,22 @@ export class ExampleComponent {
     const enterAnimation = (baseEl: HTMLElement) => {
       const root = baseEl.shadowRoot;
 
+      const backdropElement = root?.querySelector('ion-backdrop');
+      const wrapperElement = root?.querySelector('.modal-wrapper');
+
       const backdropAnimation = this.animationCtrl
         .create()
-        .addElement(root.querySelector('ion-backdrop'))
+        .addElement(backdropElement || baseEl)
         .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
-      const wrapperAnimation = this.animationCtrl
-        .create()
-        .addElement(root.querySelector('.modal-wrapper'))
-        .keyframes([
+      const wrapperAnimation = this.animationCtrl.create();
+
+      if (wrapperElement) {
+        wrapperAnimation.addElement(wrapperElement).keyframes([
           { offset: 0, opacity: '0', transform: 'scale(0)' },
           { offset: 1, opacity: '0.99', transform: 'scale(1)' },
         ]);
+      }
 
       return this.animationCtrl
         .create()
diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md
index c0e383d5ec..40e672d585 100644
--- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md
+++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md
@@ -1,18 +1,19 @@
 ```ts
-import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
+import type { Animation } from '@ionic/angular/standalone';
+import { AnimationController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
-  private animation: Animation;
+  private animation!: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
diff --git a/static/usage/v8/app/set-focus/angular/example_component_ts.md b/static/usage/v8/app/set-focus/angular/example_component_ts.md
index 9970bf3e4d..9c836bc842 100644
--- a/static/usage/v8/app/set-focus/angular/example_component_ts.md
+++ b/static/usage/v8/app/set-focus/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonRadio, IonRadioGroup],
 })
 export class ExampleComponent {
   focusElement(id: string) {
diff --git a/static/usage/v8/avatar/basic/angular.md b/static/usage/v8/avatar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/avatar/basic/angular.md
rename to static/usage/v8/avatar/basic/angular/example_component_html.md
diff --git a/static/usage/v8/avatar/basic/angular/example_component_ts.md b/static/usage/v8/avatar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..effe558024
--- /dev/null
+++ b/static/usage/v8/avatar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/avatar/basic/index.md b/static/usage/v8/avatar/basic/index.md
index 6655efc656..c3a0a19015 100644
--- a/static/usage/v8/avatar/basic/index.md
+++ b/static/usage/v8/avatar/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/avatar/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/avatar/basic/demo.html"
+/>
diff --git a/static/usage/v8/avatar/chip/angular.md b/static/usage/v8/avatar/chip/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/avatar/chip/angular.md
rename to static/usage/v8/avatar/chip/angular/example_component_html.md
diff --git a/static/usage/v8/avatar/chip/angular/example_component_ts.md b/static/usage/v8/avatar/chip/angular/example_component_ts.md
new file mode 100644
index 0000000000..244bc7b789
--- /dev/null
+++ b/static/usage/v8/avatar/chip/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonChip, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonChip, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/avatar/chip/index.md b/static/usage/v8/avatar/chip/index.md
index 21c571e6c2..b46cf0896e 100644
--- a/static/usage/v8/avatar/chip/index.md
+++ b/static/usage/v8/avatar/chip/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/avatar/chip/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/avatar/chip/demo.html"
+/>
diff --git a/static/usage/v8/avatar/item/angular.md b/static/usage/v8/avatar/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/avatar/item/angular.md
rename to static/usage/v8/avatar/item/angular/example_component_html.md
diff --git a/static/usage/v8/avatar/item/angular/example_component_ts.md b/static/usage/v8/avatar/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..80785adaf8
--- /dev/null
+++ b/static/usage/v8/avatar/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/avatar/item/index.md b/static/usage/v8/avatar/item/index.md
index ef0b525815..801c0ba268 100644
--- a/static/usage/v8/avatar/item/index.md
+++ b/static/usage/v8/avatar/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/avatar/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/avatar/item/demo.html"
+/>
diff --git a/static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..effe558024
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/index.md b/static/usage/v8/avatar/theming/css-properties/index.md
index 3e4dfeb4f1..bad5605bc4 100644
--- a/static/usage/v8/avatar/theming/css-properties/index.md
+++ b/static/usage/v8/avatar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/back-button/basic/angular/app_module_ts.md b/static/usage/v8/back-button/basic/angular/app_module_ts.md
deleted file mode 100644
index 3c20b51144..0000000000
--- a/static/usage/v8/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/v8/back-button/basic/angular/example_component_ts.md b/static/usage/v8/back-button/basic/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v8/back-button/basic/angular/example_component_ts.md
+++ b/static/usage/v8/back-button/basic/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v8/back-button/basic/angular/page_one_component_ts.md b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md
index d181c5a526..2f9b78ab16 100644
--- a/static/usage/v8/back-button/basic/angular/page_one_component_ts.md
+++ b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md
index b2cda11d2a..55048bd7b2 100644
--- a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md
+++ b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +18,7 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {}
 ```
diff --git a/static/usage/v8/back-button/basic/index.md b/static/usage/v8/back-button/basic/index.md
index f3d4197adc..0031b6eadd 100644
--- a/static/usage/v8/back-button/basic/index.md
+++ b/static/usage/v8/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/v8/back-button/custom/angular/app_module_ts.md b/static/usage/v8/back-button/custom/angular/app_module_ts.md
deleted file mode 100644
index 3c20b51144..0000000000
--- a/static/usage/v8/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/v8/back-button/custom/angular/example_component_ts.md b/static/usage/v8/back-button/custom/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v8/back-button/custom/angular/example_component_ts.md
+++ b/static/usage/v8/back-button/custom/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md
index d181c5a526..2f9b78ab16 100644
--- a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md
+++ b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md
index 05a1bd64d7..b0fb5a01ec 100644
--- a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md
+++ b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md
@@ -1,5 +1,9 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { caretBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-page-two',
@@ -17,6 +21,16 @@ import { Component } from '@angular/core';
       <p>Use the back button to navigate to the previous page.</p>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
-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/v8/back-button/custom/index.md b/static/usage/v8/back-button/custom/index.md
index 43614d4b44..80141c28ca 100644
--- a/static/usage/v8/back-button/custom/index.md
+++ b/static/usage/v8/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: {
diff --git a/static/usage/v8/backdrop/basic/angular/example_component_ts.md b/static/usage/v8/backdrop/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..c4809eb965
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonBackdrop,
+  IonButton,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/backdrop/basic/index.md b/static/usage/v8/backdrop/basic/index.md
index fd85d2b411..553124f646 100644
--- a/static/usage/v8/backdrop/basic/index.md
+++ b/static/usage/v8/backdrop/basic/index.md
@@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_html from './angular/example_component_html.md'
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/backdrop/styling/angular/example_component_ts.md b/static/usage/v8/backdrop/styling/angular/example_component_ts.md
new file mode 100644
index 0000000000..ebf285b93a
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonBackdrop,
+  IonButton,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/backdrop/styling/index.md b/static/usage/v8/backdrop/styling/index.md
index d5323c425f..3cb073ed0c 100644
--- a/static/usage/v8/backdrop/styling/index.md
+++ b/static/usage/v8/backdrop/styling/index.md
@@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/badge/basic/angular.md b/static/usage/v8/badge/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/badge/basic/angular.md
rename to static/usage/v8/badge/basic/angular/example_component_html.md
diff --git a/static/usage/v8/badge/basic/angular/example_component_ts.md b/static/usage/v8/badge/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v8/badge/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/badge/basic/index.md b/static/usage/v8/badge/basic/index.md
index 6c15d3150c..058f7ff362 100644
--- a/static/usage/v8/badge/basic/index.md
+++ b/static/usage/v8/badge/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/badge/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/badge/basic/demo.html"
+/>
diff --git a/static/usage/v8/badge/theming/colors/angular.md b/static/usage/v8/badge/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/badge/theming/colors/angular.md
rename to static/usage/v8/badge/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/badge/theming/colors/angular/example_component_ts.md b/static/usage/v8/badge/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/badge/theming/colors/index.md b/static/usage/v8/badge/theming/colors/index.md
index dedf7570d7..ebb93bc7a1 100644
--- a/static/usage/v8/badge/theming/colors/index.md
+++ b/static/usage/v8/badge/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/badge/theming/colors/demo.html"
 />
diff --git a/static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..73c490c224
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBadge, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/badge/theming/css-properties/index.md b/static/usage/v8/badge/theming/css-properties/index.md
index f52a73262c..73f088f4aa 100644
--- a/static/usage/v8/badge/theming/css-properties/index.md
+++ b/static/usage/v8/badge/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/breadcrumbs/basic/angular.md b/static/usage/v8/breadcrumbs/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/breadcrumbs/basic/angular.md
rename to static/usage/v8/breadcrumbs/basic/angular/example_component_html.md
diff --git a/static/usage/v8/breadcrumbs/basic/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/breadcrumbs/basic/index.md b/static/usage/v8/breadcrumbs/basic/index.md
index 4a8f628576..e32be1d737 100644
--- a/static/usage/v8/breadcrumbs/basic/index.md
+++ b/static/usage/v8/breadcrumbs/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/breadcrumbs/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/breadcrumbs/basic/demo.html"
+/>
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
index 8ae69af72a..269836b83d 100644
--- a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
 })
 export class ExampleComponent {
-  maxBreadcrumbs = 4;
+  maxBreadcrumbs? = 4;
 
   expandBreadcrumbs() {
     this.maxBreadcrumbs = undefined;
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md
rename to static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md
index cdceec0621..0661fe7a68 100644
--- a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html"
 />
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md
rename to static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md
index 1b8e19f586..cbdd3270f5 100644
--- a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/breadcrumbs/collapsing-items/max-items/demo.html"
 />
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
index e3c0462a14..abd91bba07 100644
--- a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
@@ -11,13 +11,11 @@
   <ng-template>
     <ion-content>
       <ion-list>
-        <ion-item
-          *ngFor="let breadcrumb of collapsedBreadcrumbs; last as isLast"
-          [href]="breadcrumb.href"
-          [lines]="isLast ? 'none' : null"
-        >
+        @for (breadcrumb of collapsedBreadcrumbs; track breadcrumb; let last = $last) {
+        <ion-item [href]="breadcrumb.href" [lines]="last ? 'none' : null">
           <ion-label>{{ breadcrumb.textContent }}</ion-label>
         </ion-item>
+        }
       </ion-list>
     </ion-content>
   </ng-template>
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
index aabfb29a82..17d100420d 100644
--- a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -1,12 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPopover,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
   collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
index 072f2c1090..2634a7a252 100644
--- a/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { arrowForwardCircle } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { arrowForwardCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
index ccc9439a38..474da49689 100644
--- a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { camera, film, flash, home } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { camera, film, flash, home } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular.md b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/breadcrumbs/theming/colors/angular.md
rename to static/usage/v8/breadcrumbs/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/breadcrumbs/theming/colors/index.md b/static/usage/v8/breadcrumbs/theming/colors/index.md
index df68242f93..0974c00303 100644
--- a/static/usage/v8/breadcrumbs/theming/colors/index.md
+++ b/static/usage/v8/breadcrumbs/theming/colors/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/breadcrumbs/theming/colors/demo.html"
 />
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..6b8add8610
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonBreadcrumb, IonBreadcrumbs],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/index.md b/static/usage/v8/breadcrumbs/theming/css-properties/index.md
index 45726c2da9..a9e9deb311 100644
--- a/static/usage/v8/breadcrumbs/theming/css-properties/index.md
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -22,8 +23,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/button/basic/angular.md b/static/usage/v8/button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/basic/angular.md
rename to static/usage/v8/button/basic/angular/example_component_html.md
diff --git a/static/usage/v8/button/basic/angular/example_component_ts.md b/static/usage/v8/button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/basic/index.md b/static/usage/v8/button/basic/index.md
index 2342f91a35..d01313855e 100644
--- a/static/usage/v8/button/basic/index.md
+++ b/static/usage/v8/button/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/basic/demo.html"
+/>
diff --git a/static/usage/v8/button/expand/angular.md b/static/usage/v8/button/expand/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/expand/angular.md
rename to static/usage/v8/button/expand/angular/example_component_html.md
diff --git a/static/usage/v8/button/expand/angular/example_component_ts.md b/static/usage/v8/button/expand/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/expand/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/expand/index.md b/static/usage/v8/button/expand/index.md
index 3bf460ada3..8fa9447fd2 100644
--- a/static/usage/v8/button/expand/index.md
+++ b/static/usage/v8/button/expand/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/expand/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/expand/demo.html"
+/>
diff --git a/static/usage/v8/button/fill/angular.md b/static/usage/v8/button/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/fill/angular.md
rename to static/usage/v8/button/fill/angular/example_component_html.md
diff --git a/static/usage/v8/button/fill/angular/example_component_ts.md b/static/usage/v8/button/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/fill/index.md b/static/usage/v8/button/fill/index.md
index b34226a0d1..8418e46d1a 100644
--- a/static/usage/v8/button/fill/index.md
+++ b/static/usage/v8/button/fill/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/fill/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/fill/demo.html"
+/>
diff --git a/static/usage/v8/button/icons/angular/example_component_ts.md b/static/usage/v8/button/icons/angular/example_component_ts.md
index ecbdde79de..3987b3b09a 100644
--- a/static/usage/v8/button/icons/angular/example_component_ts.md
+++ b/static/usage/v8/button/icons/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/button/shape/angular/example_component_ts.md b/static/usage/v8/button/shape/angular/example_component_ts.md
index 6e815b2531..74c70c218a 100644
--- a/static/usage/v8/button/shape/angular/example_component_ts.md
+++ b/static/usage/v8/button/shape/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { heart } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { heart } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/button/size/angular.md b/static/usage/v8/button/size/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/size/angular.md
rename to static/usage/v8/button/size/angular/example_component_html.md
diff --git a/static/usage/v8/button/size/angular/example_component_ts.md b/static/usage/v8/button/size/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/size/index.md b/static/usage/v8/button/size/index.md
index 8f25ec4464..2c0b97b223 100644
--- a/static/usage/v8/button/size/index.md
+++ b/static/usage/v8/button/size/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/size/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/size/demo.html"
+/>
diff --git a/static/usage/v8/button/text-wrapping/angular.md b/static/usage/v8/button/text-wrapping/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/text-wrapping/angular.md
rename to static/usage/v8/button/text-wrapping/angular/example_component_html.md
diff --git a/static/usage/v8/button/text-wrapping/angular/example_component_ts.md b/static/usage/v8/button/text-wrapping/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/text-wrapping/index.md b/static/usage/v8/button/text-wrapping/index.md
index 5ca882379b..9afe281724 100644
--- a/static/usage/v8/button/text-wrapping/index.md
+++ b/static/usage/v8/button/text-wrapping/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/text-wrapping/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/text-wrapping/demo.html"
+/>
diff --git a/static/usage/v8/button/theming/colors/angular.md b/static/usage/v8/button/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/button/theming/colors/angular.md
rename to static/usage/v8/button/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/button/theming/colors/angular/example_component_ts.md b/static/usage/v8/button/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/theming/colors/index.md b/static/usage/v8/button/theming/colors/index.md
index 21ab85f8eb..f5cb7f1158 100644
--- a/static/usage/v8/button/theming/colors/index.md
+++ b/static/usage/v8/button/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/button/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/button/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/button/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/button/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..403e44caae
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/button/theming/css-properties/index.md b/static/usage/v8/button/theming/css-properties/index.md
index 0cc6adf46c..7a03fb574b 100644
--- a/static/usage/v8/button/theming/css-properties/index.md
+++ b/static/usage/v8/button/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/buttons/basic/angular.md b/static/usage/v8/buttons/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/buttons/basic/angular.md
rename to static/usage/v8/buttons/basic/angular/example_component_html.md
diff --git a/static/usage/v8/buttons/basic/angular/example_component_ts.md b/static/usage/v8/buttons/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd7b99299d
--- /dev/null
+++ b/static/usage/v8/buttons/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/buttons/basic/index.md b/static/usage/v8/buttons/basic/index.md
index 0be4210411..2f84065d60 100644
--- a/static/usage/v8/buttons/basic/index.md
+++ b/static/usage/v8/buttons/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/buttons/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/buttons/basic/demo.html"
+/>
diff --git a/static/usage/v8/buttons/placement/angular.md b/static/usage/v8/buttons/placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/buttons/placement/angular.md
rename to static/usage/v8/buttons/placement/angular/example_component_html.md
diff --git a/static/usage/v8/buttons/placement/angular/example_component_ts.md b/static/usage/v8/buttons/placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd7b99299d
--- /dev/null
+++ b/static/usage/v8/buttons/placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/buttons/placement/index.md b/static/usage/v8/buttons/placement/index.md
index 3420c56408..bdb882d7bf 100644
--- a/static/usage/v8/buttons/placement/index.md
+++ b/static/usage/v8/buttons/placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/buttons/placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/buttons/placement/demo.html"
+/>
diff --git a/static/usage/v8/buttons/types/angular/example_component_ts.md b/static/usage/v8/buttons/types/angular/example_component_ts.md
index 7af150bd16..94e3d6ef6f 100644
--- a/static/usage/v8/buttons/types/angular/example_component_ts.md
+++ b/static/usage/v8/buttons/types/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/card/basic/angular.md b/static/usage/v8/card/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/card/basic/angular.md
rename to static/usage/v8/card/basic/angular/example_component_html.md
diff --git a/static/usage/v8/card/basic/angular/example_component_ts.md b/static/usage/v8/card/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v8/card/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/basic/index.md b/static/usage/v8/card/basic/index.md
index 1f6c20f270..dbd09a796c 100644
--- a/static/usage/v8/card/basic/index.md
+++ b/static/usage/v8/card/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/card/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/card/basic/demo.html"
+/>
diff --git a/static/usage/v8/card/buttons/angular.md b/static/usage/v8/card/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/card/buttons/angular.md
rename to static/usage/v8/card/buttons/angular/example_component_html.md
diff --git a/static/usage/v8/card/buttons/angular/example_component_ts.md b/static/usage/v8/card/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..74ee512cb4
--- /dev/null
+++ b/static/usage/v8/card/buttons/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/buttons/index.md b/static/usage/v8/card/buttons/index.md
index 46e17cf4b1..32789fcccb 100644
--- a/static/usage/v8/card/buttons/index.md
+++ b/static/usage/v8/card/buttons/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/card/buttons/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/card/buttons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/card/list/angular/example_component_ts.md b/static/usage/v8/card/list/angular/example_component_ts.md
new file mode 100644
index 0000000000..204d500d31
--- /dev/null
+++ b/static/usage/v8/card/list/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonThumbnail,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardSubtitle,
+    IonCardTitle,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonThumbnail,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/list/index.md b/static/usage/v8/card/list/index.md
index b20109f53b..76ad0a14e5 100644
--- a/static/usage/v8/card/list/index.md
+++ b/static/usage/v8/card/list/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/card/media/angular.md b/static/usage/v8/card/media/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/card/media/angular.md
rename to static/usage/v8/card/media/angular/example_component_html.md
diff --git a/static/usage/v8/card/media/angular/example_component_ts.md b/static/usage/v8/card/media/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v8/card/media/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/media/index.md b/static/usage/v8/card/media/index.md
index b8ed3cca56..c1a877371a 100644
--- a/static/usage/v8/card/media/index.md
+++ b/static/usage/v8/card/media/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/card/media/demo.html" size="350px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/card/media/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v8/card/theming/colors/angular.md b/static/usage/v8/card/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/card/theming/colors/angular.md
rename to static/usage/v8/card/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/card/theming/colors/angular/example_component_ts.md b/static/usage/v8/card/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/theming/colors/index.md b/static/usage/v8/card/theming/colors/index.md
index 385e21c7c6..5afcf9e560 100644
--- a/static/usage/v8/card/theming/colors/index.md
+++ b/static/usage/v8/card/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/card/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v8/card/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/card/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d35351dd78
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/card/theming/css-properties/index.md b/static/usage/v8/card/theming/css-properties/index.md
index 1181a8e4f6..009a7bcddf 100644
--- a/static/usage/v8/card/theming/css-properties/index.md
+++ b/static/usage/v8/card/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/checkbox/alignment/angular.md b/static/usage/v8/checkbox/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/alignment/angular.md
rename to static/usage/v8/checkbox/alignment/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/alignment/angular/example_component_ts.md b/static/usage/v8/checkbox/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..b6b56f82f5
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/alignment/index.md b/static/usage/v8/checkbox/alignment/index.md
index 5192cffcfb..6b3fca2227 100644
--- a/static/usage/v8/checkbox/alignment/index.md
+++ b/static/usage/v8/checkbox/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/checkbox/alignment/demo.html"
 />
diff --git a/static/usage/v8/checkbox/basic/angular.md b/static/usage/v8/checkbox/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/basic/angular.md
rename to static/usage/v8/checkbox/basic/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/basic/angular/example_component_ts.md b/static/usage/v8/checkbox/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/basic/index.md b/static/usage/v8/checkbox/basic/index.md
index 7eac2e6b12..686e082798 100644
--- a/static/usage/v8/checkbox/basic/index.md
+++ b/static/usage/v8/checkbox/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/checkbox/basic/demo.html"
 />
diff --git a/static/usage/v8/checkbox/indeterminate/angular.md b/static/usage/v8/checkbox/indeterminate/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/indeterminate/angular.md
rename to static/usage/v8/checkbox/indeterminate/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md b/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/indeterminate/index.md b/static/usage/v8/checkbox/indeterminate/index.md
index 5ab8784522..43514e0b2d 100644
--- a/static/usage/v8/checkbox/indeterminate/index.md
+++ b/static/usage/v8/checkbox/indeterminate/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/checkbox/indeterminate/demo.html"
 />
diff --git a/static/usage/v8/checkbox/justify/angular.md b/static/usage/v8/checkbox/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/justify/angular.md
rename to static/usage/v8/checkbox/justify/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/justify/angular/example_component_ts.md b/static/usage/v8/checkbox/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..b6b56f82f5
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/justify/index.md b/static/usage/v8/checkbox/justify/index.md
index 2e08aaf0b7..1df7c12e5d 100644
--- a/static/usage/v8/checkbox/justify/index.md
+++ b/static/usage/v8/checkbox/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/checkbox/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/checkbox/justify/demo.html"
+/>
diff --git a/static/usage/v8/checkbox/label-link/angular.md b/static/usage/v8/checkbox/label-link/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/label-link/angular.md
rename to static/usage/v8/checkbox/label-link/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/label-link/angular/example_component_ts.md b/static/usage/v8/checkbox/label-link/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/label-link/index.md b/static/usage/v8/checkbox/label-link/index.md
index c368f3c374..c6b6e82a83 100644
--- a/static/usage/v8/checkbox/label-link/index.md
+++ b/static/usage/v8/checkbox/label-link/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/checkbox/label-link/demo.html"
 />
diff --git a/static/usage/v8/checkbox/label-placement/angular.md b/static/usage/v8/checkbox/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/checkbox/label-placement/angular.md
rename to static/usage/v8/checkbox/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md b/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/label-placement/index.md b/static/usage/v8/checkbox/label-placement/index.md
index 90a28f0669..70e3ed29e3 100644
--- a/static/usage/v8/checkbox/label-placement/index.md
+++ b/static/usage/v8/checkbox/label-placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/checkbox/label-placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/checkbox/label-placement/demo.html"
+/>
diff --git a/static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..0d67119a86
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/index.md b/static/usage/v8/checkbox/theming/css-properties/index.md
index b4a4e04917..b64b47485a 100644
--- a/static/usage/v8/checkbox/theming/css-properties/index.md
+++ b/static/usage/v8/checkbox/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/chip/basic/angular.md b/static/usage/v8/chip/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/chip/basic/angular.md
rename to static/usage/v8/chip/basic/angular/example_component_html.md
diff --git a/static/usage/v8/chip/basic/angular/example_component_ts.md b/static/usage/v8/chip/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v8/chip/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/chip/basic/index.md b/static/usage/v8/chip/basic/index.md
index 5620d40352..0646945df2 100644
--- a/static/usage/v8/chip/basic/index.md
+++ b/static/usage/v8/chip/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/chip/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/chip/basic/demo.html"
+/>
diff --git a/static/usage/v8/chip/slots/angular/example_component_ts.md b/static/usage/v8/chip/slots/angular/example_component_ts.md
index 6b388ef38d..5edb3cd886 100644
--- a/static/usage/v8/chip/slots/angular/example_component_ts.md
+++ b/static/usage/v8/chip/slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { close, closeCircle, pin } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { close, closeCircle, pin } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonChip, IonIcon, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/chip/theming/colors/angular.md b/static/usage/v8/chip/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/chip/theming/colors/angular.md
rename to static/usage/v8/chip/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/chip/theming/colors/angular/example_component_ts.md b/static/usage/v8/chip/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/chip/theming/colors/index.md b/static/usage/v8/chip/theming/colors/index.md
index e0e5188b2f..0be46b82fc 100644
--- a/static/usage/v8/chip/theming/colors/index.md
+++ b/static/usage/v8/chip/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/chip/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/chip/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..0cfbf3e1a7
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonChip],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/chip/theming/css-properties/index.md b/static/usage/v8/chip/theming/css-properties/index.md
index 5ddfdd87f3..26a973eb23 100644
--- a/static/usage/v8/chip/theming/css-properties/index.md
+++ b/static/usage/v8/chip/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/content/basic/angular.md b/static/usage/v8/content/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/content/basic/angular.md
rename to static/usage/v8/content/basic/angular/example_component_html.md
diff --git a/static/usage/v8/content/basic/angular/example_component_ts.md b/static/usage/v8/content/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v8/content/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/basic/index.md b/static/usage/v8/content/basic/index.md
index f45e2284c7..3b074d2d9b 100644
--- a/static/usage/v8/content/basic/index.md
+++ b/static/usage/v8/content/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/content/basic/demo.html"
   includeIonContent={false}
   devicePreview={true}
diff --git a/static/usage/v8/content/fixed/angular.md b/static/usage/v8/content/fixed/angular.md
deleted file mode 100644
index 82cb300712..0000000000
--- a/static/usage/v8/content/fixed/angular.md
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<ion-content class="ion-padding">
-  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
-
-  <ion-button>Normal Button</ion-button>
-  <ion-button slot="fixed">Fixed Button</ion-button>
-
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
-    risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
-    sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
-    Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
-    ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
-    placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
-    placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
-    neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
-    nulla sit amet erat malesuada euismod vel a nulla.
-  </p>
-  <p>
-    Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
-    venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
-    sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
-    lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
-    faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
-    maximus.
-  </p>
-  <p>
-    Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
-    tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
-    elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
-    justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
-    ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
-    Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
-    turpis.
-  </p>
-  <p>
-    Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
-    fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
-    facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
-    sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
-    lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
-    condimentum fermentum rutrum.
-  </p>
-  <p>
-    Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
-    eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
-    venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
-    ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
-    Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
-    semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
-    sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
-  </p>
-</ion-content>
-```
diff --git a/static/usage/v8/content/fixed/angular/example_component_ts.md b/static/usage/v8/content/fixed/angular/example_component_ts.md
new file mode 100644
index 0000000000..38a7b14090
--- /dev/null
+++ b/static/usage/v8/content/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/fixed/index.md b/static/usage/v8/content/fixed/index.md
index 700fc713ec..053c95f17f 100644
--- a/static/usage/v8/content/fixed/index.md
+++ b/static/usage/v8/content/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/content/fixed/react.md b/static/usage/v8/content/fixed/react.md
deleted file mode 100644
index 55d5e1b936..0000000000
--- a/static/usage/v8/content/fixed/react.md
+++ /dev/null
@@ -1,62 +0,0 @@
-```tsx
-import React from 'react';
-import { IonButton, IonContent } from '@ionic/react';
-
-function Example() {
-  return (
-    <IonContent className="ion-padding">
-      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
-
-      <IonButton>Normal Button</IonButton>
-      <IonButton slot="fixed">Fixed Button</IonButton>
-
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
-        in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
-        sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
-        neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
-        blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
-        justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
-        Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
-        mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
-        dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
-      </p>
-      <p>
-        Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
-        venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
-        sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
-        sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
-        et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
-        tristique maximus.
-      </p>
-      <p>
-        Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
-        tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
-        et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
-        faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
-        venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
-        sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
-        molestie sed, pretium vitae turpis.
-      </p>
-      <p>
-        Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
-        sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
-        amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
-        Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
-        vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
-        at. Mauris condimentum fermentum rutrum.
-      </p>
-      <p>
-        Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
-        mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
-        enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
-        orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
-        cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
-        vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
-        egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
-      </p>
-    </IonContent>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v8/content/fullscreen/angular/example_component_ts.md b/static/usage/v8/content/fullscreen/angular/example_component_ts.md
new file mode 100644
index 0000000000..5180063af5
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/fullscreen/index.md b/static/usage/v8/content/fullscreen/index.md
index 82db6d82b0..db5a804ac7 100644
--- a/static/usage/v8/content/fullscreen/index.md
+++ b/static/usage/v8/content/fullscreen/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/content/header-footer/angular.md b/static/usage/v8/content/header-footer/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/content/header-footer/angular.md
rename to static/usage/v8/content/header-footer/angular/example_component_html.md
diff --git a/static/usage/v8/content/header-footer/angular/example_component_ts.md b/static/usage/v8/content/header-footer/angular/example_component_ts.md
new file mode 100644
index 0000000000..5180063af5
--- /dev/null
+++ b/static/usage/v8/content/header-footer/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/header-footer/index.md b/static/usage/v8/content/header-footer/index.md
index 1036703931..3cbe0749d4 100644
--- a/static/usage/v8/content/header-footer/index.md
+++ b/static/usage/v8/content/header-footer/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/content/header-footer/demo.html"
   includeIonContent={false}
   devicePreview={true}
diff --git a/static/usage/v8/content/scroll-events/angular/example_component_ts.md b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
index ffd3d5b6d1..248333cb20 100644
--- a/static/usage/v8/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ScrollDetail } from '@ionic/angular';
+import { IonContent, ScrollDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
 })
 export class ExampleComponent {
   handleScrollStart() {
diff --git a/static/usage/v8/content/scroll-methods/angular/example_component_ts.md b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md
index 1975fe3b34..0551d8df31 100644
--- a/static/usage/v8/content/scroll-methods/angular/example_component_ts.md
+++ b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md
@@ -1,13 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonContent } from '@ionic/angular';
+import { IonButton, IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent],
 })
 export class ExampleComponent {
-  @ViewChild(IonContent) content: IonContent;
+  @ViewChild(IonContent) content!: IonContent;
 
   scrollToBottom() {
     // Passing a duration to the method makes it so the scroll slowly
diff --git a/static/usage/v8/content/theming/colors/angular.md b/static/usage/v8/content/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/content/theming/colors/angular.md
rename to static/usage/v8/content/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/content/theming/colors/angular/example_component_ts.md b/static/usage/v8/content/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/theming/colors/index.md b/static/usage/v8/content/theming/colors/index.md
index f5f2a4f25e..e840be69a5 100644
--- a/static/usage/v8/content/theming/colors/index.md
+++ b/static/usage/v8/content/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/content/theming/colors/demo.html"
   includeIonContent={false}
   size="xlarge"
diff --git a/static/usage/v8/content/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/content/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/theming/css-properties/index.md b/static/usage/v8/content/theming/css-properties/index.md
index 3e06870ed3..85fb93536b 100644
--- a/static/usage/v8/content/theming/css-properties/index.md
+++ b/static/usage/v8/content/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/index.md b/static/usage/v8/content/theming/css-shadow-parts/index.md
index f9f853b71d..7d8470e4ac 100644
--- a/static/usage/v8/content/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/content/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/content/theming/safe-area/angular/example_component_ts.md b/static/usage/v8/content/theming/safe-area/angular/example_component_ts.md
new file mode 100644
index 0000000000..751eef556c
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/content/theming/safe-area/index.md b/static/usage/v8/content/theming/safe-area/index.md
index 29fcfc8435..e618d87cc7 100644
--- a/static/usage/v8/content/theming/safe-area/index.md
+++ b/static/usage/v8/content/theming/safe-area/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -26,6 +27,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/datetime-button/basic/angular.md b/static/usage/v8/datetime-button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime-button/basic/angular.md
rename to static/usage/v8/datetime-button/basic/angular/example_component_html.md
diff --git a/static/usage/v8/datetime-button/basic/angular/example_component_ts.md b/static/usage/v8/datetime-button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..9a422284c2
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime, IonDatetimeButton, IonModal],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime-button/basic/index.md b/static/usage/v8/datetime-button/basic/index.md
index d70daebc13..a4bbf88233 100644
--- a/static/usage/v8/datetime-button/basic/index.md
+++ b/static/usage/v8/datetime-button/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime-button/basic/demo.html"
 />
diff --git a/static/usage/v8/datetime-button/format-options/angular.md b/static/usage/v8/datetime-button/format-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime-button/format-options/angular.md
rename to static/usage/v8/datetime-button/format-options/angular/example_component_html.md
diff --git a/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md b/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md
new file mode 100644
index 0000000000..9a422284c2
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime, IonDatetimeButton, IonModal],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime-button/format-options/index.md b/static/usage/v8/datetime-button/format-options/index.md
index ff54ee7260..681f449123 100644
--- a/static/usage/v8/datetime-button/format-options/index.md
+++ b/static/usage/v8/datetime-button/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/datetime-button/format-options/demo.html"
 />
diff --git a/static/usage/v8/datetime/basic/angular.md b/static/usage/v8/datetime/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/basic/angular.md
rename to static/usage/v8/datetime/basic/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/basic/angular/example_component_ts.md b/static/usage/v8/datetime/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/basic/index.md b/static/usage/v8/datetime/basic/index.md
index 4d9429d305..62ae8d73b9 100644
--- a/static/usage/v8/datetime/basic/index.md
+++ b/static/usage/v8/datetime/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/basic/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
rename to static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
index 8f8e886ca0..641ef62190 100644
--- a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/buttons/customizing-button-texts/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/buttons/customizing-buttons/angular.md
rename to static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..9a2b1795d6
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/index.md b/static/usage/v8/datetime/buttons/customizing-buttons/index.md
index 8c8dd6234a..0e87041120 100644
--- a/static/usage/v8/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/buttons/customizing-buttons/demo.html"
 />
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
rename to static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
index 209eb126ef..ea89976eaa 100644
--- a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="500px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html"
 />
diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
index 3021390e18..37d9936a82 100644
--- a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   isWeekday = (dateString: string) => {
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/date-constraints/max-min/angular.md
rename to static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/index.md b/static/usage/v8/datetime/date-constraints/max-min/index.md
index d10c588560..4c43fcb3fe 100644
--- a/static/usage/v8/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v8/datetime/date-constraints/max-min/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/date-constraints/max-min/demo.html"
 />
diff --git a/static/usage/v8/datetime/date-constraints/values/angular.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/date-constraints/values/angular.md
rename to static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/index.md b/static/usage/v8/datetime/date-constraints/values/index.md
index 3695e380fa..8e4964da78 100644
--- a/static/usage/v8/datetime/date-constraints/values/index.md
+++ b/static/usage/v8/datetime/date-constraints/values/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/date-constraints/values/demo.html"
 />
diff --git a/static/usage/v8/datetime/format-options/angular.md b/static/usage/v8/datetime/format-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/format-options/angular.md
rename to static/usage/v8/datetime/format-options/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/format-options/angular/example_component_ts.md b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/format-options/index.md b/static/usage/v8/datetime/format-options/index.md
index d6e6eb0ca4..c4321c5933 100644
--- a/static/usage/v8/datetime/format-options/index.md
+++ b/static/usage/v8/datetime/format-options/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/datetime/format-options/demo.html"
 />
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
index 4ca93b85f4..1382b5db0e 100644
--- a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
   highlightedDates = [
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
index 60f9c700d0..b877e31c7e 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
 })
 export class ExampleComponent {
-  highlightedDates = (isoString) => {
+  highlightedDates = (isoString: string) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
 
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/localization/custom-locale/angular.md
rename to static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/index.md b/static/usage/v8/datetime/localization/custom-locale/index.md
index 330a1e415b..b45ae547fe 100644
--- a/static/usage/v8/datetime/localization/custom-locale/index.md
+++ b/static/usage/v8/datetime/localization/custom-locale/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/localization/custom-locale/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/localization/first-day-of-week/angular.md
rename to static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/index.md b/static/usage/v8/datetime/localization/first-day-of-week/index.md
index 4cc8b4b7bd..0b725341ad 100644
--- a/static/usage/v8/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v8/datetime/localization/first-day-of-week/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/localization/first-day-of-week/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/localization/hour-cycle/angular.md
rename to static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/index.md b/static/usage/v8/datetime/localization/hour-cycle/index.md
index 0e15b22a68..1fa52bc59c 100644
--- a/static/usage/v8/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v8/datetime/localization/hour-cycle/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/localization/hour-cycle/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/localization/locale-extension-tags/angular.md
rename to static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/index.md b/static/usage/v8/datetime/localization/locale-extension-tags/index.md
index 0013edd6d6..e7c706b453 100644
--- a/static/usage/v8/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/localization/locale-extension-tags/demo.html"
 />
diff --git a/static/usage/v8/datetime/localization/time-label/angular.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/localization/time-label/angular.md
rename to static/usage/v8/datetime/localization/time-label/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/localization/time-label/index.md b/static/usage/v8/datetime/localization/time-label/index.md
index 6586c762c0..d2baad0940 100644
--- a/static/usage/v8/datetime/localization/time-label/index.md
+++ b/static/usage/v8/datetime/localization/time-label/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/localization/time-label/demo.html"
 />
diff --git a/static/usage/v8/datetime/multiple/angular.md b/static/usage/v8/datetime/multiple/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/multiple/angular.md
rename to static/usage/v8/datetime/multiple/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/multiple/angular/example_component_ts.md b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/multiple/index.md b/static/usage/v8/datetime/multiple/index.md
index b0542b8b8f..8b9749c748 100644
--- a/static/usage/v8/datetime/multiple/index.md
+++ b/static/usage/v8/datetime/multiple/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/multiple/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/date/angular.md b/static/usage/v8/datetime/presentation/date/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/presentation/date/angular.md
rename to static/usage/v8/datetime/presentation/date/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/date/index.md b/static/usage/v8/datetime/presentation/date/index.md
index 7cb18100bd..569e249c60 100644
--- a/static/usage/v8/datetime/presentation/date/index.md
+++ b/static/usage/v8/datetime/presentation/date/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/presentation/date/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/presentation/month-and-year/angular.md
rename to static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/index.md b/static/usage/v8/datetime/presentation/month-and-year/index.md
index d8cb4417e6..68d952f04a 100644
--- a/static/usage/v8/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v8/datetime/presentation/month-and-year/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="240px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/presentation/month-and-year/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/time/angular.md b/static/usage/v8/datetime/presentation/time/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/presentation/time/angular.md
rename to static/usage/v8/datetime/presentation/time/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/time/index.md b/static/usage/v8/datetime/presentation/time/index.md
index 0dd5b55363..2941c9aff9 100644
--- a/static/usage/v8/datetime/presentation/time/index.md
+++ b/static/usage/v8/datetime/presentation/time/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/presentation/time/demo.html"
 />
diff --git a/static/usage/v8/datetime/presentation/wheel/angular.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/presentation/wheel/angular.md
rename to static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/index.md b/static/usage/v8/datetime/presentation/wheel/index.md
index 0561288d93..c0c0b53a30 100644
--- a/static/usage/v8/datetime/presentation/wheel/index.md
+++ b/static/usage/v8/datetime/presentation/wheel/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/presentation/wheel/demo.html"
 />
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
index 56c95d0ba0..20df0e860f 100644
--- a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -1,5 +1,7 @@
 ```ts
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,9 +11,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime, FormsModule],
 })
 export class ExampleComponent implements OnInit {
-  public datetime;
+  public datetime!: string;
 
   ngOnInit() {
     const date = new Date();
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md
index f87d6e8fad..a8cc488ac3 100644
--- a/static/usage/v8/datetime/styling/global-theming/index.md
+++ b/static/usage/v8/datetime/styling/global-theming/index.md
@@ -9,6 +9,7 @@ import vue_example from './vue/example_vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 import variables_css from './theme/variables_css.md';
 
@@ -39,6 +40,7 @@ import variables_css from './theme/variables_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/theme/variables.css': variables_css,
       },
     },
diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
index 39bac10093..6541627176 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
 
 // ViewEncapsulation is turned off for this demo due to
 // a lack of support for styling multiple css shadow parts
@@ -9,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation: ViewEncapsulation.None,
+  imports: [IonDatetime],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/datetime/title/customizing-title/angular.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/title/customizing-title/angular.md
rename to static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/index.md b/static/usage/v8/datetime/title/customizing-title/index.md
index 248c0b86ba..3c1ca1c82f 100644
--- a/static/usage/v8/datetime/title/customizing-title/index.md
+++ b/static/usage/v8/datetime/title/customizing-title/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="large"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/title/customizing-title/demo.html"
 />
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/datetime/title/showing-default-title/angular.md
rename to static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
new file mode 100644
index 0000000000..64d541cb04
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/index.md b/static/usage/v8/datetime/title/showing-default-title/index.md
index c053667913..237eccc68b 100644
--- a/static/usage/v8/datetime/title/showing-default-title/index.md
+++ b/static/usage/v8/datetime/title/showing-default-title/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="large"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/datetime/title/showing-default-title/demo.html"
 />
diff --git a/static/usage/v8/fab/basic/angular/example_component_ts.md b/static/usage/v8/fab/basic/angular/example_component_ts.md
index f881c10c61..29c5aeb300 100644
--- a/static/usage/v8/fab/basic/angular/example_component_ts.md
+++ b/static/usage/v8/fab/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/before-content/angular/example_component_html.md b/static/usage/v8/fab/before-content/angular/example_component_html.md
index 494d73158e..ea987ff790 100644
--- a/static/usage/v8/fab/before-content/angular/example_component_html.md
+++ b/static/usage/v8/fab/before-content/angular/example_component_html.md
@@ -6,12 +6,14 @@
     </ion-fab-button>
   </ion-fab>
   <ion-list>
-    <ion-item [button]="true" *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item button>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
diff --git a/static/usage/v8/fab/before-content/angular/example_component_ts.md b/static/usage/v8/fab/before-content/angular/example_component_ts.md
index b5b93c657d..f77b218949 100644
--- a/static/usage/v8/fab/before-content/angular/example_component_ts.md
+++ b/static/usage/v8/fab/before-content/angular/example_component_ts.md
@@ -1,7 +1,18 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  InfiniteScrollCustomEvent,
+  IonAvatar,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
@@ -9,9 +20,22 @@ import { add } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonIcon,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonItem,
+    IonLabel,
+    IonList,
+  ],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   constructor() {
     /**
@@ -33,10 +57,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev) {
+  onIonInfinite(ev: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      (ev as InfiniteScrollCustomEvent).target.complete();
+      ev.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v8/fab/button-sizing/angular/example_component_ts.md b/static/usage/v8/fab/button-sizing/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v8/fab/button-sizing/angular/example_component_ts.md
+++ b/static/usage/v8/fab/button-sizing/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/list-side/angular/example_component_ts.md b/static/usage/v8/fab/list-side/angular/example_component_ts.md
index bc62ad83c7..7a2109d0c2 100644
--- a/static/usage/v8/fab/list-side/angular/example_component_ts.md
+++ b/static/usage/v8/fab/list-side/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/positioning/angular/example_component_ts.md b/static/usage/v8/fab/positioning/angular/example_component_ts.md
index 4fed5b64b8..11dac9f8e3 100644
--- a/static/usage/v8/fab/positioning/angular/example_component_ts.md
+++ b/static/usage/v8/fab/positioning/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonFabList,
+  IonHeader,
+  IonIcon,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import {
@@ -15,6 +25,7 @@ import {
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/safe-area/angular/example_component_ts.md b/static/usage/v8/fab/safe-area/angular/example_component_ts.md
index f881c10c61..29c5aeb300 100644
--- a/static/usage/v8/fab/safe-area/angular/example_component_ts.md
+++ b/static/usage/v8/fab/safe-area/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/theming/colors/angular/example_component_ts.md b/static/usage/v8/fab/theming/colors/angular/example_component_ts.md
index bc62ad83c7..7a2109d0c2 100644
--- a/static/usage/v8/fab/theming/colors/angular/example_component_ts.md
+++ b/static/usage/v8/fab/theming/colors/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md
+++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md
index 403209255c..d852445f1d 100644
--- a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md
+++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { add, colorPalette, document, globe } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonFab, IonFabButton, IonFabList, IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/footer/basic/angular.md b/static/usage/v8/footer/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/footer/basic/angular.md
rename to static/usage/v8/footer/basic/angular/example_component_html.md
diff --git a/static/usage/v8/footer/basic/angular/example_component_ts.md b/static/usage/v8/footer/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v8/footer/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/footer/basic/index.md b/static/usage/v8/footer/basic/index.md
index 618e037761..af3b571296 100644
--- a/static/usage/v8/footer/basic/index.md
+++ b/static/usage/v8/footer/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/footer/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/footer/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/footer/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/index.md b/static/usage/v8/footer/custom-scroll-target/index.md
index 77353e8b24..167bab74e6 100644
--- a/static/usage/v8/footer/custom-scroll-target/index.md
+++ b/static/usage/v8/footer/custom-scroll-target/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/footer/fade/angular.md b/static/usage/v8/footer/fade/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/footer/fade/angular.md
rename to static/usage/v8/footer/fade/angular/example_component_html.md
diff --git a/static/usage/v8/footer/fade/angular/example_component_ts.md b/static/usage/v8/footer/fade/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v8/footer/fade/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/footer/fade/index.md b/static/usage/v8/footer/fade/index.md
index 447e7df071..1b4e7ae6ca 100644
--- a/static/usage/v8/footer/fade/index.md
+++ b/static/usage/v8/footer/fade/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/footer/fade/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/footer/no-border/angular.md b/static/usage/v8/footer/no-border/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/footer/no-border/angular.md
rename to static/usage/v8/footer/no-border/angular/example_component_html.md
diff --git a/static/usage/v8/footer/no-border/angular/example_component_ts.md b/static/usage/v8/footer/no-border/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v8/footer/no-border/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/footer/no-border/index.md b/static/usage/v8/footer/no-border/index.md
index 1a564d955f..2f20d131d6 100644
--- a/static/usage/v8/footer/no-border/index.md
+++ b/static/usage/v8/footer/no-border/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/footer/no-border/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/footer/translucent/angular.md b/static/usage/v8/footer/translucent/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/footer/translucent/angular.md
rename to static/usage/v8/footer/translucent/angular/example_component_html.md
diff --git a/static/usage/v8/footer/translucent/angular/example_component_ts.md b/static/usage/v8/footer/translucent/angular/example_component_ts.md
new file mode 100644
index 0000000000..bcdf570e97
--- /dev/null
+++ b/static/usage/v8/footer/translucent/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/footer/translucent/index.md b/static/usage/v8/footer/translucent/index.md
index 9ae477d67f..1127b89a62 100644
--- a/static/usage/v8/footer/translucent/index.md
+++ b/static/usage/v8/footer/translucent/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/footer/translucent/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/gestures/basic/angular/example_component_ts.md b/static/usage/v8/gestures/basic/angular/example_component_ts.md
index 33482eca38..609e8ecc41 100644
--- a/static/usage/v8/gestures/basic/angular/example_component_ts.md
+++ b/static/usage/v8/gestures/basic/angular/example_component_ts.md
@@ -1,16 +1,17 @@
 ```ts
 import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
-import type { GestureDetail } from '@ionic/angular';
-import { GestureController, IonCard } from '@ionic/angular';
+import { GestureController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle } from '@ionic/angular/standalone';
+import type { GestureDetail } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle],
 })
 export class ExampleComponent {
-  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
-  @ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
+  @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
+  @ViewChild('debug', { read: ElementRef }) debug!: ElementRef<HTMLParagraphElement>;
 
   isCardActive = false;
 
diff --git a/static/usage/v8/gestures/double-click/angular/example_component_ts.md b/static/usage/v8/gestures/double-click/angular/example_component_ts.md
index 0815962155..8c963786c1 100644
--- a/static/usage/v8/gestures/double-click/angular/example_component_ts.md
+++ b/static/usage/v8/gestures/double-click/angular/example_component_ts.md
@@ -1,14 +1,15 @@
 ```ts
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { GestureController, IonCard } from '@ionic/angular';
+import { GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonCard, IonCardContent],
 })
 export class ExampleComponent {
-  @ViewChild('card', { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild('card', { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
 
   private currentOffset: number = 0;
   private lastOnStart: number = 0;
diff --git a/static/usage/v8/grid/basic/angular/example_component_ts.md b/static/usage/v8/grid/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/basic/index.md b/static/usage/v8/grid/basic/index.md
index d438994ef4..ddc0d2f680 100644
--- a/static/usage/v8/grid/basic/index.md
+++ b/static/usage/v8/grid/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/column-number/index.md b/static/usage/v8/grid/customizing/column-number/index.md
index 9e9066c292..85e832601e 100644
--- a/static/usage/v8/grid/customizing/column-number/index.md
+++ b/static/usage/v8/grid/customizing/column-number/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md b/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/padding/index.md b/static/usage/v8/grid/customizing/padding/index.md
index 817304bc59..e3c837e926 100644
--- a/static/usage/v8/grid/customizing/padding/index.md
+++ b/static/usage/v8/grid/customizing/padding/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_ts.md b/static/usage/v8/grid/customizing/width/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/customizing/width/index.md b/static/usage/v8/grid/customizing/width/index.md
index b2c7742a7d..a61c57a249 100644
--- a/static/usage/v8/grid/customizing/width/index.md
+++ b/static/usage/v8/grid/customizing/width/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/fixed/angular/example_component_ts.md b/static/usage/v8/grid/fixed/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/fixed/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/fixed/index.md b/static/usage/v8/grid/fixed/index.md
index 92b6716bc8..e35c507b82 100644
--- a/static/usage/v8/grid/fixed/index.md
+++ b/static/usage/v8/grid/fixed/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/index.md b/static/usage/v8/grid/horizontal-alignment/index.md
index 6e2270521f..3d9da3ceda 100644
--- a/static/usage/v8/grid/horizontal-alignment/index.md
+++ b/static/usage/v8/grid/horizontal-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md b/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/offset-responsive/index.md b/static/usage/v8/grid/offset-responsive/index.md
index 0e0231f3ec..9545573c7d 100644
--- a/static/usage/v8/grid/offset-responsive/index.md
+++ b/static/usage/v8/grid/offset-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/offset/angular/example_component_ts.md b/static/usage/v8/grid/offset/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/offset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/offset/index.md b/static/usage/v8/grid/offset/index.md
index 4cd5a0cb0d..c42d056e00 100644
--- a/static/usage/v8/grid/offset/index.md
+++ b/static/usage/v8/grid/offset/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/index.md b/static/usage/v8/grid/push-pull-responsive/index.md
index cc4eea60fe..0e57de6dc9 100644
--- a/static/usage/v8/grid/push-pull-responsive/index.md
+++ b/static/usage/v8/grid/push-pull-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/push-pull/angular/example_component_ts.md b/static/usage/v8/grid/push-pull/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/push-pull/index.md b/static/usage/v8/grid/push-pull/index.md
index dd9c8a59f6..b7a4b09459 100644
--- a/static/usage/v8/grid/push-pull/index.md
+++ b/static/usage/v8/grid/push-pull/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size-auto/angular/example_component_ts.md b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
new file mode 100644
index 0000000000..875c999aa3
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonInput, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size-auto/index.md b/static/usage/v8/grid/size-auto/index.md
index 29e5aaa654..afdfbf80c9 100644
--- a/static/usage/v8/grid/size-auto/index.md
+++ b/static/usage/v8/grid/size-auto/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_ts.md b/static/usage/v8/grid/size-responsive/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size-responsive/index.md b/static/usage/v8/grid/size-responsive/index.md
index 3f52e520ad..8179858fc2 100644
--- a/static/usage/v8/grid/size-responsive/index.md
+++ b/static/usage/v8/grid/size-responsive/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/size/angular/example_component_ts.md b/static/usage/v8/grid/size/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/size/index.md b/static/usage/v8/grid/size/index.md
index 2b27666f0a..d364626a51 100644
--- a/static/usage/v8/grid/size/index.md
+++ b/static/usage/v8/grid/size/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..993d724b88
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCol, IonGrid, IonRow],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/grid/vertical-alignment/index.md b/static/usage/v8/grid/vertical-alignment/index.md
index 10a271ce43..6ba19d3717 100644
--- a/static/usage/v8/grid/vertical-alignment/index.md
+++ b/static/usage/v8/grid/vertical-alignment/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/header/basic/angular.md b/static/usage/v8/header/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/header/basic/angular.md
rename to static/usage/v8/header/basic/angular/example_component_html.md
diff --git a/static/usage/v8/header/basic/angular/example_component_ts.md b/static/usage/v8/header/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/basic/index.md b/static/usage/v8/header/basic/index.md
index f509303071..ec71e0cc7a 100644
--- a/static/usage/v8/header/basic/index.md
+++ b/static/usage/v8/header/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/header/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/header/condense/angular.md b/static/usage/v8/header/condense/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/header/condense/angular.md
rename to static/usage/v8/header/condense/angular/example_component_html.md
diff --git a/static/usage/v8/header/condense/angular/example_component_ts.md b/static/usage/v8/header/condense/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/condense/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/condense/index.md b/static/usage/v8/header/condense/index.md
index cbcfc77577..511821dd6b 100644
--- a/static/usage/v8/header/condense/index.md
+++ b/static/usage/v8/header/condense/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/header/condense/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/header/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/header/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/custom-scroll-target/index.md b/static/usage/v8/header/custom-scroll-target/index.md
index 21821fa810..f348c5bdff 100644
--- a/static/usage/v8/header/custom-scroll-target/index.md
+++ b/static/usage/v8/header/custom-scroll-target/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/header/fade/angular.md b/static/usage/v8/header/fade/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/header/fade/angular.md
rename to static/usage/v8/header/fade/angular/example_component_html.md
diff --git a/static/usage/v8/header/fade/angular/example_component_ts.md b/static/usage/v8/header/fade/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/fade/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/fade/index.md b/static/usage/v8/header/fade/index.md
index f026b50ec1..b18c1640e9 100644
--- a/static/usage/v8/header/fade/index.md
+++ b/static/usage/v8/header/fade/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/header/fade/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/header/no-border/angular.md b/static/usage/v8/header/no-border/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/header/no-border/angular.md
rename to static/usage/v8/header/no-border/angular/example_component_html.md
diff --git a/static/usage/v8/header/no-border/angular/example_component_ts.md b/static/usage/v8/header/no-border/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/no-border/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/no-border/index.md b/static/usage/v8/header/no-border/index.md
index 5b6ad99cec..9c5152893b 100644
--- a/static/usage/v8/header/no-border/index.md
+++ b/static/usage/v8/header/no-border/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/header/no-border/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/header/translucent/angular.md b/static/usage/v8/header/translucent/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/header/translucent/angular.md
rename to static/usage/v8/header/translucent/angular/example_component_html.md
diff --git a/static/usage/v8/header/translucent/angular/example_component_ts.md b/static/usage/v8/header/translucent/angular/example_component_ts.md
new file mode 100644
index 0000000000..acee90fb7b
--- /dev/null
+++ b/static/usage/v8/header/translucent/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/header/translucent/index.md b/static/usage/v8/header/translucent/index.md
index 899b96d703..5d8b6b6e6f 100644
--- a/static/usage/v8/header/translucent/index.md
+++ b/static/usage/v8/header/translucent/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/header/translucent/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/icon/basic/angular.md b/static/usage/v8/icon/basic/angular.md
deleted file mode 100644
index 7dba86b263..0000000000
--- a/static/usage/v8/icon/basic/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-icon name="logo-ionic"></ion-icon>
-<ion-icon name="logo-ionic" size="large"></ion-icon>
-<ion-icon name="logo-ionic" color="primary"></ion-icon>
-<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-```
diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md
index 48b43c838c..b666e57911 100644
--- a/static/usage/v8/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v8/icon/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { logoIonic } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { logoIonic } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/img/basic/angular.md b/static/usage/v8/img/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/img/basic/angular.md
rename to static/usage/v8/img/basic/angular/example_component_html.md
diff --git a/static/usage/v8/img/basic/angular/example_component_ts.md b/static/usage/v8/img/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..bec3c992a7
--- /dev/null
+++ b/static/usage/v8/img/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonImg } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonImg],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/img/basic/index.md b/static/usage/v8/img/basic/index.md
index 3e14666bad..ca4bb366ba 100644
--- a/static/usage/v8/img/basic/index.md
+++ b/static/usage/v8/img/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/img/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/img/basic/demo.html"
+/>
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
index 55469ab3c5..962be4924a 100644
--- a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
index 390ba6b75f..7c35aba213 100644
--- a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
@@ -1,15 +1,24 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  InfiniteScrollCustomEvent,
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     this.generateItems();
@@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev) {
+  onIonInfinite(ev: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      (ev as InfiniteScrollCustomEvent).target.complete();
+      ev.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
index 60c02b86ea..fb41f8761c 100644
--- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <div class="infinite-scroll-content">
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8..e7a9c133f1 100644
--- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,15 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
index 2e23e35925..d73da98943 100644
--- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -1,12 +1,14 @@
 ```html
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let item of items; let index">
+    @for (item of items; track item; let index = $index) {
+    <ion-item>
       <ion-avatar slot="start">
         <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
       </ion-avatar>
       <ion-label>{{ item }}</ion-label>
     </ion-item>
+    }
   </ion-list>
   <ion-infinite-scroll>
     <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
index 415ed5dba8..e670c8c322 100644
--- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -1,15 +1,23 @@
 ```tsx
 import { Component, OnInit } from '@angular/core';
-
-import { InfiniteScrollCustomEvent } from '@ionic/angular';
+import {
+  IonAvatar,
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.scss'],
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent implements OnInit {
-  items = [];
+  items: string[] = [];
 
   ngOnInit() {
     for (let i = 1; i < 51; i++) {
diff --git a/static/usage/v8/input-password-toggle/basic/angular.md b/static/usage/v8/input-password-toggle/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input-password-toggle/basic/angular.md
rename to static/usage/v8/input-password-toggle/basic/angular/example_component_html.md
diff --git a/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md b/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5257544984
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonInputPasswordToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonInputPasswordToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-password-toggle/basic/index.md b/static/usage/v8/input-password-toggle/basic/index.md
index 037fec4f19..16f73c76ca 100644
--- a/static/usage/v8/input-password-toggle/basic/index.md
+++ b/static/usage/v8/input-password-toggle/basic/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/input-password-toggle/basic/demo.html"
 />
diff --git a/static/usage/v8/input/basic/angular.md b/static/usage/v8/input/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/basic/angular.md
rename to static/usage/v8/input/basic/angular/example_component_html.md
diff --git a/static/usage/v8/input/basic/angular/example_component_ts.md b/static/usage/v8/input/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/basic/index.md b/static/usage/v8/input/basic/index.md
index bf35523196..5c98ee52a5 100644
--- a/static/usage/v8/input/basic/index.md
+++ b/static/usage/v8/input/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/input/basic/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/input/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/input/clear/angular.md b/static/usage/v8/input/clear/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/clear/angular.md
rename to static/usage/v8/input/clear/angular/example_component_html.md
diff --git a/static/usage/v8/input/clear/angular/example_component_ts.md b/static/usage/v8/input/clear/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/clear/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/clear/index.md b/static/usage/v8/input/clear/index.md
index f3763e6024..61e82d72c7 100644
--- a/static/usage/v8/input/clear/index.md
+++ b/static/usage/v8/input/clear/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/input/clear/demo.html" size="250px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/input/clear/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v8/input/counter-alignment/angular.md b/static/usage/v8/input/counter-alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/counter-alignment/angular.md
rename to static/usage/v8/input/counter-alignment/angular/example_component_html.md
diff --git a/static/usage/v8/input/counter-alignment/angular/example_component_ts.md b/static/usage/v8/input/counter-alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/counter-alignment/index.md b/static/usage/v8/input/counter-alignment/index.md
index b0192c1909..351aa301f7 100644
--- a/static/usage/v8/input/counter-alignment/index.md
+++ b/static/usage/v8/input/counter-alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/input/counter-alignment/demo.html"
 />
diff --git a/static/usage/v8/input/counter/angular/example_component_ts.md b/static/usage/v8/input/counter/angular/example_component_ts.md
index 2c08dc06fc..2392e6cd2d 100644
--- a/static/usage/v8/input/counter/angular/example_component_ts.md
+++ b/static/usage/v8/input/counter/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v8/input/fill/angular.md b/static/usage/v8/input/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/fill/angular.md
rename to static/usage/v8/input/fill/angular/example_component_html.md
diff --git a/static/usage/v8/input/fill/angular/example_component_ts.md b/static/usage/v8/input/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v8/input/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/fill/index.md b/static/usage/v8/input/fill/index.md
index d640ed691b..8d19505db2 100644
--- a/static/usage/v8/input/fill/index.md
+++ b/static/usage/v8/input/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/input/fill/demo.html"
   size="250px"
   mode="md"
diff --git a/static/usage/v8/input/filtering/angular/example_component_ts.md b/static/usage/v8/input/filtering/angular/example_component_ts.md
index b0fc6a3331..19554af7c4 100644
--- a/static/usage/v8/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v8/input/filtering/angular/example_component_ts.md
@@ -1,21 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import type { IonInput } from '@ionic/angular';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
 })
 export class ExampleComponent {
   inputModel = '';
 
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
 
-  onInput(ev) {
-    const value = ev.target!.value;
+  onInput(ev: CustomEvent) {
+    const value = (ev.target as HTMLIonInputElement).value ?? '';
 
     // Removes non alphanumeric characters
-    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+    const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');
 
     /**
      * Update both the state variable and
diff --git a/static/usage/v8/input/helper-error/angular.md b/static/usage/v8/input/helper-error/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/helper-error/angular.md
rename to static/usage/v8/input/helper-error/angular/example_component_html.md
diff --git a/static/usage/v8/input/helper-error/angular/example_component_ts.md b/static/usage/v8/input/helper-error/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v8/input/helper-error/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/helper-error/index.md b/static/usage/v8/input/helper-error/index.md
index 93bf8b09a7..6fd0541b12 100644
--- a/static/usage/v8/input/helper-error/index.md
+++ b/static/usage/v8/input/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/input/helper-error/demo.html"
   size="150px"
diff --git a/static/usage/v8/input/label-placement/angular.md b/static/usage/v8/input/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/label-placement/angular.md
rename to static/usage/v8/input/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/input/label-placement/angular/example_component_ts.md b/static/usage/v8/input/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/label-placement/index.md b/static/usage/v8/input/label-placement/index.md
index a6ef058158..68ef30011c 100644
--- a/static/usage/v8/input/label-placement/index.md
+++ b/static/usage/v8/input/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/input/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/input/label-slot/angular.md b/static/usage/v8/input/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/label-slot/angular.md
rename to static/usage/v8/input/label-slot/angular/example_component_html.md
diff --git a/static/usage/v8/input/label-slot/angular/example_component_ts.md b/static/usage/v8/input/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..39bae8be84
--- /dev/null
+++ b/static/usage/v8/input/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/label-slot/index.md b/static/usage/v8/input/label-slot/index.md
index cac5c19451..7aa9df2a4e 100644
--- a/static/usage/v8/input/label-slot/index.md
+++ b/static/usage/v8/input/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/input/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/input/label-slot/demo.html"
+/>
diff --git a/static/usage/v8/input/mask/angular/app_module_ts.md b/static/usage/v8/input/mask/angular/app_module_ts.md
deleted file mode 100644
index 7eb78206d7..0000000000
--- a/static/usage/v8/input/mask/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 { MaskitoDirective } from '@maskito/angular';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, MaskitoDirective, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/input/mask/angular/example_component_ts.md b/static/usage/v8/input/mask/angular/example_component_ts.md
index c7f0c89801..a118f6faa7 100644
--- a/static/usage/v8/input/mask/angular/example_component_ts.md
+++ b/static/usage/v8/input/mask/angular/example_component_ts.md
@@ -1,11 +1,16 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 
 import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
+import { MaskitoDirective } from '@maskito/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective],
 })
 export class ExampleComponent {
   readonly phoneMask: MaskitoOptions = {
diff --git a/static/usage/v8/input/mask/index.md b/static/usage/v8/input/mask/index.md
index 72e2d24952..7e6f892601 100644
--- a/static/usage/v8/input/mask/index.md
+++ b/static/usage/v8/input/mask/index.md
@@ -7,7 +7,6 @@ import react_main_tsx from './react.md';
 
 import vue_example_vue from './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';
 
@@ -43,7 +42,6 @@ import angular_example_component_ts from './angular/example_component_ts.md';
     },
     angular: {
       files: {
-        'src/app/app.module.ts': angular_app_module_ts,
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
       },
diff --git a/static/usage/v8/input/no-visible-label/angular.md b/static/usage/v8/input/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/no-visible-label/angular.md
rename to static/usage/v8/input/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v8/input/no-visible-label/angular/example_component_ts.md b/static/usage/v8/input/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/no-visible-label/index.md b/static/usage/v8/input/no-visible-label/index.md
index 80b5364459..4213294c18 100644
--- a/static/usage/v8/input/no-visible-label/index.md
+++ b/static/usage/v8/input/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/input/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/input/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v8/input/set-focus/angular.md b/static/usage/v8/input/set-focus/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/set-focus/angular.md
rename to static/usage/v8/input/set-focus/angular/example_component_html.md
diff --git a/static/usage/v8/input/set-focus/angular/example_component_ts.md b/static/usage/v8/input/set-focus/angular/example_component_ts.md
new file mode 100644
index 0000000000..f950296880
--- /dev/null
+++ b/static/usage/v8/input/set-focus/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/set-focus/index.md b/static/usage/v8/input/set-focus/index.md
index 1191f5f2bf..4106a08175 100644
--- a/static/usage/v8/input/set-focus/index.md
+++ b/static/usage/v8/input/set-focus/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import vue from './vue.md';
 import react from './react.md';
 
@@ -9,9 +11,14 @@ import react from './react.md';
   version="8"
   code={{
     javascript,
-    vue,
-    angular,
     react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/input/set-focus/demo.html"
 />
diff --git a/static/usage/v8/input/start-end-slots/angular/example_component_ts.md b/static/usage/v8/input/start-end-slots/angular/example_component_ts.md
index 899f7a826a..2a33933595 100644
--- a/static/usage/v8/input/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v8/input/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonInput, IonItem, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/input/theming/colors/angular.md b/static/usage/v8/input/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/theming/colors/angular.md
rename to static/usage/v8/input/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/input/theming/colors/angular/example_component_ts.md b/static/usage/v8/input/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v8/input/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/theming/colors/index.md b/static/usage/v8/input/theming/colors/index.md
index 127bcfdb2f..c08352f5b2 100644
--- a/static/usage/v8/input/theming/colors/index.md
+++ b/static/usage/v8/input/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/input/theming/colors/demo.html"
   size="200px"
 />
diff --git a/static/usage/v8/input/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/input/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..9dc150bb9c
--- /dev/null
+++ b/static/usage/v8/input/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/theming/css-properties/index.md b/static/usage/v8/input/theming/css-properties/index.md
index 77a33b0d8e..32156fbeb3 100644
--- a/static/usage/v8/input/theming/css-properties/index.md
+++ b/static/usage/v8/input/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -26,6 +27,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/input/types/angular.md b/static/usage/v8/input/types/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/input/types/angular.md
rename to static/usage/v8/input/types/angular/example_component_html.md
diff --git a/static/usage/v8/input/types/angular/example_component_ts.md b/static/usage/v8/input/types/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/input/types/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input/types/index.md b/static/usage/v8/input/types/index.md
index fdfb07b753..e527ecf541 100644
--- a/static/usage/v8/input/types/index.md
+++ b/static/usage/v8/input/types/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/input/types/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/input/types/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/item-divider/basic/angular.md b/static/usage/v8/item-divider/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-divider/basic/angular.md
rename to static/usage/v8/item-divider/basic/angular/example_component_html.md
diff --git a/static/usage/v8/item-divider/basic/angular/example_component_ts.md b/static/usage/v8/item-divider/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..1d2ea0f0db
--- /dev/null
+++ b/static/usage/v8/item-divider/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-divider/basic/index.md b/static/usage/v8/item-divider/basic/index.md
index be308e5e36..ae41cc694f 100644
--- a/static/usage/v8/item-divider/basic/index.md
+++ b/static/usage/v8/item-divider/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item-divider/basic/demo.html"
   size="medium"
 />
diff --git a/static/usage/v8/item-divider/theming/colors/angular.md b/static/usage/v8/item-divider/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-divider/theming/colors/angular.md
rename to static/usage/v8/item-divider/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..11c0c268eb
--- /dev/null
+++ b/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-divider/theming/colors/index.md b/static/usage/v8/item-divider/theming/colors/index.md
index 95d2d7db31..14b4143f7a 100644
--- a/static/usage/v8/item-divider/theming/colors/index.md
+++ b/static/usage/v8/item-divider/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item-divider/theming/colors/demo.html"
   size="medium"
 />
diff --git a/static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..11c0c268eb
--- /dev/null
+++ b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItemDivider, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItemDivider, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-divider/theming/css-properties/index.md b/static/usage/v8/item-divider/theming/css-properties/index.md
index a275698ebe..d41b02daf2 100644
--- a/static/usage/v8/item-divider/theming/css-properties/index.md
+++ b/static/usage/v8/item-divider/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/item-group/basic/angular.md b/static/usage/v8/item-group/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-group/basic/angular.md
rename to static/usage/v8/item-group/basic/angular/example_component_html.md
diff --git a/static/usage/v8/item-group/basic/angular/example_component_ts.md b/static/usage/v8/item-group/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..90f7723d62
--- /dev/null
+++ b/static/usage/v8/item-group/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-group/basic/index.md b/static/usage/v8/item-group/basic/index.md
index dce79085d8..a6dd73aeed 100644
--- a/static/usage/v8/item-group/basic/index.md
+++ b/static/usage/v8/item-group/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item-group/basic/demo.html"
   size="medium"
 />
diff --git a/static/usage/v8/item-group/sliding-items/angular.md b/static/usage/v8/item-group/sliding-items/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-group/sliding-items/angular.md
rename to static/usage/v8/item-group/sliding-items/angular/example_component_html.md
diff --git a/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md
new file mode 100644
index 0000000000..5c823eabc6
--- /dev/null
+++ b/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonItem,
+  IonItemDivider,
+  IonItemGroup,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-group/sliding-items/index.md b/static/usage/v8/item-group/sliding-items/index.md
index 4a960f1ad8..fff3725257 100644
--- a/static/usage/v8/item-group/sliding-items/index.md
+++ b/static/usage/v8/item-group/sliding-items/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item-group/sliding-items/demo.html"
   size="medium"
 />
diff --git a/static/usage/v8/item-sliding/basic/angular.md b/static/usage/v8/item-sliding/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-sliding/basic/angular.md
rename to static/usage/v8/item-sliding/basic/angular/example_component_html.md
diff --git a/static/usage/v8/item-sliding/basic/angular/example_component_ts.md b/static/usage/v8/item-sliding/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..e06ea993f9
--- /dev/null
+++ b/static/usage/v8/item-sliding/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-sliding/basic/index.md b/static/usage/v8/item-sliding/basic/index.md
index 5d7c11952f..85ac79f71d 100644
--- a/static/usage/v8/item-sliding/basic/index.md
+++ b/static/usage/v8/item-sliding/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/item-sliding/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/item-sliding/basic/demo.html"
+/>
diff --git a/static/usage/v8/item-sliding/expandable/angular.md b/static/usage/v8/item-sliding/expandable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item-sliding/expandable/angular.md
rename to static/usage/v8/item-sliding/expandable/angular/example_component_html.md
diff --git a/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md
new file mode 100644
index 0000000000..e06ea993f9
--- /dev/null
+++ b/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item-sliding/expandable/index.md b/static/usage/v8/item-sliding/expandable/index.md
index 388b679d08..025987e137 100644
--- a/static/usage/v8/item-sliding/expandable/index.md
+++ b/static/usage/v8/item-sliding/expandable/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item-sliding/expandable/demo.html"
   size="100px"
 />
diff --git a/static/usage/v8/item-sliding/icons/angular/example_component_ts.md b/static/usage/v8/item-sliding/icons/angular/example_component_ts.md
index 5f32e92459..a3169b9226 100644
--- a/static/usage/v8/item-sliding/icons/angular/example_component_ts.md
+++ b/static/usage/v8/item-sliding/icons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { archive, heart, trash } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { archive, heart, trash } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/basic/angular.md b/static/usage/v8/item/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/basic/angular.md
rename to static/usage/v8/item/basic/angular/example_component_html.md
diff --git a/static/usage/v8/item/basic/angular/example_component_ts.md b/static/usage/v8/item/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/basic/index.md b/static/usage/v8/item/basic/index.md
index 6c8369fb44..fe339cd3dc 100644
--- a/static/usage/v8/item/basic/index.md
+++ b/static/usage/v8/item/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/item/basic/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/item/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v8/item/buttons/angular/example_component_ts.md b/static/usage/v8/item/buttons/angular/example_component_ts.md
index 5f8f10b788..6d056d6d71 100644
--- a/static/usage/v8/item/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/item/buttons/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { home, navigate, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { home, navigate, star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/clickable/angular.md b/static/usage/v8/item/clickable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/clickable/angular.md
rename to static/usage/v8/item/clickable/angular/example_component_html.md
diff --git a/static/usage/v8/item/clickable/angular/example_component_ts.md b/static/usage/v8/item/clickable/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/clickable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/clickable/index.md b/static/usage/v8/item/clickable/index.md
index 02770dea62..f65face9b2 100644
--- a/static/usage/v8/item/clickable/index.md
+++ b/static/usage/v8/item/clickable/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/item/clickable/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/item/clickable/demo.html"
+/>
diff --git a/static/usage/v8/item/content-types/actions/angular/example_component_ts.md b/static/usage/v8/item/content-types/actions/angular/example_component_ts.md
index 019d31f99f..5944353da3 100644
--- a/static/usage/v8/item/content-types/actions/angular/example_component_ts.md
+++ b/static/usage/v8/item/content-types/actions/angular/example_component_ts.md
@@ -1,5 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pin, share, trash } from 'ionicons/icons';
@@ -8,6 +22,20 @@ import { pin, share, trash } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonItemOption,
+    IonItemOptions,
+    IonItemSliding,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/content-types/controls/angular.md b/static/usage/v8/item/content-types/controls/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/content-types/controls/angular.md
rename to static/usage/v8/item/content-types/controls/angular/example_component_html.md
diff --git a/static/usage/v8/item/content-types/controls/angular/example_component_ts.md b/static/usage/v8/item/content-types/controls/angular/example_component_ts.md
new file mode 100644
index 0000000000..18cbb2e592
--- /dev/null
+++ b/static/usage/v8/item/content-types/controls/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/content-types/controls/index.md b/static/usage/v8/item/content-types/controls/index.md
index e199217886..4d76397496 100644
--- a/static/usage/v8/item/content-types/controls/index.md
+++ b/static/usage/v8/item/content-types/controls/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/item/content-types/controls/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v8/item/content-types/metadata/angular/example_component_ts.md b/static/usage/v8/item/content-types/metadata/angular/example_component_ts.md
index d17dd7f8e8..503048117c 100644
--- a/static/usage/v8/item/content-types/metadata/angular/example_component_ts.md
+++ b/static/usage/v8/item/content-types/metadata/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { chevronForward, listCircle } from 'ionicons/icons';
@@ -8,6 +20,7 @@ import { chevronForward, listCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonText, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/content-types/supporting-visuals/angular/example_component_ts.md b/static/usage/v8/item/content-types/supporting-visuals/angular/example_component_ts.md
index b31c839589..058c733eb2 100644
--- a/static/usage/v8/item/content-types/supporting-visuals/angular/example_component_ts.md
+++ b/static/usage/v8/item/content-types/supporting-visuals/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAvatar, IonIcon, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonIcon, IonItem, IonLabel, IonList],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/content-types/text/angular/example_component_ts.md b/static/usage/v8/item/content-types/text/angular/example_component_ts.md
new file mode 100644
index 0000000000..7927993348
--- /dev/null
+++ b/static/usage/v8/item/content-types/text/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonTextarea,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonTextarea,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/content-types/text/index.md b/static/usage/v8/item/content-types/text/index.md
index 0bf170f4c7..cbebc9d5af 100644
--- a/static/usage/v8/item/content-types/text/index.md
+++ b/static/usage/v8/item/content-types/text/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/item/detail-arrows/angular.md b/static/usage/v8/item/detail-arrows/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/detail-arrows/angular.md
rename to static/usage/v8/item/detail-arrows/angular/example_component_html.md
diff --git a/static/usage/v8/item/detail-arrows/angular/example_component_ts.md b/static/usage/v8/item/detail-arrows/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/detail-arrows/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/detail-arrows/index.md b/static/usage/v8/item/detail-arrows/index.md
index af83707f72..9df2d27338 100644
--- a/static/usage/v8/item/detail-arrows/index.md
+++ b/static/usage/v8/item/detail-arrows/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item/detail-arrows/demo.html"
   size="350px"
 />
diff --git a/static/usage/v8/item/inputs/angular.md b/static/usage/v8/item/inputs/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/inputs/angular.md
rename to static/usage/v8/item/inputs/angular/example_component_html.md
diff --git a/static/usage/v8/item/inputs/angular/example_component_ts.md b/static/usage/v8/item/inputs/angular/example_component_ts.md
new file mode 100644
index 0000000000..e42eafb824
--- /dev/null
+++ b/static/usage/v8/item/inputs/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonCheckbox,
+  IonInput,
+  IonItem,
+  IonRange,
+  IonSelect,
+  IonSelectOption,
+  IonToggle,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/inputs/index.md b/static/usage/v8/item/inputs/index.md
index fd0da581a1..21307b1151 100644
--- a/static/usage/v8/item/inputs/index.md
+++ b/static/usage/v8/item/inputs/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/item/inputs/demo.html" size="large" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/item/inputs/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v8/item/lines/angular/example_component_ts.md b/static/usage/v8/item/lines/angular/example_component_ts.md
index 3122a1f730..06597ba96c 100644
--- a/static/usage/v8/item/lines/angular/example_component_ts.md
+++ b/static/usage/v8/item/lines/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { informationCircle, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { informationCircle, star } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/item/media/angular.md b/static/usage/v8/item/media/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/media/angular.md
rename to static/usage/v8/item/media/angular/example_component_html.md
diff --git a/static/usage/v8/item/media/angular/example_component_ts.md b/static/usage/v8/item/media/angular/example_component_ts.md
new file mode 100644
index 0000000000..d8cb142b8f
--- /dev/null
+++ b/static/usage/v8/item/media/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonAvatar, IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/media/index.md b/static/usage/v8/item/media/index.md
index 58ff650da2..5bbd16b0f7 100644
--- a/static/usage/v8/item/media/index.md
+++ b/static/usage/v8/item/media/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/item/media/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/item/media/demo.html"
+/>
diff --git a/static/usage/v8/item/theming/colors/angular.md b/static/usage/v8/item/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/item/theming/colors/angular.md
rename to static/usage/v8/item/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/item/theming/colors/angular/example_component_ts.md b/static/usage/v8/item/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/theming/colors/index.md b/static/usage/v8/item/theming/colors/index.md
index a58e153f5a..05e86f7525 100644
--- a/static/usage/v8/item/theming/colors/index.md
+++ b/static/usage/v8/item/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/item/theming/colors/demo.html"
   size="500px"
 />
diff --git a/static/usage/v8/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/item/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/theming/css-properties/index.md b/static/usage/v8/item/theming/css-properties/index.md
index 0e6793de31..752dee16ad 100644
--- a/static/usage/v8/item/theming/css-properties/index.md
+++ b/static/usage/v8/item/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/theming/css-shadow-parts/index.md b/static/usage/v8/item/theming/css-shadow-parts/index.md
index b33624a0be..03e03714f1 100644
--- a/static/usage/v8/item/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/item/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/item/theming/input-highlight/angular/example_component_ts.md b/static/usage/v8/item/theming/input-highlight/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/item/theming/input-highlight/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/item/theming/input-highlight/index.md b/static/usage/v8/item/theming/input-highlight/index.md
index 13e83c865f..ac85e3764b 100644
--- a/static/usage/v8/item/theming/input-highlight/index.md
+++ b/static/usage/v8/item/theming/input-highlight/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/keyboard/enterkeyhint/angular.md b/static/usage/v8/keyboard/enterkeyhint/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/keyboard/enterkeyhint/angular.md
rename to static/usage/v8/keyboard/enterkeyhint/angular/example_component_html.md
diff --git a/static/usage/v8/keyboard/enterkeyhint/angular/example_component_ts.md b/static/usage/v8/keyboard/enterkeyhint/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/keyboard/enterkeyhint/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/keyboard/enterkeyhint/index.md b/static/usage/v8/keyboard/enterkeyhint/index.md
index 1264951503..3701e84cbd 100644
--- a/static/usage/v8/keyboard/enterkeyhint/index.md
+++ b/static/usage/v8/keyboard/enterkeyhint/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/keyboard/enterkeyhint/demo.html"
 />
diff --git a/static/usage/v8/keyboard/inputmode/angular.md b/static/usage/v8/keyboard/inputmode/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/keyboard/inputmode/angular.md
rename to static/usage/v8/keyboard/inputmode/angular/example_component_html.md
diff --git a/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md
new file mode 100644
index 0000000000..fbf2fdf258
--- /dev/null
+++ b/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonInput, IonItem, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/keyboard/inputmode/index.md b/static/usage/v8/keyboard/inputmode/index.md
index 1d80ba8703..fca0fd02bc 100644
--- a/static/usage/v8/keyboard/inputmode/index.md
+++ b/static/usage/v8/keyboard/inputmode/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/keyboard/inputmode/demo.html"
 />
diff --git a/static/usage/v8/label/basic/angular.md b/static/usage/v8/label/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/label/basic/angular.md
rename to static/usage/v8/label/basic/angular/example_component_html.md
diff --git a/static/usage/v8/label/basic/angular/example_component_ts.md b/static/usage/v8/label/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5a7fdcebe2
--- /dev/null
+++ b/static/usage/v8/label/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/label/basic/index.md b/static/usage/v8/label/basic/index.md
index 09def9afbe..32c8857bf2 100644
--- a/static/usage/v8/label/basic/index.md
+++ b/static/usage/v8/label/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/label/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/label/basic/demo.html"
+/>
diff --git a/static/usage/v8/label/input/angular.md b/static/usage/v8/label/input/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/label/input/angular.md
rename to static/usage/v8/label/input/angular/example_component_html.md
diff --git a/static/usage/v8/label/input/angular/example_component_ts.md b/static/usage/v8/label/input/angular/example_component_ts.md
new file mode 100644
index 0000000000..88e481153b
--- /dev/null
+++ b/static/usage/v8/label/input/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/label/input/index.md b/static/usage/v8/label/input/index.md
index 35375f7375..4e9f2a35b8 100644
--- a/static/usage/v8/label/input/index.md
+++ b/static/usage/v8/label/input/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/label/input/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/label/input/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v8/label/item/angular.md b/static/usage/v8/label/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/label/item/angular.md
rename to static/usage/v8/label/item/angular/example_component_html.md
diff --git a/static/usage/v8/label/item/angular/example_component_ts.md b/static/usage/v8/label/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..f3dbc76461
--- /dev/null
+++ b/static/usage/v8/label/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/label/item/index.md b/static/usage/v8/label/item/index.md
index 4e872990d1..d06297eb34 100644
--- a/static/usage/v8/label/item/index.md
+++ b/static/usage/v8/label/item/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/label/item/demo.html" size="medium" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/label/item/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v8/label/theming/colors/angular.md b/static/usage/v8/label/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/label/theming/colors/angular.md
rename to static/usage/v8/label/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/label/theming/colors/angular/example_component_ts.md b/static/usage/v8/label/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..5a7fdcebe2
--- /dev/null
+++ b/static/usage/v8/label/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/label/theming/colors/index.md b/static/usage/v8/label/theming/colors/index.md
index bf94e2a9a3..840dfd5137 100644
--- a/static/usage/v8/label/theming/colors/index.md
+++ b/static/usage/v8/label/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/label/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/label/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md
index 4e45ccc667..d5a2831627 100644
--- a/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md
+++ b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { create } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonFooter,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/list-header/basic/angular.md b/static/usage/v8/list-header/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list-header/basic/angular.md
rename to static/usage/v8/list-header/basic/angular/example_component_html.md
diff --git a/static/usage/v8/list-header/basic/angular/example_component_ts.md b/static/usage/v8/list-header/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd5f0b5005
--- /dev/null
+++ b/static/usage/v8/list-header/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list-header/basic/index.md b/static/usage/v8/list-header/basic/index.md
index b54ef34c48..487e450de8 100644
--- a/static/usage/v8/list-header/basic/index.md
+++ b/static/usage/v8/list-header/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/list-header/basic/demo.html"
   size="325px"
 />
diff --git a/static/usage/v8/list-header/buttons/angular.md b/static/usage/v8/list-header/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list-header/buttons/angular.md
rename to static/usage/v8/list-header/buttons/angular/example_component_html.md
diff --git a/static/usage/v8/list-header/buttons/angular/example_component_ts.md b/static/usage/v8/list-header/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..a608c44a22
--- /dev/null
+++ b/static/usage/v8/list-header/buttons/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list-header/buttons/index.md b/static/usage/v8/list-header/buttons/index.md
index 2acfe8959d..ca9d287927 100644
--- a/static/usage/v8/list-header/buttons/index.md
+++ b/static/usage/v8/list-header/buttons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/list-header/buttons/demo.html"
   size="325px"
 />
diff --git a/static/usage/v8/list-header/lines/angular.md b/static/usage/v8/list-header/lines/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list-header/lines/angular.md
rename to static/usage/v8/list-header/lines/angular/example_component_html.md
diff --git a/static/usage/v8/list-header/lines/angular/example_component_ts.md b/static/usage/v8/list-header/lines/angular/example_component_ts.md
new file mode 100644
index 0000000000..dd5f0b5005
--- /dev/null
+++ b/static/usage/v8/list-header/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list-header/lines/index.md b/static/usage/v8/list-header/lines/index.md
index 9985549920..06db229478 100644
--- a/static/usage/v8/list-header/lines/index.md
+++ b/static/usage/v8/list-header/lines/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/list-header/lines/demo.html"
   size="500px"
 />
diff --git a/static/usage/v8/list-header/theming/colors/angular.md b/static/usage/v8/list-header/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list-header/theming/colors/angular.md
rename to static/usage/v8/list-header/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..3a455a0c90
--- /dev/null
+++ b/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list-header/theming/colors/index.md b/static/usage/v8/list-header/theming/colors/index.md
index eddf36b82d..0ef8168a62 100644
--- a/static/usage/v8/list-header/theming/colors/index.md
+++ b/static/usage/v8/list-header/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/list-header/theming/colors/demo.html"
   size="650px"
 />
diff --git a/static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..3a455a0c90
--- /dev/null
+++ b/static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonListHeader } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonListHeader],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list-header/theming/css-properties/index.md b/static/usage/v8/list-header/theming/css-properties/index.md
index c04c154d6e..2602475525 100644
--- a/static/usage/v8/list-header/theming/css-properties/index.md
+++ b/static/usage/v8/list-header/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/list/basic/angular.md b/static/usage/v8/list/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list/basic/angular.md
rename to static/usage/v8/list/basic/angular/example_component_html.md
diff --git a/static/usage/v8/list/basic/angular/example_component_ts.md b/static/usage/v8/list/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef7c74f5d4
--- /dev/null
+++ b/static/usage/v8/list/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list/basic/index.md b/static/usage/v8/list/basic/index.md
index 759af31e99..e73fe55f12 100644
--- a/static/usage/v8/list/basic/index.md
+++ b/static/usage/v8/list/basic/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/list/basic/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/list/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/list/inset/angular.md b/static/usage/v8/list/inset/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list/inset/angular.md
rename to static/usage/v8/list/inset/angular/example_component_html.md
diff --git a/static/usage/v8/list/inset/angular/example_component_ts.md b/static/usage/v8/list/inset/angular/example_component_ts.md
new file mode 100644
index 0000000000..0ebeec81ff
--- /dev/null
+++ b/static/usage/v8/list/inset/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list/inset/index.md b/static/usage/v8/list/inset/index.md
index 9d6ecb1fc1..50e48fd5af 100644
--- a/static/usage/v8/list/inset/index.md
+++ b/static/usage/v8/list/inset/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/list/inset/demo.html"
   size="350px"
   includeIonContent={false}
diff --git a/static/usage/v8/list/lines/angular.md b/static/usage/v8/list/lines/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/list/lines/angular.md
rename to static/usage/v8/list/lines/angular/example_component_html.md
diff --git a/static/usage/v8/list/lines/angular/example_component_ts.md b/static/usage/v8/list/lines/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef7c74f5d4
--- /dev/null
+++ b/static/usage/v8/list/lines/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/list/lines/index.md b/static/usage/v8/list/lines/index.md
index ca3f8f77b0..5f6a417459 100644
--- a/static/usage/v8/list/lines/index.md
+++ b/static/usage/v8/list/lines/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/list/lines/demo.html" size="500px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/list/lines/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v8/loading/controller/angular/example_component_ts.md b/static/usage/v8/loading/controller/angular/example_component_ts.md
index bd4b86eef2..cec468c627 100644
--- a/static/usage/v8/loading/controller/angular/example_component_ts.md
+++ b/static/usage/v8/loading/controller/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { LoadingController } from '@ionic/angular';
+import { IonButton, LoadingController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private loadingCtrl: LoadingController) {}
diff --git a/static/usage/v8/loading/inline/angular.md b/static/usage/v8/loading/inline/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/loading/inline/angular.md
rename to static/usage/v8/loading/inline/angular/example_component_html.md
diff --git a/static/usage/v8/loading/inline/angular/example_component_ts.md b/static/usage/v8/loading/inline/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v8/loading/inline/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/loading/inline/index.md b/static/usage/v8/loading/inline/index.md
index 2ca1e9b78d..16ec10fcab 100644
--- a/static/usage/v8/loading/inline/index.md
+++ b/static/usage/v8/loading/inline/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/loading/inline/demo.html"
 />
diff --git a/static/usage/v8/loading/spinners/angular.md b/static/usage/v8/loading/spinners/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/loading/spinners/angular.md
rename to static/usage/v8/loading/spinners/angular/example_component_html.md
diff --git a/static/usage/v8/loading/spinners/angular/example_component_ts.md b/static/usage/v8/loading/spinners/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v8/loading/spinners/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/loading/spinners/index.md b/static/usage/v8/loading/spinners/index.md
index d2d4ec70db..f340c1500f 100644
--- a/static/usage/v8/loading/spinners/index.md
+++ b/static/usage/v8/loading/spinners/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -11,7 +13,12 @@ import vue from './vue.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/loading/spinners/demo.html"
 />
diff --git a/static/usage/v8/loading/theming/angular/example_component_ts.md b/static/usage/v8/loading/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..1807657477
--- /dev/null
+++ b/static/usage/v8/loading/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonLoading } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonLoading],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/loading/theming/index.md b/static/usage/v8/loading/theming/index.md
index d2ed15da29..e2b3d52073 100644
--- a/static/usage/v8/loading/theming/index.md
+++ b/static/usage/v8/loading/theming/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/menu/basic/angular.md b/static/usage/v8/menu/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/menu/basic/angular.md
rename to static/usage/v8/menu/basic/angular/example_component_html.md
diff --git a/static/usage/v8/menu/basic/angular/example_component_ts.md b/static/usage/v8/menu/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a72338d19
--- /dev/null
+++ b/static/usage/v8/menu/basic/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/menu/basic/index.md b/static/usage/v8/menu/basic/index.md
index 26cdbe5a99..5655a64f95 100644
--- a/static/usage/v8/menu/basic/index.md
+++ b/static/usage/v8/menu/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/menu/basic/demo.html"
   devicePreview
diff --git a/static/usage/v8/menu/multiple/angular/example_component_ts.md b/static/usage/v8/menu/multiple/angular/example_component_ts.md
index 3c4f3f1fbb..b52e182b29 100644
--- a/static/usage/v8/menu/multiple/angular/example_component_ts.md
+++ b/static/usage/v8/menu/multiple/angular/example_component_ts.md
@@ -1,10 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-import { MenuController } from '@ionic/angular';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonTitle,
+  IonToolbar,
+  MenuController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor(private menuCtrl: MenuController) {}
diff --git a/static/usage/v8/menu/sides/angular.md b/static/usage/v8/menu/sides/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/menu/sides/angular.md
rename to static/usage/v8/menu/sides/angular/example_component_html.md
diff --git a/static/usage/v8/menu/sides/angular/example_component_ts.md b/static/usage/v8/menu/sides/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a72338d19
--- /dev/null
+++ b/static/usage/v8/menu/sides/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/menu/sides/index.md b/static/usage/v8/menu/sides/index.md
index d412409f6c..bde2439730 100644
--- a/static/usage/v8/menu/sides/index.md
+++ b/static/usage/v8/menu/sides/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/menu/sides/demo.html"
   devicePreview
diff --git a/static/usage/v8/menu/theming/angular/example_component_ts.md b/static/usage/v8/menu/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..44a5ab0fab
--- /dev/null
+++ b/static/usage/v8/menu/theming/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonApp,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonApp, IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/menu/theming/index.md b/static/usage/v8/menu/theming/index.md
index 9b331cc56e..60e9925fb8 100644
--- a/static/usage/v8/menu/theming/index.md
+++ b/static/usage/v8/menu/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/menu/toggle/angular.md b/static/usage/v8/menu/toggle/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/menu/toggle/angular.md
rename to static/usage/v8/menu/toggle/angular/example_component_html.md
diff --git a/static/usage/v8/menu/toggle/angular/example_component_ts.md b/static/usage/v8/menu/toggle/angular/example_component_ts.md
new file mode 100644
index 0000000000..f1cb627698
--- /dev/null
+++ b/static/usage/v8/menu/toggle/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/menu/toggle/index.md b/static/usage/v8/menu/toggle/index.md
index f8ae3f4892..11b20c7f67 100644
--- a/static/usage/v8/menu/toggle/index.md
+++ b/static/usage/v8/menu/toggle/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/menu/toggle/demo.html"
   devicePreview
diff --git a/static/usage/v8/menu/type/angular/example_component_ts.md b/static/usage/v8/menu/type/angular/example_component_ts.md
index 5f03ec13b7..1c304dad52 100644
--- a/static/usage/v8/menu/type/angular/example_component_ts.md
+++ b/static/usage/v8/menu/type/angular/example_component_ts.md
@@ -1,9 +1,36 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonMenu,
+  IonMenuToggle,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonMenu,
+    IonMenuToggle,
+    IonRadio,
+    IonRadioGroup,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   menuType: string = 'overlay';
diff --git a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
index b13c147dc2..eeb7aa9fce 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -1,15 +1,28 @@
 ```ts
 import { Component } from '@angular/core';
-import { CheckboxCustomEvent } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   canDismiss = false;
 
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');
diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md
deleted file mode 100644
index b273d851f9..0000000000
--- a/static/usage/v8/modal/can-dismiss/child-state/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 { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-import { ChildComponent } from './child.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, ChildComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md
index 420359602a..7c1f7d610a 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md
@@ -1,20 +1,33 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
-import { CheckboxCustomEvent, IonModal } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonModal,
+  IonNote,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-child',
   templateUrl: 'child.component.html',
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonNote, IonToolbar, IonTitle],
 })
 export class ChildComponent {
   @Input() modal!: IonModal;
 
   @Output() dismissChange = new EventEmitter<boolean>();
 
-  checkboxChanged(event: any) {
-    const ev = event as CheckboxCustomEvent;
-    const checked = ev.detail.checked;
+  checkboxChanged(event: CheckboxCustomEvent) {
+    const checked = event.detail.checked;
 
     this.dismissChange.emit(checked);
   }
diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md
index 19544ec574..1f1f3fd5e5 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md
@@ -1,14 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  ActionSheetController,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
+import { ChildComponent } from './child.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
diff --git a/static/usage/v8/modal/can-dismiss/child-state/index.md b/static/usage/v8/modal/can-dismiss/child-state/index.md
index 75821bfd69..786aff9a00 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/index.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/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_child_component_html from './angular/child_component_html.md';
 import angular_child_component_ts from './angular/child_component_ts.md';
-import angular_app_module_ts from './angular/app_module_ts.md';
 
 <Playground
   version="8"
@@ -33,7 +32,6 @@ import angular_app_module_ts from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/child.component.html': angular_child_component_html,
         'src/app/child.component.ts': angular_child_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
   }}
diff --git a/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md
index a62465cfee..35aace1d20 100644
--- a/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md
@@ -1,14 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ActionSheetController } from '@ionic/angular';
+import {
+  ActionSheetController,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   constructor(private actionSheetCtrl: ActionSheetController) {}
 
diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
index 788b9a14c0..5cf4b754bf 100644
--- a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md
@@ -1,12 +1,23 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  async canDismiss(data?: any, role?: string) {
+  async canDismiss(data?: undefined, role?: string) {
     return role !== 'gesture';
   }
 }
diff --git a/static/usage/v8/modal/card/basic/angular/example_component_ts.md b/static/usage/v8/modal/card/basic/angular/example_component_ts.md
index 5a28a156a3..1dad2a6af9 100644
--- a/static/usage/v8/modal/card/basic/angular/example_component_ts.md
+++ b/static/usage/v8/modal/card/basic/angular/example_component_ts.md
@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');
diff --git a/static/usage/v8/modal/controller/angular/app_module_ts.md b/static/usage/v8/modal/controller/angular/app_module_ts.md
deleted file mode 100644
index e9e4f00dff..0000000000
--- a/static/usage/v8/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/v8/modal/controller/angular/example_component_ts.md b/static/usage/v8/modal/controller/angular/example_component_ts.md
index 920a233525..8f8c0acde9 100644
--- a/static/usage/v8/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v8/modal/controller/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
 
-import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [FormsModule, IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';
diff --git a/static/usage/v8/modal/controller/angular/modal-example_component_ts.md b/static/usage/v8/modal/controller/angular/modal-example_component_ts.md
index 621996015b..e82dcffc02 100644
--- a/static/usage/v8/modal/controller/angular/modal-example_component_ts.md
+++ b/static/usage/v8/modal/controller/angular/modal-example_component_ts.md
@@ -1,14 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { ModalController } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: 'modal-example.component.html',
+  imports: [FormsModule, IonButton, IonButtons, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
 })
 export class ModalExampleComponent {
-  name: string;
+  name!: string;
 
   constructor(private modalCtrl: ModalController) {}
 
diff --git a/static/usage/v8/modal/controller/index.md b/static/usage/v8/modal/controller/index.md
index 3c8431902f..78b876e1e5 100644
--- a/static/usage/v8/modal/controller/index.md
+++ b/static/usage/v8/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/v8/modal/custom-dialogs/angular/example_component_ts.md b/static/usage/v8/modal/custom-dialogs/angular/example_component_ts.md
index 387bce9547..9c60713564 100644
--- a/static/usage/v8/modal/custom-dialogs/angular/example_component_ts.md
+++ b/static/usage/v8/modal/custom-dialogs/angular/example_component_ts.md
@@ -1,5 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle } from 'ionicons/icons';
@@ -8,6 +20,7 @@ import { personCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/modal/inline/basic/angular/example_component_ts.md b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
index a21954ec5f..ab087edaad 100644
--- a/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
@@ -1,17 +1,41 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonInput,
+    IonItem,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
-  @ViewChild(IonModal) modal: IonModal;
+  @ViewChild(IonModal) modal!: IonModal;
 
   message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
-  name: string;
+  name!: string;
 
   cancel() {
     this.modal.dismiss(null, 'cancel');
diff --git a/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md
index 321577939a..7e324c0446 100644
--- a/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v8/modal/performance/mount/angular.md b/static/usage/v8/modal/performance/mount/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/modal/performance/mount/angular.md
rename to static/usage/v8/modal/performance/mount/angular/example_component_html.md
diff --git a/static/usage/v8/modal/performance/mount/angular/example_component_ts.md b/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
new file mode 100644
index 0000000000..834c04ea00
--- /dev/null
+++ b/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/performance/mount/index.md b/static/usage/v8/modal/performance/mount/index.md
index 3123a5a89d..7c5f088c5e 100644
--- a/static/usage/v8/modal/performance/mount/index.md
+++ b/static/usage/v8/modal/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/modal/performance/mount/demo.html"
   devicePreview
diff --git a/static/usage/v8/modal/sheet/auto-height/angular/example_component_ts.md b/static/usage/v8/modal/sheet/auto-height/angular/example_component_ts.md
new file mode 100644
index 0000000000..60d2613a19
--- /dev/null
+++ b/static/usage/v8/modal/sheet/auto-height/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/sheet/auto-height/index.md b/static/usage/v8/modal/sheet/auto-height/index.md
index 26469dbb86..3e37214f64 100644
--- a/static/usage/v8/modal/sheet/auto-height/index.md
+++ b/static/usage/v8/modal/sheet/auto-height/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -24,6 +25,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md
index e132d2f84c..1b0d5bfcb8 100644
--- a/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md
+++ b/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md
@@ -1,10 +1,38 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   count = 0;
diff --git a/static/usage/v8/modal/sheet/basic/angular.md b/static/usage/v8/modal/sheet/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/modal/sheet/basic/angular.md
rename to static/usage/v8/modal/sheet/basic/angular/example_component_html.md
diff --git a/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md b/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0a7209d892
--- /dev/null
+++ b/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/sheet/basic/index.md b/static/usage/v8/modal/sheet/basic/index.md
index 533e643040..cd57113bf4 100644
--- a/static/usage/v8/modal/sheet/basic/index.md
+++ b/static/usage/v8/modal/sheet/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/modal/sheet/basic/demo.html"
   devicePreview
diff --git a/static/usage/v8/modal/sheet/handle-behavior/angular.md b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/modal/sheet/handle-behavior/angular.md
rename to static/usage/v8/modal/sheet/handle-behavior/angular/example_component_html.md
diff --git a/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md
new file mode 100644
index 0000000000..ee03f01adc
--- /dev/null
+++ b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/sheet/handle-behavior/index.md b/static/usage/v8/modal/sheet/handle-behavior/index.md
index e1f2e9865a..98cde271f0 100644
--- a/static/usage/v8/modal/sheet/handle-behavior/index.md
+++ b/static/usage/v8/modal/sheet/handle-behavior/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import vue from './vue.md';
 import react from './react.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/modal/sheet/handle-behavior/demo.html"
   devicePreview
diff --git a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md
index c4a743b274..3adcfbfb56 100644
--- a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md
+++ b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md
@@ -1,10 +1,39 @@
 ```ts
 import { Component } from '@angular/core';
-import { AnimationController } from '@ionic/angular';
+import {
+  AnimationController,
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}
@@ -14,12 +43,12 @@ export class ExampleComponent {
 
     const backdropAnimation = this.animationCtrl
       .create()
-      .addElement(root.querySelector('ion-backdrop')!)
+      .addElement(root!.querySelector('ion-backdrop')!)
       .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
 
     const wrapperAnimation = this.animationCtrl
       .create()
-      .addElement(root.querySelector('.modal-wrapper')!)
+      .addElement(root!.querySelector('.modal-wrapper')!)
       .keyframes([
         { offset: 0, opacity: '0', transform: 'scale(0)' },
         { offset: 1, opacity: '0.99', transform: 'scale(1)' },
diff --git a/static/usage/v8/modal/styling/theming/angular/example_component_ts.md b/static/usage/v8/modal/styling/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..7db30b437f
--- /dev/null
+++ b/static/usage/v8/modal/styling/theming/angular/example_component_ts.md
@@ -0,0 +1,38 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonImg,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonImg,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/modal/styling/theming/index.md b/static/usage/v8/modal/styling/theming/index.md
index beb0551801..5ffcfe265f 100644
--- a/static/usage/v8/modal/styling/theming/index.md
+++ b/static/usage/v8/modal/styling/theming/index.md
@@ -6,8 +6,9 @@ import vue from './vue.md';
 import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
-import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="8"
@@ -23,6 +24,7 @@ import angular_example_component_html from './angular/example_component_html.md'
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6c..0000000000
--- a/static/usage/v8/nav/modal-navigation/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/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246..1c3ee80655 100644
--- a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
@@ -1,15 +1,26 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d0..6467b66e9a 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c347..03f298b15a 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c06..769b0bc9bd 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/modal-navigation/index.md b/static/usage/v8/nav/modal-navigation/index.md
index 3a6a6ab314..e2e7320fe4 100644
--- a/static/usage/v8/nav/modal-navigation/index.md
+++ b/static/usage/v8/nav/modal-navigation/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_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.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: {
diff --git a/static/usage/v8/nav/nav-link/angular/app_module_ts.md b/static/usage/v8/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6c..0000000000
--- a/static/usage/v8/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/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
index b123a4858c..4c364e7234 100644
--- a/static/usage/v8/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342c..b6a83169e1 100644
--- a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed721..4cc4fc01be 100644
--- a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a59..d1986f19a9 100644
--- a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/nav-link/index.md b/static/usage/v8/nav/nav-link/index.md
index eed4ca22d8..07a944aefd 100644
--- a/static/usage/v8/nav/nav-link/index.md
+++ b/static/usage/v8/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: {
diff --git a/static/usage/v8/note/basic/angular.md b/static/usage/v8/note/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/note/basic/angular.md
rename to static/usage/v8/note/basic/angular/example_component_html.md
diff --git a/static/usage/v8/note/basic/angular/example_component_ts.md b/static/usage/v8/note/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v8/note/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/note/basic/index.md b/static/usage/v8/note/basic/index.md
index 80679ac212..1561441d32 100644
--- a/static/usage/v8/note/basic/index.md
+++ b/static/usage/v8/note/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/note/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/note/basic/demo.html"
+/>
diff --git a/static/usage/v8/note/item/angular.md b/static/usage/v8/note/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/note/item/angular.md
rename to static/usage/v8/note/item/angular/example_component_html.md
diff --git a/static/usage/v8/note/item/angular/example_component_ts.md b/static/usage/v8/note/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..56ed0d0187
--- /dev/null
+++ b/static/usage/v8/note/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/note/item/index.md b/static/usage/v8/note/item/index.md
index ff7e768cc2..9a07139ebc 100644
--- a/static/usage/v8/note/item/index.md
+++ b/static/usage/v8/note/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/note/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/note/item/demo.html"
+/>
diff --git a/static/usage/v8/note/theming/colors/angular.md b/static/usage/v8/note/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/note/theming/colors/angular.md
rename to static/usage/v8/note/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/note/theming/colors/angular/example_component_ts.md b/static/usage/v8/note/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v8/note/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/note/theming/colors/index.md b/static/usage/v8/note/theming/colors/index.md
index 7901852131..6ab9f4a430 100644
--- a/static/usage/v8/note/theming/colors/index.md
+++ b/static/usage/v8/note/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/note/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/note/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/note/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..38db87894b
--- /dev/null
+++ b/static/usage/v8/note/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNote } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNote],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/note/theming/css-properties/index.md b/static/usage/v8/note/theming/css-properties/index.md
index c0b40585c5..434c963d63 100644
--- a/static/usage/v8/note/theming/css-properties/index.md
+++ b/static/usage/v8/note/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/picker-legacy/controller/angular/example_component_ts.md b/static/usage/v8/picker-legacy/controller/angular/example_component_ts.md
index 16f56cd0ca..35edd60c59 100644
--- a/static/usage/v8/picker-legacy/controller/angular/example_component_ts.md
+++ b/static/usage/v8/picker-legacy/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { PickerController } from '@ionic/angular';
+import { IonButton, PickerController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private pickerCtrl: PickerController) {}
diff --git a/static/usage/v8/picker-legacy/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/picker-legacy/inline/isOpen/angular/example_component_ts.md
index 69a5fb611a..d2f1144a79 100644
--- a/static/usage/v8/picker-legacy/inline/isOpen/angular/example_component_ts.md
+++ b/static/usage/v8/picker-legacy/inline/isOpen/angular/example_component_ts.md
@@ -1,9 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPickerLegacy } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  languages: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPickerLegacy],
 })
 export class ExampleComponent {
   isPickerOpen = false;
@@ -39,7 +49,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected: ${value.languages.value}`);
       },
     },
diff --git a/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md b/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md
index 7a638c6096..31eb752d4a 100644
--- a/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md
+++ b/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md
@@ -1,9 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPickerLegacy } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  languages: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPickerLegacy],
 })
 export class ExampleComponent {
   public pickerColumns = [
@@ -37,7 +47,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected: ${value.languages.value}`);
       },
     },
diff --git a/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md b/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md
index 6f252e19dc..5ac50ceecf 100644
--- a/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md
+++ b/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md
@@ -1,9 +1,27 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonPickerLegacy } from '@ionic/angular/standalone';
+
+interface PickerValue {
+  meat: {
+    text: string;
+    value: string;
+  };
+  veggies: {
+    text: string;
+    value: string;
+  };
+  crust: {
+    text: string;
+    value: string;
+  };
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonPickerLegacy],
 })
 export class ExampleComponent {
   public pickerColumns = [
@@ -67,7 +85,7 @@ export class ExampleComponent {
     },
     {
       text: 'Confirm',
-      handler: (value) => {
+      handler: (value: PickerValue) => {
         console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
       },
     },
diff --git a/static/usage/v8/picker/basic/angular.md b/static/usage/v8/picker/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/picker/basic/angular.md
rename to static/usage/v8/picker/basic/angular/example_component_html.md
diff --git a/static/usage/v8/picker/basic/angular/example_component_ts.md b/static/usage/v8/picker/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..a2519198b5
--- /dev/null
+++ b/static/usage/v8/picker/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/picker/basic/index.md b/static/usage/v8/picker/basic/index.md
index ded2d4fe4b..57c99c522c 100644
--- a/static/usage/v8/picker/basic/index.md
+++ b/static/usage/v8/picker/basic/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -11,7 +13,12 @@ import vue from './vue.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/picker/basic/demo.html"
   size="medium"
diff --git a/static/usage/v8/picker/modal/angular/example_component_ts.md b/static/usage/v8/picker/modal/angular/example_component_ts.md
index 406b87a5af..72ecb6a854 100644
--- a/static/usage/v8/picker/modal/angular/example_component_ts.md
+++ b/static/usage/v8/picker/modal/angular/example_component_ts.md
@@ -1,10 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonModal,
+  IonPicker,
+  IonPickerColumn,
+  IonPickerColumnOption,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonButton, IonButtons, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar],
 })
 export class ExampleComponent {
   currentValue = 'javascript';
diff --git a/static/usage/v8/picker/prefix-suffix/angular.md b/static/usage/v8/picker/prefix-suffix/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/picker/prefix-suffix/angular.md
rename to static/usage/v8/picker/prefix-suffix/angular/example_component_html.md
diff --git a/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md b/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md
new file mode 100644
index 0000000000..a2519198b5
--- /dev/null
+++ b/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/picker/prefix-suffix/index.md b/static/usage/v8/picker/prefix-suffix/index.md
index af398fd03a..0b50e1e63a 100644
--- a/static/usage/v8/picker/prefix-suffix/index.md
+++ b/static/usage/v8/picker/prefix-suffix/index.md
@@ -1,7 +1,9 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.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';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -11,7 +13,12 @@ import vue from './vue.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/picker/prefix-suffix/demo.html"
   size="medium"
diff --git a/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..a2519198b5
--- /dev/null
+++ b/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonPicker, IonPickerColumn, IonPickerColumnOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/picker/theming/css-properties/index.md b/static/usage/v8/picker/theming/css-properties/index.md
index 29f6db3c1c..1c5abe2894 100644
--- a/static/usage/v8/picker/theming/css-properties/index.md
+++ b/static/usage/v8/picker/theming/css-properties/index.md
@@ -4,6 +4,7 @@ import javascript from './javascript.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 import vue from './vue.md';
 
@@ -25,6 +26,7 @@ import react_main_css from './react/main_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
index 4db53a836a..3d0ceecf83 100644
--- a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/popover/customization/sizing/angular.md b/static/usage/v8/popover/customization/sizing/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/popover/customization/sizing/angular.md
rename to static/usage/v8/popover/customization/sizing/angular/example_component_html.md
diff --git a/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/customization/sizing/index.md b/static/usage/v8/popover/customization/sizing/index.md
index 1d79e113da..5848dbfe32 100644
--- a/static/usage/v8/popover/customization/sizing/index.md
+++ b/static/usage/v8/popover/customization/sizing/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/customization/sizing/demo.html"
 />
diff --git a/static/usage/v8/popover/customization/styling/angular/example_component_ts.md b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/customization/styling/index.md b/static/usage/v8/popover/customization/styling/index.md
index 4e9429b2f2..6434328a3c 100644
--- a/static/usage/v8/popover/customization/styling/index.md
+++ b/static/usage/v8/popover/customization/styling/index.md
@@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/popover/nested/angular.md b/static/usage/v8/popover/nested/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/popover/nested/angular.md
rename to static/usage/v8/popover/nested/angular/example_component_html.md
diff --git a/static/usage/v8/popover/nested/angular/example_component_ts.md b/static/usage/v8/popover/nested/angular/example_component_ts.md
new file mode 100644
index 0000000000..b32f800ad5
--- /dev/null
+++ b/static/usage/v8/popover/nested/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/nested/index.md b/static/usage/v8/popover/nested/index.md
index f1f7f46524..5600f89d7e 100644
--- a/static/usage/v8/popover/nested/index.md
+++ b/static/usage/v8/popover/nested/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/nested/demo.html"
 />
diff --git a/static/usage/v8/popover/performance/mount/angular.md b/static/usage/v8/popover/performance/mount/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/popover/performance/mount/angular.md
rename to static/usage/v8/popover/performance/mount/angular/example_component_html.md
diff --git a/static/usage/v8/popover/performance/mount/angular/example_component_ts.md b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/performance/mount/index.md b/static/usage/v8/popover/performance/mount/index.md
index b6b291a703..ea6103db4f 100644
--- a/static/usage/v8/popover/performance/mount/index.md
+++ b/static/usage/v8/popover/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="medium"
   src="usage/v8/popover/performance/mount/demo.html"
diff --git a/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md
deleted file mode 100644
index 887ca3acf8..0000000000
--- a/static/usage/v8/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/v8/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
index 647bef04da..0ef12b6fd4 100644
--- a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
@@ -1,13 +1,14 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
-
-import { PopoverController } from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonButton, PopoverController } from '@ionic/angular/standalone';
 
 import { PopoverComponent } from './popover.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(public popoverController: PopoverController) {}
diff --git a/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
index 2900a32240..64d3666e3e 100644
--- a/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
@@ -1,10 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
+  imports: [IonContent],
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v8/popover/presenting/controller/index.md b/static/usage/v8/popover/presenting/controller/index.md
index 3593122f0c..35d31f2449 100644
--- a/static/usage/v8/popover/presenting/controller/index.md
+++ b/static/usage/v8/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="8"
@@ -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/v8/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
index ef604e603d..617cd653a4 100644
--- a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -1,12 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
 
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular.md b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/popover/presenting/inline-trigger/angular.md
rename to static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
new file mode 100644
index 0000000000..3d0ceecf83
--- /dev/null
+++ b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/presenting/inline-trigger/index.md b/static/usage/v8/popover/presenting/inline-trigger/index.md
index 4f9756466f..051e50ad13 100644
--- a/static/usage/v8/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v8/popover/presenting/inline-trigger/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/presenting/inline-trigger/demo.html"
 />
diff --git a/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md
index a876a37620..fbf879f8d3 100644
--- a/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md
+++ b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
 })
 export class ExampleComponent {
   public buffer = 0.06;
diff --git a/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md
index 971d3d92ed..383264f58d 100644
--- a/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md
+++ b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
 })
 export class ExampleComponent {
   public progress = 0;
diff --git a/static/usage/v8/progress-bar/indeterminate/angular.md b/static/usage/v8/progress-bar/indeterminate/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/progress-bar/indeterminate/angular.md
rename to static/usage/v8/progress-bar/indeterminate/angular/example_component_html.md
diff --git a/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md b/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/progress-bar/indeterminate/index.md b/static/usage/v8/progress-bar/indeterminate/index.md
index e99ce0cc14..68d830442d 100644
--- a/static/usage/v8/progress-bar/indeterminate/index.md
+++ b/static/usage/v8/progress-bar/indeterminate/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/progress-bar/indeterminate/demo.html"
 />
diff --git a/static/usage/v8/progress-bar/theming/colors/angular.md b/static/usage/v8/progress-bar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/progress-bar/theming/colors/angular.md
rename to static/usage/v8/progress-bar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md b/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/progress-bar/theming/colors/index.md b/static/usage/v8/progress-bar/theming/colors/index.md
index 05b08cb194..c5dcbfb086 100644
--- a/static/usage/v8/progress-bar/theming/colors/index.md
+++ b/static/usage/v8/progress-bar/theming/colors/index.md
@@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/progress-bar/theming/colors/demo.html"
 />
diff --git a/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/progress-bar/theming/css-properties/index.md b/static/usage/v8/progress-bar/theming/css-properties/index.md
index 3bf29e18b5..b5fbd39209 100644
--- a/static/usage/v8/progress-bar/theming/css-properties/index.md
+++ b/static/usage/v8/progress-bar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..5d74447ede
--- /dev/null
+++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonProgressBar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md
index a671d69d19..48076d7133 100644
--- a/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/radio/alignment/angular.md b/static/usage/v8/radio/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/alignment/angular.md
rename to static/usage/v8/radio/alignment/angular/example_component_html.md
diff --git a/static/usage/v8/radio/alignment/angular/example_component_ts.md b/static/usage/v8/radio/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..151a9f44f8
--- /dev/null
+++ b/static/usage/v8/radio/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/alignment/index.md b/static/usage/v8/radio/alignment/index.md
index 3295ae6ad4..a044f43293 100644
--- a/static/usage/v8/radio/alignment/index.md
+++ b/static/usage/v8/radio/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/radio/alignment/demo.html"
 />
diff --git a/static/usage/v8/radio/basic/angular.md b/static/usage/v8/radio/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/basic/angular.md
rename to static/usage/v8/radio/basic/angular/example_component_html.md
diff --git a/static/usage/v8/radio/basic/angular/example_component_ts.md b/static/usage/v8/radio/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/basic/index.md b/static/usage/v8/radio/basic/index.md
index 1a1d7367b6..b82637e4ce 100644
--- a/static/usage/v8/radio/basic/index.md
+++ b/static/usage/v8/radio/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/radio/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/basic/demo.html"
+/>
diff --git a/static/usage/v8/radio/empty-selection/angular.md b/static/usage/v8/radio/empty-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/empty-selection/angular.md
rename to static/usage/v8/radio/empty-selection/angular/example_component_html.md
diff --git a/static/usage/v8/radio/empty-selection/angular/example_component_ts.md b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/empty-selection/index.md b/static/usage/v8/radio/empty-selection/index.md
index a744c25de4..3bf64f07cd 100644
--- a/static/usage/v8/radio/empty-selection/index.md
+++ b/static/usage/v8/radio/empty-selection/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/radio/empty-selection/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/empty-selection/demo.html"
+/>
diff --git a/static/usage/v8/radio/justify/angular.md b/static/usage/v8/radio/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/justify/angular.md
rename to static/usage/v8/radio/justify/angular/example_component_html.md
diff --git a/static/usage/v8/radio/justify/angular/example_component_ts.md b/static/usage/v8/radio/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..151a9f44f8
--- /dev/null
+++ b/static/usage/v8/radio/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/justify/index.md b/static/usage/v8/radio/justify/index.md
index 250bf8b59d..127c1c10b9 100644
--- a/static/usage/v8/radio/justify/index.md
+++ b/static/usage/v8/radio/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/radio/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/justify/demo.html"
+/>
diff --git a/static/usage/v8/radio/label-placement/angular.md b/static/usage/v8/radio/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/label-placement/angular.md
rename to static/usage/v8/radio/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/radio/label-placement/angular/example_component_ts.md b/static/usage/v8/radio/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/label-placement/index.md b/static/usage/v8/radio/label-placement/index.md
index 3e0c513c00..8d07ec15d5 100644
--- a/static/usage/v8/radio/label-placement/index.md
+++ b/static/usage/v8/radio/label-placement/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/radio/label-placement/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/radio/label-placement/demo.html"
+/>
diff --git a/static/usage/v8/radio/theming/colors/angular.md b/static/usage/v8/radio/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/radio/theming/colors/angular.md
rename to static/usage/v8/radio/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/radio/theming/colors/angular/example_component_ts.md b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/theming/colors/index.md b/static/usage/v8/radio/theming/colors/index.md
index df88b57f34..747f24c897 100644
--- a/static/usage/v8/radio/theming/colors/index.md
+++ b/static/usage/v8/radio/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/radio/theming/colors/demo.html"
   size="100px"
 />
diff --git a/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/theming/css-properties/index.md b/static/usage/v8/radio/theming/css-properties/index.md
index d648dca7b0..c5593d5871 100644
--- a/static/usage/v8/radio/theming/css-properties/index.md
+++ b/static/usage/v8/radio/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..f5bf20e746
--- /dev/null
+++ b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRadio, IonRadioGroup],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/radio/theming/css-shadow-parts/index.md b/static/usage/v8/radio/theming/css-shadow-parts/index.md
index 48224c1bef..809f6c180a 100644
--- a/static/usage/v8/radio/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/radio/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_html.md b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md
index 1e5e93819f..e80e73021d 100644
--- a/static/usage/v8/radio/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v8/radio/using-comparewith/angular/example_component_html.md
@@ -1,9 +1,11 @@
 ```html
 <ion-list>
   <ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
-    <ion-item *ngFor="let food of foods; trackBy: trackItems">
+    @for (food of foods; track food.id) {
+    <ion-item>
       <ion-radio [value]="food">{{ food.name }}</ion-radio>
     </ion-item>
+    }
   </ion-radio-group>
 </ion-list>
 ```
diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
index d7f803aea0..1158167fc1 100644
--- a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonRadio, IonRadioGroup],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,16 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food, o2: Food): boolean {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
-  }
-
-  trackItems(index: number, item: any) {
-    return item.id;
+  handleChange(ev: Event): void {
+    const target = ev.target as HTMLInputElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v8/range/basic/angular.md b/static/usage/v8/range/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/basic/angular.md
rename to static/usage/v8/range/basic/angular/example_component_html.md
diff --git a/static/usage/v8/range/basic/angular/example_component_ts.md b/static/usage/v8/range/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/basic/index.md b/static/usage/v8/range/basic/index.md
index c9d1d3d6e9..83ca81ad71 100644
--- a/static/usage/v8/range/basic/index.md
+++ b/static/usage/v8/range/basic/index.md
@@ -5,6 +5,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/basic/demo.html"
+/>
diff --git a/static/usage/v8/range/dual-knobs/angular.md b/static/usage/v8/range/dual-knobs/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/dual-knobs/angular.md
rename to static/usage/v8/range/dual-knobs/angular/example_component_html.md
diff --git a/static/usage/v8/range/dual-knobs/angular/example_component_ts.md b/static/usage/v8/range/dual-knobs/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/dual-knobs/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/dual-knobs/index.md b/static/usage/v8/range/dual-knobs/index.md
index 06466b2eca..aeb799f755 100644
--- a/static/usage/v8/range/dual-knobs/index.md
+++ b/static/usage/v8/range/dual-knobs/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/dual-knobs/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/dual-knobs/demo.html"
+/>
diff --git a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
index 377ccd2dc2..e150234409 100644
--- a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   onIonChange(ev: Event) {
diff --git a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
index e1b920f66d..b13b84b308 100644
--- a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
@@ -1,11 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { RangeCustomEvent } from '@ionic/angular';
+import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   onIonKnobMoveStart(ev: Event) {
diff --git a/static/usage/v8/range/label-slot/angular.md b/static/usage/v8/range/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/label-slot/angular.md
rename to static/usage/v8/range/label-slot/angular/example_component_html.md
diff --git a/static/usage/v8/range/label-slot/angular/example_component_ts.md b/static/usage/v8/range/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..2c58b35ac6
--- /dev/null
+++ b/static/usage/v8/range/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/label-slot/index.md b/static/usage/v8/range/label-slot/index.md
index 53c51cddf6..57691d79b1 100644
--- a/static/usage/v8/range/label-slot/index.md
+++ b/static/usage/v8/range/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/label-slot/demo.html"
+/>
diff --git a/static/usage/v8/range/labels/angular.md b/static/usage/v8/range/labels/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/labels/angular.md
rename to static/usage/v8/range/labels/angular/example_component_html.md
diff --git a/static/usage/v8/range/labels/angular/example_component_ts.md b/static/usage/v8/range/labels/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/labels/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/labels/index.md b/static/usage/v8/range/labels/index.md
index 4d1d0e54e6..428ffeb3af 100644
--- a/static/usage/v8/range/labels/index.md
+++ b/static/usage/v8/range/labels/index.md
@@ -3,6 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/labels/demo.html" size="300px" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/labels/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/range/no-visible-label/angular.md b/static/usage/v8/range/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/no-visible-label/angular.md
rename to static/usage/v8/range/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v8/range/no-visible-label/angular/example_component_ts.md b/static/usage/v8/range/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/no-visible-label/index.md b/static/usage/v8/range/no-visible-label/index.md
index 5be64329c2..9a5e48175e 100644
--- a/static/usage/v8/range/no-visible-label/index.md
+++ b/static/usage/v8/range/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v8/range/pins/angular/example_component_ts.md b/static/usage/v8/range/pins/angular/example_component_ts.md
index 8dc875e1bd..fdae87ebf9 100644
--- a/static/usage/v8/range/pins/angular/example_component_ts.md
+++ b/static/usage/v8/range/pins/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
 })
 export class ExampleComponent {
   pinFormatter(value: number) {
diff --git a/static/usage/v8/range/slots/angular/example_component_ts.md b/static/usage/v8/range/slots/angular/example_component_ts.md
index f61ba54a33..3ada922624 100644
--- a/static/usage/v8/range/slots/angular/example_component_ts.md
+++ b/static/usage/v8/range/slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonRange } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { snowOutline, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { snowOutline, sunnyOutline } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonRange],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/range/snapping-ticks/angular.md b/static/usage/v8/range/snapping-ticks/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/range/snapping-ticks/angular.md
rename to static/usage/v8/range/snapping-ticks/angular/example_component_html.md
diff --git a/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md b/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/snapping-ticks/index.md b/static/usage/v8/range/snapping-ticks/index.md
index a1d4bc07bd..2f0bf2cd27 100644
--- a/static/usage/v8/range/snapping-ticks/index.md
+++ b/static/usage/v8/range/snapping-ticks/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/range/snapping-ticks/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/range/snapping-ticks/demo.html"
+/>
diff --git a/static/usage/v8/range/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/range/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/theming/css-properties/index.md b/static/usage/v8/range/theming/css-properties/index.md
index 7d1361b30d..ade08cf28b 100644
--- a/static/usage/v8/range/theming/css-properties/index.md
+++ b/static/usage/v8/range/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..24ea50045a
--- /dev/null
+++ b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRange } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRange],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/range/theming/css-shadow-parts/index.md b/static/usage/v8/range/theming/css-shadow-parts/index.md
index abd4c5903b..26f678c892 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_css from './angular/example_component_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_html.md b/static/usage/v8/refresher/advanced/angular/example_component_html.md
index e724a1da71..c2dc6ff3e9 100644
--- a/static/usage/v8/refresher/advanced/angular/example_component_html.md
+++ b/static/usage/v8/refresher/advanced/angular/example_component_html.md
@@ -11,13 +11,15 @@
   </ion-refresher>
 
   <ion-list>
-    <ion-item [button]="true" *ngFor="let item of items">
+    @for (item of items; track item) {
+    <ion-item [button]="true">
       <ion-icon slot="start" color="primary" [name]="item.unread ? 'ellipse' : ''"></ion-icon>
       <ion-label>
         <h2>{{ item.name }}</h2>
         <p>New message from {{ item.name }}</p>
       </ion-label>
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
index 9d1f3a5f19..db6bd8d609 100644
--- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { ellipse } from 'ionicons/icons';
 
+interface Item {
+  name: string;
+  unread: boolean;
+}
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   public names = [
@@ -25,7 +54,7 @@ export class ExampleComponent {
     'Rachel Rabbit',
     'Ted Turtle',
   ];
-  public items = [];
+  public items: Item[] = [];
 
   constructor() {
     /**
@@ -44,7 +73,7 @@ export class ExampleComponent {
     return this.names[Math.floor(Math.random() * this.names.length)];
   }
 
-  addItems(count, unread = false) {
+  addItems(count: number, unread = false) {
     for (let i = 0; i < count; i++) {
       this.items.unshift({
         name: this.chooseRandomName(),
@@ -53,10 +82,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v8/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
index a5ac7eaaa9..8edb4e4dc1 100644
--- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -1,16 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
index 74304953d4..8edb4e4dc1 100644
--- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
@@ -1,15 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event) {
+  handleRefresh(event: CustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      event.target.complete();
+      (event.target as HTMLIonRefresherElement).complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index 7a5c867f79..a0e47f6b8b 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index 17e7d981c8..d4f3cc02ac 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -1,7 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { pizza } from 'ionicons/icons';
@@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index 2cd3dd6674..4ebfef05c5 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,12 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
index af0ff643b2..0914b726e0 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,11 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   public isDisabled = true;
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
index 2485a55824..873daed0e9 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
@@ -3,10 +3,12 @@
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
-    <ion-item *ngFor="let item of items; trackBy: trackItems">
+    @for (item of items; track item) {
+    <ion-item>
       <ion-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
+    }
   </ion-reorder-group>
 </ion-list>
 ```
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index 920f5f81e3..bab1ace34d 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
@@ -23,9 +31,5 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
-
-  trackItems(index: number, itemNumber: number) {
-    return itemNumber;
-  }
 }
 ```
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
index 7a5c867f79..a0e47f6b8b 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -1,11 +1,19 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ItemReorderEventDetail } from '@ionic/angular';
+import {
+  ItemReorderEventDetail,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
   handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
diff --git a/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md b/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/ripple-effect/basic/index.md b/static/usage/v8/ripple-effect/basic/index.md
index 9a0ad84ac8..96c3c3228b 100644
--- a/static/usage/v8/ripple-effect/basic/index.md
+++ b/static/usage/v8/ripple-effect/basic/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/ripple-effect/customizing/angular/example_component_ts.md b/static/usage/v8/ripple-effect/customizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v8/ripple-effect/customizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/ripple-effect/customizing/index.md b/static/usage/v8/ripple-effect/customizing/index.md
index d6d9a3fdd5..7b478dd4ad 100644
--- a/static/usage/v8/ripple-effect/customizing/index.md
+++ b/static/usage/v8/ripple-effect/customizing/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/ripple-effect/type/angular/example_component_ts.md b/static/usage/v8/ripple-effect/type/angular/example_component_ts.md
new file mode 100644
index 0000000000..55c14aafc0
--- /dev/null
+++ b/static/usage/v8/ripple-effect/type/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonRippleEffect } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonRippleEffect],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/ripple-effect/type/index.md b/static/usage/v8/ripple-effect/type/index.md
index dd9939791c..c23340bbe7 100644
--- a/static/usage/v8/ripple-effect/type/index.md
+++ b/static/usage/v8/ripple-effect/type/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/searchbar/basic/angular.md b/static/usage/v8/searchbar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/searchbar/basic/angular.md
rename to static/usage/v8/searchbar/basic/angular/example_component_html.md
diff --git a/static/usage/v8/searchbar/basic/angular/example_component_ts.md b/static/usage/v8/searchbar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v8/searchbar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/searchbar/basic/index.md b/static/usage/v8/searchbar/basic/index.md
index b9c9413238..c71238dd8d 100644
--- a/static/usage/v8/searchbar/basic/index.md
+++ b/static/usage/v8/searchbar/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/searchbar/basic/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/searchbar/cancel-button/angular.md b/static/usage/v8/searchbar/cancel-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/searchbar/cancel-button/angular.md
rename to static/usage/v8/searchbar/cancel-button/angular/example_component_html.md
diff --git a/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md
new file mode 100644
index 0000000000..4069269cd0
--- /dev/null
+++ b/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { trash } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v8/searchbar/cancel-button/index.md b/static/usage/v8/searchbar/cancel-button/index.md
index c126924200..bbd08611b6 100644
--- a/static/usage/v8/searchbar/cancel-button/index.md
+++ b/static/usage/v8/searchbar/cancel-button/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/searchbar/cancel-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v8/searchbar/clear-button/angular.md b/static/usage/v8/searchbar/clear-button/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/searchbar/clear-button/angular.md
rename to static/usage/v8/searchbar/clear-button/angular/example_component_html.md
diff --git a/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md
new file mode 100644
index 0000000000..b93e2ab390
--- /dev/null
+++ b/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { trashBin } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v8/searchbar/clear-button/index.md b/static/usage/v8/searchbar/clear-button/index.md
index 2c1df11554..925c5b3be1 100644
--- a/static/usage/v8/searchbar/clear-button/index.md
+++ b/static/usage/v8/searchbar/clear-button/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/searchbar/clear-button/demo.html"
   size="250px"
 />
diff --git a/static/usage/v8/searchbar/debounce/angular/example_component_html.md b/static/usage/v8/searchbar/debounce/angular/example_component_html.md
index 4e69a17914..f0ee9b81eb 100644
--- a/static/usage/v8/searchbar/debounce/angular/example_component_html.md
+++ b/static/usage/v8/searchbar/debounce/angular/example_component_html.md
@@ -2,8 +2,10 @@
 <ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
 
 <ion-list>
-  <ion-item *ngFor="let result of results">
+  @for (result of results; track result) {
+  <ion-item>
     <ion-label>{{ result }}</ion-label>
   </ion-item>
+  }
 </ion-list>
 ```
diff --git a/static/usage/v8/searchbar/debounce/angular/example_component_ts.md b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md
index 9a88f1c135..6a97ecbba5 100644
--- a/static/usage/v8/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonSearchbar],
 })
 export class ExampleComponent {
   public data = [
@@ -20,9 +23,10 @@ export class ExampleComponent {
   ];
   public results = [...this.data];
 
-  handleInput(event) {
-    const query = event.target.value.toLowerCase();
-    this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+  handleInput(event: Event) {
+    const target = event.target as HTMLIonSearchbarElement;
+    const query = target.value?.toLowerCase() || '';
+    this.results = this.data.filter((d) => d.toLowerCase().includes(query));
   }
 }
 ```
diff --git a/static/usage/v8/searchbar/search-icon/angular.md b/static/usage/v8/searchbar/search-icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/searchbar/search-icon/angular.md
rename to static/usage/v8/searchbar/search-icon/angular/example_component_html.md
diff --git a/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md
new file mode 100644
index 0000000000..1339bfebf8
--- /dev/null
+++ b/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { searchCircle } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+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/v8/searchbar/search-icon/index.md b/static/usage/v8/searchbar/search-icon/index.md
index 8168ac8223..48c1c748ce 100644
--- a/static/usage/v8/searchbar/search-icon/index.md
+++ b/static/usage/v8/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/searchbar/search-icon/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/searchbar/search-icon/demo.html"
+/>
diff --git a/static/usage/v8/searchbar/theming/colors/angular.md b/static/usage/v8/searchbar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/searchbar/theming/colors/angular.md
rename to static/usage/v8/searchbar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md b/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/searchbar/theming/colors/index.md b/static/usage/v8/searchbar/theming/colors/index.md
index 7525982508..0ceee8d08b 100644
--- a/static/usage/v8/searchbar/theming/colors/index.md
+++ b/static/usage/v8/searchbar/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/searchbar/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..2ea2b2e4cf
--- /dev/null
+++ b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSearchbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/searchbar/theming/css-properties/index.md b/static/usage/v8/searchbar/theming/css-properties/index.md
index 3aa1b04c39..4c92987e23 100644
--- a/static/usage/v8/searchbar/theming/css-properties/index.md
+++ b/static/usage/v8/searchbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/segment-button/basic/angular.md b/static/usage/v8/segment-button/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/segment-button/basic/angular.md
rename to static/usage/v8/segment-button/basic/angular/example_component_html.md
diff --git a/static/usage/v8/segment-button/basic/angular/example_component_ts.md b/static/usage/v8/segment-button/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment-button/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment-button/basic/index.md b/static/usage/v8/segment-button/basic/index.md
index f051f910a6..3a991f631d 100644
--- a/static/usage/v8/segment-button/basic/index.md
+++ b/static/usage/v8/segment-button/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/segment-button/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/segment-button/basic/demo.html"
+/>
diff --git a/static/usage/v8/segment-button/layout/angular/example_component_ts.md b/static/usage/v8/segment-button/layout/angular/example_component_ts.md
index 8540f8ec1b..d974333e9a 100644
--- a/static/usage/v8/segment-button/layout/angular/example_component_ts.md
+++ b/static/usage/v8/segment-button/layout/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { call, heart, pin } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { call, heart, pin } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment-button/theming/css-properties/index.md b/static/usage/v8/segment-button/theming/css-properties/index.md
index 45c01ea915..39d7ff5253 100644
--- a/static/usage/v8/segment-button/theming/css-properties/index.md
+++ b/static/usage/v8/segment-button/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/index.md b/static/usage/v8/segment-button/theming/css-shadow-parts/index.md
index 43834d0664..4d6ab06f4d 100644
--- a/static/usage/v8/segment-button/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/segment-button/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/segment/basic/angular.md b/static/usage/v8/segment/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/segment/basic/angular.md
rename to static/usage/v8/segment/basic/angular/example_component_html.md
diff --git a/static/usage/v8/segment/basic/angular/example_component_ts.md b/static/usage/v8/segment/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment/basic/index.md b/static/usage/v8/segment/basic/index.md
index 31df28b836..f240678f30 100644
--- a/static/usage/v8/segment/basic/index.md
+++ b/static/usage/v8/segment/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/segment/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/segment/basic/demo.html"
+/>
diff --git a/static/usage/v8/segment/scrollable/angular/example_component_ts.md b/static/usage/v8/segment/scrollable/angular/example_component_ts.md
index 807b3ff612..fb95a4ea91 100644
--- a/static/usage/v8/segment/scrollable/angular/example_component_ts.md
+++ b/static/usage/v8/segment/scrollable/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { barbell, basket, call, globe, heart, home, person, pin, star, trash } f
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonSegment, IonSegmentButton],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/segment/swipeable/angular/angular_css.md b/static/usage/v8/segment/swipeable/angular/example_component_css.md
similarity index 100%
rename from static/usage/v8/segment/swipeable/angular/angular_css.md
rename to static/usage/v8/segment/swipeable/angular/example_component_css.md
diff --git a/static/usage/v8/segment/swipeable/angular/angular_html.md b/static/usage/v8/segment/swipeable/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/segment/swipeable/angular/angular_html.md
rename to static/usage/v8/segment/swipeable/angular/example_component_html.md
diff --git a/static/usage/v8/segment/swipeable/angular/example_component_ts.md b/static/usage/v8/segment/swipeable/angular/example_component_ts.md
new file mode 100644
index 0000000000..6ccef810d4
--- /dev/null
+++ b/static/usage/v8/segment/swipeable/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment/swipeable/index.md b/static/usage/v8/segment/swipeable/index.md
index e19de64f78..4ac4971f6b 100644
--- a/static/usage/v8/segment/swipeable/index.md
+++ b/static/usage/v8/segment/swipeable/index.md
@@ -1,11 +1,15 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-import react_main_tsx from './react/react_tsx.md';
-import react_main_css from './react/react_css.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
 import vue from './vue.md';
-import angular_html from './angular/angular_html.md';
-import angular_css from './angular/angular_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -13,15 +17,16 @@ import angular_css from './angular/angular_css.md';
     javascript,
     react: {
       files: {
-        'src/main.tsx': react_main_tsx,
         'src/main.css': react_main_css,
+        'src/main.tsx': react_main_tsx,
       },
     },
     vue,
     angular: {
       files: {
-        'src/app/example.component.html': angular_html,
-        'src/app/example.component.css': angular_css,
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/segment/swipeable/react/react_css.md b/static/usage/v8/segment/swipeable/react/main_css.md
similarity index 100%
rename from static/usage/v8/segment/swipeable/react/react_css.md
rename to static/usage/v8/segment/swipeable/react/main_css.md
diff --git a/static/usage/v8/segment/swipeable/react/react_tsx.md b/static/usage/v8/segment/swipeable/react/main_tsx.md
similarity index 100%
rename from static/usage/v8/segment/swipeable/react/react_tsx.md
rename to static/usage/v8/segment/swipeable/react/main_tsx.md
diff --git a/static/usage/v8/segment/theming/colors/angular.md b/static/usage/v8/segment/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/segment/theming/colors/angular.md
rename to static/usage/v8/segment/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/segment/theming/colors/angular/example_component_ts.md b/static/usage/v8/segment/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment/theming/colors/index.md b/static/usage/v8/segment/theming/colors/index.md
index fd3c2dbebc..79842d4808 100644
--- a/static/usage/v8/segment/theming/colors/index.md
+++ b/static/usage/v8/segment/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/segment/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d51cbc123a
--- /dev/null
+++ b/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonLabel, IonSegment, IonSegmentButton],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/segment/theming/css-properties/index.md b/static/usage/v8/segment/theming/css-properties/index.md
index 2ca6610b54..9c440653c4 100644
--- a/static/usage/v8/segment/theming/css-properties/index.md
+++ b/static/usage/v8/segment/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/select/basic/multiple-selection/angular.md b/static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/basic/multiple-selection/angular.md
rename to static/usage/v8/select/basic/multiple-selection/angular/example_component_html.md
diff --git a/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/basic/multiple-selection/index.md b/static/usage/v8/select/basic/multiple-selection/index.md
index 7bf4cf9e40..b39d998d9d 100644
--- a/static/usage/v8/select/basic/multiple-selection/index.md
+++ b/static/usage/v8/select/basic/multiple-selection/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/basic/multiple-selection/demo.html"
 />
diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
index fb51c040a2..fb988662d5 100644
--- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
+++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -1,13 +1,16 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  handleChange(e) {
-    console.log('ionChange fired with value: ' + e.detail.value);
+  handleChange(event: CustomEvent) {
+    console.log('ionChange fired with value: ' + event.detail.value);
   }
 
   handleCancel() {
diff --git a/static/usage/v8/select/basic/single-selection/angular.md b/static/usage/v8/select/basic/single-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/basic/single-selection/angular.md
rename to static/usage/v8/select/basic/single-selection/angular/example_component_html.md
diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/basic/single-selection/index.md b/static/usage/v8/select/basic/single-selection/index.md
index 820ab1cccf..14036fc96a 100644
--- a/static/usage/v8/select/basic/single-selection/index.md
+++ b/static/usage/v8/select/basic/single-selection/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/basic/single-selection/demo.html"
 />
diff --git a/static/usage/v8/select/customization/button-text/angular.md b/static/usage/v8/select/customization/button-text/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/customization/button-text/angular.md
rename to static/usage/v8/select/customization/button-text/angular/example_component_html.md
diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/customization/button-text/index.md b/static/usage/v8/select/customization/button-text/index.md
index cc9d2417ca..be21f778b8 100644
--- a/static/usage/v8/select/customization/button-text/index.md
+++ b/static/usage/v8/select/customization/button-text/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="350px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/customization/button-text/demo.html"
 />
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/customization/custom-toggle-icons/angular.md
rename to static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
new file mode 100644
index 0000000000..61e221a24b
--- /dev/null
+++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { add, remove } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ add, remove });
+  }
+}
+```
diff --git a/static/usage/v8/select/customization/custom-toggle-icons/index.md b/static/usage/v8/select/customization/custom-toggle-icons/index.md
index 228945fc15..90b1f857c2 100644
--- a/static/usage/v8/select/customization/custom-toggle-icons/index.md
+++ b/static/usage/v8/select/customization/custom-toggle-icons/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="400px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/customization/custom-toggle-icons/demo.html"
 />
diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
index 4db53a836a..d85d416636 100644
--- a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -1,10 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { caretDownSharp } from 'ionicons/icons';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDownSharp });
+  }
+}
 ```
diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
index 5f8bc6929c..ad2e2a9b6b 100644
--- a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   customAlertOptions = {
diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
index 4db53a836a..1b377b7721 100644
--- a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
+++ b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/select/fill/angular.md b/static/usage/v8/select/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/fill/angular.md
rename to static/usage/v8/select/fill/angular/example_component_html.md
diff --git a/static/usage/v8/select/fill/angular/example_component_ts.md b/static/usage/v8/select/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..1b377b7721
--- /dev/null
+++ b/static/usage/v8/select/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/fill/index.md b/static/usage/v8/select/fill/index.md
index 9666f49d0d..edf11822c4 100644
--- a/static/usage/v8/select/fill/index.md
+++ b/static/usage/v8/select/fill/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/fill/demo.html"
   size="300px"
   mode="md"
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular.md b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/interfaces/action-sheet/angular.md
rename to static/usage/v8/select/interfaces/action-sheet/angular/example_component_html.md
diff --git a/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/action-sheet/index.md b/static/usage/v8/select/interfaces/action-sheet/index.md
index 8b83f6103a..ccab87716f 100644
--- a/static/usage/v8/select/interfaces/action-sheet/index.md
+++ b/static/usage/v8/select/interfaces/action-sheet/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/interfaces/action-sheet/demo.html"
 />
diff --git a/static/usage/v8/select/interfaces/modal/angular.md b/static/usage/v8/select/interfaces/modal/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/interfaces/modal/angular.md
rename to static/usage/v8/select/interfaces/modal/angular/example_component_html.md
diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/modal/index.md b/static/usage/v8/select/interfaces/modal/index.md
index 9f79261c28..4920aab389 100644
--- a/static/usage/v8/select/interfaces/modal/index.md
+++ b/static/usage/v8/select/interfaces/modal/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="400px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/interfaces/modal/demo.html"
 />
diff --git a/static/usage/v8/select/interfaces/popover/angular.md b/static/usage/v8/select/interfaces/popover/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/interfaces/popover/angular.md
rename to static/usage/v8/select/interfaces/popover/angular/example_component_html.md
diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/interfaces/popover/index.md b/static/usage/v8/select/interfaces/popover/index.md
index b33bd96e53..167e36dee4 100644
--- a/static/usage/v8/select/interfaces/popover/index.md
+++ b/static/usage/v8/select/interfaces/popover/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="400px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/interfaces/popover/demo.html"
 />
diff --git a/static/usage/v8/select/justify/angular.md b/static/usage/v8/select/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/justify/angular.md
rename to static/usage/v8/select/justify/angular/example_component_html.md
diff --git a/static/usage/v8/select/justify/angular/example_component_ts.md b/static/usage/v8/select/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..edeb5fb217
--- /dev/null
+++ b/static/usage/v8/select/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/justify/index.md b/static/usage/v8/select/justify/index.md
index 751948aa47..b1be55c0ba 100644
--- a/static/usage/v8/select/justify/index.md
+++ b/static/usage/v8/select/justify/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/justify/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/label-placement/angular.md b/static/usage/v8/select/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/label-placement/angular.md
rename to static/usage/v8/select/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/select/label-placement/angular/example_component_ts.md b/static/usage/v8/select/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/label-placement/index.md b/static/usage/v8/select/label-placement/index.md
index 694b6b3f4e..49800fb053 100644
--- a/static/usage/v8/select/label-placement/index.md
+++ b/static/usage/v8/select/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/label-slot/angular.md b/static/usage/v8/select/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/label-slot/angular.md
rename to static/usage/v8/select/label-slot/angular/example_component_html.md
diff --git a/static/usage/v8/select/label-slot/angular/example_component_ts.md b/static/usage/v8/select/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..a8cb5c497c
--- /dev/null
+++ b/static/usage/v8/select/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/label-slot/index.md b/static/usage/v8/select/label-slot/index.md
index c7d0382d14..a9269a7e26 100644
--- a/static/usage/v8/select/label-slot/index.md
+++ b/static/usage/v8/select/label-slot/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/label-slot/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/no-visible-label/angular.md b/static/usage/v8/select/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/select/no-visible-label/angular.md
rename to static/usage/v8/select/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..efa11c163f
--- /dev/null
+++ b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/select/no-visible-label/index.md b/static/usage/v8/select/no-visible-label/index.md
index f09ead1ad1..09dea4d4c0 100644
--- a/static/usage/v8/select/no-visible-label/index.md
+++ b/static/usage/v8/select/no-visible-label/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/select/no-visible-label/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
index af00be1957..361cfbad1b 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -8,7 +8,9 @@
       (ionChange)="handleChange($event)"
       [multiple]="true"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index c33570deec..976de91ea5 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,7 +33,7 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | Food[] | null): boolean {
     if (!o1 || !o2) {
       return o1 === o2;
     }
@@ -36,8 +45,9 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
index 7354647f22..808a9743cc 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -7,7 +7,9 @@
       placeholder="Select food"
       (ionChange)="handleChange($event)"
     >
-      <ion-select-option *ngFor="let food of foods" [value]="food">{{ food.name }}</ion-select-option>
+      @for (food of foods; track food) {
+      <ion-select-option [value]="food">{{ food.name }}</ion-select-option>
+      }
     </ion-select>
   </ion-item>
 </ion-list>
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index 20d05fa847..e984a6f654 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -1,12 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+
+interface Food {
+  id: number;
+  name: string;
+  type: string;
+}
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
-  foods = [
+  foods: Food[] = [
     {
       id: 1,
       name: 'Apples',
@@ -24,12 +33,13 @@ export class ExampleComponent {
     },
   ];
 
-  compareWith(o1, o2) {
+  compareWith(o1: Food | null, o2: Food | null): boolean {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev) {
-    console.log('Current value:', JSON.stringify(ev.target.value));
+  handleChange(ev: Event) {
+    const target = ev.target as HTMLIonSelectElement;
+    console.log('Current value:', JSON.stringify(target.value));
   }
 }
 ```
diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
index f7717b55dc..4cdf6bc2b3 100644
--- a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, leaf } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/select/typeahead/angular/app_module_ts.md b/static/usage/v8/select/typeahead/angular/app_module_ts.md
deleted file mode 100644
index 0fa5803771..0000000000
--- a/static/usage/v8/select/typeahead/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { TypeaheadComponent } from './typeahead.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md
index ded6fa60b0..9276b8b13e 100644
--- a/static/usage/v8/select/typeahead/angular/example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md
@@ -1,11 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone';
 import { Item } from './types';
 
+import { TypeaheadComponent } from './typeahead.component';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent],
 })
 export class ExampleComponent {
   @ViewChild('modal', { static: true }) modal!: IonModal;
@@ -41,15 +45,23 @@ export class ExampleComponent {
     { text: 'Strawberry', value: 'strawberry' },
   ];
 
-  private formatData(data: string[]) {
+  /**
+   * Formats the display text based on the selected fruits.
+   * @param data - Array of selected fruit values
+   * @returns A formatted string for display
+   */
+  private formatData(data: string[]): string {
     if (data.length === 1) {
       const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
-      return fruit.text;
+      return fruit ? fruit.text : '';
     }
-
     return `${data.length} items`;
   }
 
+  /**
+   * Handles fruit selection changes and updates the selected fruits and text.
+   * @param fruits - Array of selected fruit values
+   */
   fruitSelectionChanged(fruits: string[]) {
     this.selectedFruits = fruits;
     this.selectedFruitsText = this.formatData(this.selectedFruits);
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md
similarity index 90%
rename from static/usage/v7/select/typeahead/angular/modal-example_component_html.md
rename to static/usage/v8/select/typeahead/angular/typeahead_component_html.md
index 64da05a7a9..ed147c6425 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
+++ b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md
@@ -16,11 +16,13 @@
 
 <ion-content color="light" class="ion-padding">
   <ion-list id="modal-list" [inset]="true">
-    <ion-item *ngFor="let item of filteredItems; trackBy: trackItems">
+    @for (item of filteredItems; track item.value) {
+    <ion-item>
       <ion-checkbox [value]="item.value" [checked]="isChecked(item.value)" (ionChange)="checkboxChange($event)"
         >{{ item.text }}</ion-checkbox
       >
     </ion-item>
+    }
   </ion-list>
 </ion-content>
 ```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
similarity index 67%
rename from static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
rename to static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
index 9bd21f1b40..f9de32444d 100644
--- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
@@ -1,11 +1,37 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import type { OnInit } from '@angular/core';
+
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
 import { Item } from './types';
 
 @Component({
   selector: 'app-typeahead',
   templateUrl: 'typeahead.component.html',
+  imports: [
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonList,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class TypeaheadComponent implements OnInit {
   @Input() items: Item[] = [];
@@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit {
     this.workingSelectedValues = [...this.selectedItems];
   }
 
-  trackItems(index: number, item: Item) {
-    return item.value;
-  }
-
   cancelChanges() {
     this.selectionCancel.emit();
   }
@@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev) {
-    this.filterList(ev.target.value);
+  searchbarInput(ev: Event) {
+    const inputElement = ev.target as HTMLInputElement;
+    this.filterList(inputElement.value);
   }
 
   /**
@@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit {
      * If no search query is defined,
      * return all options.
      */
-    if (searchQuery === undefined) {
+    if (searchQuery === undefined || searchQuery.trim() === '') {
       this.filteredItems = [...this.items];
     } else {
       /**
@@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit {
        * contain the search query as a substring.
        */
       const normalizedQuery = searchQuery.toLowerCase();
-      this.filteredItems = this.items.filter((item) => {
-        return item.text.toLowerCase().includes(normalizedQuery);
-      });
+      this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery));
     }
   }
 
-  isChecked(value: string) {
-    return this.workingSelectedValues.find((item) => item === value);
+  isChecked(value: string): boolean {
+    return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev) {
+  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
     const { checked, value } = ev.detail;
 
     if (checked) {
diff --git a/static/usage/v8/select/typeahead/index.md b/static/usage/v8/select/typeahead/index.md
index c7978e1819..7ce89c665a 100644
--- a/static/usage/v8/select/typeahead/index.md
+++ b/static/usage/v8/select/typeahead/index.md
@@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md';
 import vue_types_ts from './vue/vue_types_ts.md';
 import vue_typeahead_component from './vue/typeahead_component_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
-import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
-import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+import angular_typeahead_component_ts from './angular/typeahead_component_ts.md';
+import angular_typeahead_component_html from './angular/typeahead_component_html.md';
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
@@ -39,9 +38,8 @@ import angular_types_ts from './angular/angular_types_ts.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/typeahead.component.html': angular_modal_example_component_html,
-        'src/app/typeahead.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
+        'src/app/typeahead.component.html': angular_typeahead_component_html,
+        'src/app/typeahead.component.ts': angular_typeahead_component_ts,
         'src/app/types.ts': angular_types_ts,
       },
     },
diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_html.md b/static/usage/v8/skeleton-text/basic/angular/example_component_html.md
index bea0ee9043..de7aaafd2f 100644
--- a/static/usage/v8/skeleton-text/basic/angular/example_component_html.md
+++ b/static/usage/v8/skeleton-text/basic/angular/example_component_html.md
@@ -1,5 +1,6 @@
 ```html
-<ion-list *ngIf="loaded">
+@if (loaded) {
+<ion-list>
   <ion-list-header>Albums</ion-list-header>
   <ion-item>
     <ion-thumbnail slot="start">
@@ -12,8 +13,8 @@
     </ion-label>
   </ion-item>
 </ion-list>
-
-<ion-list *ngIf="!loaded">
+} @else {
+<ion-list>
   <ion-list-header>
     <ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>
   </ion-list-header>
@@ -34,6 +35,7 @@
     </ion-label>
   </ion-item>
 </ion-list>
+}
 
 <ion-button (click)="loaded = !loaded">Toggle</ion-button>
 ```
diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md
index c74fbd4855..1a2f83bccc 100644
--- a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md
+++ b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonSkeletonText,
+  IonThumbnail,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { musicalNotes } from 'ionicons/icons';
@@ -8,6 +18,7 @@ import { musicalNotes } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
 })
 export class ExampleComponent {
   public loaded = false;
diff --git a/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..d4e5d48be6
--- /dev/null
+++ b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/skeleton-text/theming/css-properties/index.md b/static/usage/v8/skeleton-text/theming/css-properties/index.md
index 70081b66ce..5c9ff39c0f 100644
--- a/static/usage/v8/skeleton-text/theming/css-properties/index.md
+++ b/static/usage/v8/skeleton-text/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/spinner/basic/angular.md b/static/usage/v8/spinner/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/spinner/basic/angular.md
rename to static/usage/v8/spinner/basic/angular/example_component_html.md
diff --git a/static/usage/v8/spinner/basic/angular/example_component_ts.md b/static/usage/v8/spinner/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..15a3c981bf
--- /dev/null
+++ b/static/usage/v8/spinner/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/spinner/basic/index.md b/static/usage/v8/spinner/basic/index.md
index 894d0a2537..07ce7c7db4 100644
--- a/static/usage/v8/spinner/basic/index.md
+++ b/static/usage/v8/spinner/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/spinner/basic/demo.html"
   size="500px"
 />
diff --git a/static/usage/v8/spinner/theming/colors/angular.md b/static/usage/v8/spinner/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/spinner/theming/colors/angular.md
rename to static/usage/v8/spinner/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md b/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/spinner/theming/colors/index.md b/static/usage/v8/spinner/theming/colors/index.md
index 111ac08a53..83bfc27c81 100644
--- a/static/usage/v8/spinner/theming/colors/index.md
+++ b/static/usage/v8/spinner/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/spinner/theming/colors/demo.html"
   size="100px"
 />
diff --git a/static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/spinner/theming/css-properties/index.md b/static/usage/v8/spinner/theming/css-properties/index.md
index cdfc38fc2e..d35cdee00d 100644
--- a/static/usage/v8/spinner/theming/css-properties/index.md
+++ b/static/usage/v8/spinner/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/spinner/theming/resizing/angular/example_component_ts.md b/static/usage/v8/spinner/theming/resizing/angular/example_component_ts.md
new file mode 100644
index 0000000000..776380a663
--- /dev/null
+++ b/static/usage/v8/spinner/theming/resizing/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonSpinner } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonSpinner],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/spinner/theming/resizing/index.md b/static/usage/v8/spinner/theming/resizing/index.md
index 7995c066de..6f10ebf3dd 100644
--- a/static/usage/v8/spinner/theming/resizing/index.md
+++ b/static/usage/v8/spinner/theming/resizing/index.md
@@ -9,9 +9,10 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
-  version="6"
+  version="8"
   code={{
     javascript,
     react: {
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/split-pane/basic/angular.md b/static/usage/v8/split-pane/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/split-pane/basic/angular.md
rename to static/usage/v8/split-pane/basic/angular/example_component_html.md
diff --git a/static/usage/v8/split-pane/basic/angular/example_component_ts.md b/static/usage/v8/split-pane/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..1e20f96fbf
--- /dev/null
+++ b/static/usage/v8/split-pane/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/split-pane/basic/index.md b/static/usage/v8/split-pane/basic/index.md
index 93944fa669..446411572f 100644
--- a/static/usage/v8/split-pane/basic/index.md
+++ b/static/usage/v8/split-pane/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/split-pane/basic/demo.html"
   size="500px"
 />
diff --git a/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..1e20f96fbf
--- /dev/null
+++ b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/split-pane/theming/css-properties/index.md b/static/usage/v8/split-pane/theming/css-properties/index.md
index 330361b8fd..fb44ca91cf 100644
--- a/static/usage/v8/split-pane/theming/css-properties/index.md
+++ b/static/usage/v8/split-pane/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/tabs/basic/angular/example_component_ts.md b/static/usage/v8/tabs/basic/angular/example_component_ts.md
index 7762322ce9..5f521ab2c3 100644
--- a/static/usage/v8/tabs/basic/angular/example_component_ts.md
+++ b/static/usage/v8/tabs/basic/angular/example_component_ts.md
@@ -1,5 +1,16 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonTab,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { library, playCircle, radio, search } from 'ionicons/icons';
@@ -8,6 +19,7 @@ import { library, playCircle, radio, search } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/tabs/router/angular/app_component_html.md b/static/usage/v8/tabs/router/angular/app_component_html.md
index 7636539f28..3b819dc640 100644
--- a/static/usage/v8/tabs/router/angular/app_component_html.md
+++ b/static/usage/v8/tabs/router/angular/app_component_html.md
@@ -1,3 +1,5 @@
 ```html
-<ion-router-outlet></ion-router-outlet>
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>
 ```
diff --git a/static/usage/v8/tabs/router/angular/app_component_ts.md b/static/usage/v8/tabs/router/angular/app_component_ts.md
new file mode 100644
index 0000000000..69438d5bb0
--- /dev/null
+++ b/static/usage/v8/tabs/router/angular/app_component_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+  constructor() {}
+}
+```
diff --git a/static/usage/v8/tabs/router/angular/app_module_ts.md b/static/usage/v8/tabs/router/angular/app_module_ts.md
deleted file mode 100644
index e36b8c6316..0000000000
--- a/static/usage/v8/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/v8/tabs/router/angular/app_routes_ts.md b/static/usage/v8/tabs/router/angular/app_routes_ts.md
new file mode 100644
index 0000000000..fd959555b2
--- /dev/null
+++ b/static/usage/v8/tabs/router/angular/app_routes_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Routes } from '@angular/router';
+import { ExampleComponent } from './example.component';
+
+export const routes: Routes = [
+  {
+    path: 'example',
+    component: ExampleComponent,
+    children: [
+      {
+        path: 'home',
+        loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent),
+      },
+      {
+        path: 'library',
+        loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent),
+      },
+      {
+        path: 'radio',
+        loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent),
+      },
+      {
+        path: 'search',
+        loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/example/home',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/example/home',
+    pathMatch: 'full',
+  },
+];
+```
diff --git a/static/usage/v8/tabs/router/angular/app_routing_module_ts.md b/static/usage/v8/tabs/router/angular/app_routing_module_ts.md
deleted file mode 100644
index 7ff1067030..0000000000
--- a/static/usage/v8/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/v8/tabs/router/angular/example_component_ts.md b/static/usage/v8/tabs/router/angular/example_component_ts.md
index 7762322ce9..84c7d490b4 100644
--- a/static/usage/v8/tabs/router/angular/example_component_ts.md
+++ b/static/usage/v8/tabs/router/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { library, playCircle, radio, search } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { library, playCircle, radio, search } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonTabBar, IonTabButton, IonTabs],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/tabs/router/angular/home_page_component_ts.md b/static/usage/v8/tabs/router/angular/home_page_component_ts.md
index 9e2ef0a3e8..7d3d344681 100644
--- a/static/usage/v8/tabs/router/angular/home_page_component_ts.md
+++ b/static/usage/v8/tabs/router/angular/home_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class HomePageComponent {}
 ```
diff --git a/static/usage/v8/tabs/router/angular/home_page_module_ts.md b/static/usage/v8/tabs/router/angular/home_page_module_ts.md
deleted file mode 100644
index 2a1fb15b46..0000000000
--- a/static/usage/v8/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/v8/tabs/router/angular/library_page_component_ts.md b/static/usage/v8/tabs/router/angular/library_page_component_ts.md
index f5a92a4868..072cd0a779 100644
--- a/static/usage/v8/tabs/router/angular/library_page_component_ts.md
+++ b/static/usage/v8/tabs/router/angular/library_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-library-page',
   templateUrl: './library-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class LibraryPageComponent {}
 ```
diff --git a/static/usage/v8/tabs/router/angular/library_page_module_ts.md b/static/usage/v8/tabs/router/angular/library_page_module_ts.md
deleted file mode 100644
index 8e2ab48cf3..0000000000
--- a/static/usage/v8/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/v8/tabs/router/angular/radio_page_component_ts.md b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md
index d29209c00d..63273c0280 100644
--- a/static/usage/v8/tabs/router/angular/radio_page_component_ts.md
+++ b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class RadioPageComponent {}
 ```
diff --git a/static/usage/v8/tabs/router/angular/radio_page_module_ts.md b/static/usage/v8/tabs/router/angular/radio_page_module_ts.md
deleted file mode 100644
index f50a008863..0000000000
--- a/static/usage/v8/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/v8/tabs/router/angular/search_page_component_ts.md b/static/usage/v8/tabs/router/angular/search_page_component_ts.md
index bd6e723d33..00eb12be82 100644
--- a/static/usage/v8/tabs/router/angular/search_page_component_ts.md
+++ b/static/usage/v8/tabs/router/angular/search_page_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-search-page',
   templateUrl: './search-page.component.html',
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class SearchPageComponent {}
 ```
diff --git a/static/usage/v8/tabs/router/angular/search_page_module_ts.md b/static/usage/v8/tabs/router/angular/search_page_module_ts.md
deleted file mode 100644
index a1d599c5d9..0000000000
--- a/static/usage/v8/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/v8/tabs/router/index.md b/static/usage/v8/tabs/router/index.md
index 90700816ab..fabae4f6cd 100644
--- a/static/usage/v8/tabs/router/index.md
+++ b/static/usage/v8/tabs/router/index.md
@@ -3,26 +3,22 @@ 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 angular_app_routes_ts from './angular/app_routes_ts.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_app_component_ts from './angular/app_component_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';
 
@@ -54,24 +50,20 @@ import react_search_page_tsx from './react/search_page_tsx.md';
     },
     angular: {
       files: {
+        'src/global.css': angular_global_css,
+        'src/app/app.routes.ts': angular_app_routes_ts,
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_component_ts,
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_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: {
diff --git a/static/usage/v8/text/basic/angular/example_component_ts.md b/static/usage/v8/text/basic/angular/example_component_ts.md
index 122ee98dfb..b49066098d 100644
--- a/static/usage/v8/text/basic/angular/example_component_ts.md
+++ b/static/usage/v8/text/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon, IonText } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { warning } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { warning } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon, IonText],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/textarea/autogrow/angular.md b/static/usage/v8/textarea/autogrow/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/autogrow/angular.md
rename to static/usage/v8/textarea/autogrow/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/autogrow/angular/example_component_ts.md b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
new file mode 100644
index 0000000000..a407eaef3b
--- /dev/null
+++ b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/autogrow/index.md b/static/usage/v8/textarea/autogrow/index.md
index d4288d0da5..f1a7eea056 100644
--- a/static/usage/v8/textarea/autogrow/index.md
+++ b/static/usage/v8/textarea/autogrow/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="small"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/textarea/autogrow/demo.html"
 />
diff --git a/static/usage/v8/textarea/basic/angular.md b/static/usage/v8/textarea/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/basic/angular.md
rename to static/usage/v8/textarea/basic/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/basic/angular/example_component_ts.md b/static/usage/v8/textarea/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v8/textarea/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/basic/index.md b/static/usage/v8/textarea/basic/index.md
index 61d4251c86..5e5fa9afb7 100644
--- a/static/usage/v8/textarea/basic/index.md
+++ b/static/usage/v8/textarea/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="250px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/textarea/basic/demo.html"
 />
diff --git a/static/usage/v8/textarea/clear-on-edit/angular.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/clear-on-edit/angular.md
rename to static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/clear-on-edit/index.md b/static/usage/v8/textarea/clear-on-edit/index.md
index 5f2d928b21..9f617c997a 100644
--- a/static/usage/v8/textarea/clear-on-edit/index.md
+++ b/static/usage/v8/textarea/clear-on-edit/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="xsmall"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/textarea/clear-on-edit/demo.html"
 />
diff --git a/static/usage/v8/textarea/counter/angular/example_component_ts.md b/static/usage/v8/textarea/counter/angular/example_component_ts.md
index 2c08dc06fc..2b46bbe6da 100644
--- a/static/usage/v8/textarea/counter/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/counter/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
 })
 export class ExampleComponent {
   customCounterFormatter(inputLength: number, maxLength: number) {
diff --git a/static/usage/v8/textarea/fill/angular.md b/static/usage/v8/textarea/fill/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/fill/angular.md
rename to static/usage/v8/textarea/fill/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/fill/angular/example_component_ts.md b/static/usage/v8/textarea/fill/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v8/textarea/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/fill/index.md b/static/usage/v8/textarea/fill/index.md
index 73d6beae80..e3ebf6621d 100644
--- a/static/usage/v8/textarea/fill/index.md
+++ b/static/usage/v8/textarea/fill/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="250px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/textarea/fill/demo.html"
   mode="md"
 />
diff --git a/static/usage/v8/textarea/helper-error/angular.md b/static/usage/v8/textarea/helper-error/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/helper-error/angular.md
rename to static/usage/v8/textarea/helper-error/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/helper-error/angular/example_component_ts.md b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/helper-error/index.md b/static/usage/v8/textarea/helper-error/index.md
index 2a0d896e83..b6d3e084d0 100644
--- a/static/usage/v8/textarea/helper-error/index.md
+++ b/static/usage/v8/textarea/helper-error/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/textarea/helper-error/demo.html"
   size="200px"
diff --git a/static/usage/v8/textarea/label-placement/angular.md b/static/usage/v8/textarea/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/label-placement/angular.md
rename to static/usage/v8/textarea/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/label-placement/angular/example_component_ts.md b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v8/textarea/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/label-placement/index.md b/static/usage/v8/textarea/label-placement/index.md
index a3a4959237..684baaf100 100644
--- a/static/usage/v8/textarea/label-placement/index.md
+++ b/static/usage/v8/textarea/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/textarea/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/textarea/label-slot/angular.md b/static/usage/v8/textarea/label-slot/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/label-slot/angular.md
rename to static/usage/v8/textarea/label-slot/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/label-slot/angular/example_component_ts.md b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
new file mode 100644
index 0000000000..874d21ed01
--- /dev/null
+++ b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonText, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/label-slot/index.md b/static/usage/v8/textarea/label-slot/index.md
index baf22ad55b..64d7ff6cb0 100644
--- a/static/usage/v8/textarea/label-slot/index.md
+++ b/static/usage/v8/textarea/label-slot/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/textarea/label-slot/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/textarea/label-slot/demo.html"
+/>
diff --git a/static/usage/v8/textarea/no-visible-label/angular.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/textarea/no-visible-label/angular.md
rename to static/usage/v8/textarea/no-visible-label/angular/example_component_html.md
diff --git a/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
new file mode 100644
index 0000000000..5e8570222d
--- /dev/null
+++ b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/no-visible-label/index.md b/static/usage/v8/textarea/no-visible-label/index.md
index 7274f4734f..626f04e63e 100644
--- a/static/usage/v8/textarea/no-visible-label/index.md
+++ b/static/usage/v8/textarea/no-visible-label/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/textarea/no-visible-label/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/textarea/no-visible-label/demo.html"
+/>
diff --git a/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
index 899f7a826a..c110f8c159 100644
--- a/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
+++ b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { eye, lockClosed } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/textarea/theming/angular/example_component_ts.md b/static/usage/v8/textarea/theming/angular/example_component_ts.md
new file mode 100644
index 0000000000..ddae482aec
--- /dev/null
+++ b/static/usage/v8/textarea/theming/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTextarea } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTextarea],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/textarea/theming/index.md b/static/usage/v8/textarea/theming/index.md
index 76004eb4ed..97747123dd 100644
--- a/static/usage/v8/textarea/theming/index.md
+++ b/static/usage/v8/textarea/theming/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,8 +26,9 @@ import angular_global_css from './angular/global_css.md';
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
index 25b522af5b..fd89be9959 100644
--- a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
index 25b522af5b..fd89be9959 100644
--- a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
index ed20c4b5d1..82f5028fa3 100644
--- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   paletteToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the palette based on isDark
-  initializeDarkPalette(isDark) {
+  initializeDarkPalette(isDark: boolean) {
     this.paletteToggle = isDark;
     this.toggleDarkPalette(isDark);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  toggleChange(ev) {
-    this.toggleDarkPalette(ev.detail.checked);
+  toggleChange(event: CustomEvent) {
+    this.toggleDarkPalette(event.detail.checked);
   }
 
   // Add or remove the "ion-palette-dark" class on the html element
-  toggleDarkPalette(shouldAdd) {
+  toggleDarkPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
   }
 }
diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
index ebcbdbcb47..9e7539a2e9 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   darkPaletteToggle = false;
@@ -39,34 +76,34 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the palette based on isDark
-  initializeDarkPalette(isDark) {
+  initializeDarkPalette(isDark: boolean) {
     this.darkPaletteToggle = isDark;
     this.toggleDarkPalette(isDark);
   }
 
   // Check/uncheck the toggle and update the palette based on isHighContrast
-  initializeHighContrastPalette(isHighContrast) {
+  initializeHighContrastPalette(isHighContrast: boolean) {
     this.highContrastPaletteToggle = isHighContrast;
     this.toggleHighContrastPalette(isHighContrast);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  darkPaletteToggleChange(ev) {
-    this.toggleDarkPalette(ev.detail.checked);
+  darkPaletteToggleChange(event: CustomEvent) {
+    this.toggleDarkPalette(event.detail.checked);
   }
 
   // Listen for the toggle check/uncheck to toggle the high contrast palette
-  highContrastPaletteToggleChange(ev) {
-    this.toggleHighContrastPalette(ev.detail.checked);
+  highContrastPaletteToggleChange(event: CustomEvent) {
+    this.toggleHighContrastPalette(event.detail.checked);
   }
 
   // Add or remove the "ion-palette-dark" class on the html element
-  toggleDarkPalette(shouldAdd) {
+  toggleDarkPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
   }
 
   // Add or remove the "ion-palette-high-contrast" class on the html element
-  toggleHighContrastPalette(shouldAdd) {
+  toggleHighContrastPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd);
   }
 }
diff --git a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
index 25b522af5b..fd89be9959 100644
--- a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
index 25b522af5b..fd89be9959 100644
--- a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/thumbnail/basic/angular.md b/static/usage/v8/thumbnail/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/thumbnail/basic/angular.md
rename to static/usage/v8/thumbnail/basic/angular/example_component_html.md
diff --git a/static/usage/v8/thumbnail/basic/angular/example_component_ts.md b/static/usage/v8/thumbnail/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..a82583c287
--- /dev/null
+++ b/static/usage/v8/thumbnail/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/thumbnail/basic/index.md b/static/usage/v8/thumbnail/basic/index.md
index 1cfd5d3065..e507d51c44 100644
--- a/static/usage/v8/thumbnail/basic/index.md
+++ b/static/usage/v8/thumbnail/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/thumbnail/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/thumbnail/basic/demo.html"
+/>
diff --git a/static/usage/v8/thumbnail/item/angular.md b/static/usage/v8/thumbnail/item/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/thumbnail/item/angular.md
rename to static/usage/v8/thumbnail/item/angular/example_component_html.md
diff --git a/static/usage/v8/thumbnail/item/angular/example_component_ts.md b/static/usage/v8/thumbnail/item/angular/example_component_ts.md
new file mode 100644
index 0000000000..fd6269b877
--- /dev/null
+++ b/static/usage/v8/thumbnail/item/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/thumbnail/item/index.md b/static/usage/v8/thumbnail/item/index.md
index d12e29ff95..0aa457bef7 100644
--- a/static/usage/v8/thumbnail/item/index.md
+++ b/static/usage/v8/thumbnail/item/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/thumbnail/item/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/thumbnail/item/demo.html"
+/>
diff --git a/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..a82583c287
--- /dev/null
+++ b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonThumbnail],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/thumbnail/theming/css-properties/index.md b/static/usage/v8/thumbnail/theming/css-properties/index.md
index 60473043c8..0596691aef 100644
--- a/static/usage/v8/thumbnail/theming/css-properties/index.md
+++ b/static/usage/v8/thumbnail/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/title/basic/angular.md b/static/usage/v8/title/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/title/basic/angular.md
rename to static/usage/v8/title/basic/angular/example_component_html.md
diff --git a/static/usage/v8/title/basic/angular/example_component_ts.md b/static/usage/v8/title/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..6383d97aa5
--- /dev/null
+++ b/static/usage/v8/title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/title/basic/index.md b/static/usage/v8/title/basic/index.md
index 349f83f030..a0dc055db6 100644
--- a/static/usage/v8/title/basic/index.md
+++ b/static/usage/v8/title/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v8/title/collapsible-large-title/basic/angular.md b/static/usage/v8/title/collapsible-large-title/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/title/collapsible-large-title/basic/angular.md
rename to static/usage/v8/title/collapsible-large-title/basic/angular/example_component_html.md
diff --git a/static/usage/v8/title/collapsible-large-title/basic/angular/example_component_ts.md b/static/usage/v8/title/collapsible-large-title/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..5ef16cdb9d
--- /dev/null
+++ b/static/usage/v8/title/collapsible-large-title/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/title/collapsible-large-title/basic/index.md b/static/usage/v8/title/collapsible-large-title/basic/index.md
index 5a6d5ccff8..f527811467 100644
--- a/static/usage/v8/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v8/title/collapsible-large-title/basic/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   mode="ios"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/title/collapsible-large-title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v8/title/collapsible-large-title/buttons/angular.md b/static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/title/collapsible-large-title/buttons/angular.md
rename to static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_html.md
diff --git a/static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_ts.md b/static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_ts.md
new file mode 100644
index 0000000000..a62dc474d6
--- /dev/null
+++ b/static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/title/collapsible-large-title/buttons/index.md b/static/usage/v8/title/collapsible-large-title/buttons/index.md
index b8947e10bc..95c60ef317 100644
--- a/static/usage/v8/title/collapsible-large-title/buttons/index.md
+++ b/static/usage/v8/title/collapsible-large-title/buttons/index.md
@@ -3,12 +3,24 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   mode="ios"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/title/collapsible-large-title/buttons/demo.html"
   devicePreview={true}
   includeIonContent={false}
diff --git a/static/usage/v8/title/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/title/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..5ef16cdb9d
--- /dev/null
+++ b/static/usage/v8/title/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/title/theming/css-properties/index.md b/static/usage/v8/title/theming/css-properties/index.md
index 2dcdf86360..0952bda4c6 100644
--- a/static/usage/v8/title/theming/css-properties/index.md
+++ b/static/usage/v8/title/theming/css-properties/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -25,6 +26,7 @@ import angular_global_css from './angular/global_css.md';
       files: {
         'src/global.css': angular_global_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/toast/buttons/angular/example_component_ts.md b/static/usage/v8/toast/buttons/angular/example_component_ts.md
index 4e1c0e564b..f9ead20f1e 100644
--- a/static/usage/v8/toast/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toast/buttons/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
@@ -23,8 +26,8 @@ export class ExampleComponent {
     },
   ];
 
-  setRoleMessage(ev) {
-    const { role } = ev.detail;
+  setRoleMessage(event: CustomEvent) {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   }
 }
diff --git a/static/usage/v8/toast/icon/angular.md b/static/usage/v8/toast/icon/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toast/icon/angular.md
rename to static/usage/v8/toast/icon/angular/example_component_html.md
diff --git a/static/usage/v8/toast/icon/angular/example_component_ts.md b/static/usage/v8/toast/icon/angular/example_component_ts.md
new file mode 100644
index 0000000000..159c8d6693
--- /dev/null
+++ b/static/usage/v8/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
+
+import { addIcons } from 'ionicons';
+import { globe } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
+})
+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({ globe });
+  }
+}
+```
diff --git a/static/usage/v8/toast/icon/index.md b/static/usage/v8/toast/icon/index.md
index b69dc7e19e..bca7b49d43 100644
--- a/static/usage/v8/toast/icon/index.md
+++ b/static/usage/v8/toast/icon/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -12,7 +14,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/icon/demo.html"
 />
diff --git a/static/usage/v8/toast/inline/basic/angular.md b/static/usage/v8/toast/inline/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toast/inline/basic/angular.md
rename to static/usage/v8/toast/inline/basic/angular/example_component_html.md
diff --git a/static/usage/v8/toast/inline/basic/angular/example_component_ts.md b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..4e602aa671
--- /dev/null
+++ b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/inline/basic/index.md b/static/usage/v8/toast/inline/basic/index.md
index c256cb1c73..fa9937e185 100644
--- a/static/usage/v8/toast/inline/basic/index.md
+++ b/static/usage/v8/toast/inline/basic/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/inline/basic/demo.html"
   devicePreview
diff --git a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
index 67fb0c7676..55a00eb135 100644
--- a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
+++ b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar],
 })
 export class ExampleComponent {
   isToastOpen = false;
diff --git a/static/usage/v8/toast/layout/angular/example_component_ts.md b/static/usage/v8/toast/layout/angular/example_component_ts.md
index 89c39c3332..c3ad043e17 100644
--- a/static/usage/v8/toast/layout/angular/example_component_ts.md
+++ b/static/usage/v8/toast/layout/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   toastButtons = [
diff --git a/static/usage/v8/toast/position-anchor/angular.md b/static/usage/v8/toast/position-anchor/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toast/position-anchor/angular.md
rename to static/usage/v8/toast/position-anchor/angular/example_component_html.md
diff --git a/static/usage/v8/toast/position-anchor/angular/example_component_ts.md b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
new file mode 100644
index 0000000000..3f5a4a3404
--- /dev/null
+++ b/static/usage/v8/toast/position-anchor/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/position-anchor/index.md b/static/usage/v8/toast/position-anchor/index.md
index 2791a77e44..bd1f2aa9ed 100644
--- a/static/usage/v8/toast/position-anchor/index.md
+++ b/static/usage/v8/toast/position-anchor/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/position-anchor/demo.html"
   devicePreview={true}
diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
index db133a99f1..a6c9eb4ead 100644
--- a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { IonButton, ToastController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(private toastController: ToastController) {}
diff --git a/static/usage/v8/toast/swipe-gesture/angular.md b/static/usage/v8/toast/swipe-gesture/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toast/swipe-gesture/angular.md
rename to static/usage/v8/toast/swipe-gesture/angular/example_component_html.md
diff --git a/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
new file mode 100644
index 0000000000..ef2f87437f
--- /dev/null
+++ b/static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toast/swipe-gesture/index.md b/static/usage/v8/toast/swipe-gesture/index.md
index dfb56a081b..f1b1c78854 100644
--- a/static/usage/v8/toast/swipe-gesture/index.md
+++ b/static/usage/v8/toast/swipe-gesture/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toast/swipe-gesture/demo.html"
   devicePreview={true}
diff --git a/static/usage/v8/toast/theming/angular/example_component_ts.md b/static/usage/v8/toast/theming/angular/example_component_ts.md
index 361391ca54..b68a983109 100644
--- a/static/usage/v8/toast/theming/angular/example_component_ts.md
+++ b/static/usage/v8/toast/theming/angular/example_component_ts.md
@@ -1,9 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonToast } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonToast],
 })
 export class ExampleComponent {
   public toastButtons = [
diff --git a/static/usage/v8/toggle/alignment/angular.md b/static/usage/v8/toggle/alignment/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/alignment/angular.md
rename to static/usage/v8/toggle/alignment/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/alignment/angular/example_component_ts.md b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/alignment/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/alignment/index.md b/static/usage/v8/toggle/alignment/index.md
index 50763c1143..ce079652af 100644
--- a/static/usage/v8/toggle/alignment/index.md
+++ b/static/usage/v8/toggle/alignment/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   src="usage/v8/toggle/alignment/demo.html"
 />
diff --git a/static/usage/v8/toggle/basic/angular.md b/static/usage/v8/toggle/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/basic/angular.md
rename to static/usage/v8/toggle/basic/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/basic/angular/example_component_ts.md b/static/usage/v8/toggle/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/basic/index.md b/static/usage/v8/toggle/basic/index.md
index 8a7695a62b..58494462ad 100644
--- a/static/usage/v8/toggle/basic/index.md
+++ b/static/usage/v8/toggle/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';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/basic/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/basic/demo.html"
+/>
diff --git a/static/usage/v8/toggle/justify/angular.md b/static/usage/v8/toggle/justify/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/justify/angular.md
rename to static/usage/v8/toggle/justify/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/justify/angular/example_component_ts.md b/static/usage/v8/toggle/justify/angular/example_component_ts.md
new file mode 100644
index 0000000000..80a17959d0
--- /dev/null
+++ b/static/usage/v8/toggle/justify/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/justify/index.md b/static/usage/v8/toggle/justify/index.md
index 92432d33f7..1784ddadf9 100644
--- a/static/usage/v8/toggle/justify/index.md
+++ b/static/usage/v8/toggle/justify/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/justify/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/justify/demo.html"
+/>
diff --git a/static/usage/v8/toggle/label-placement/angular.md b/static/usage/v8/toggle/label-placement/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/label-placement/angular.md
rename to static/usage/v8/toggle/label-placement/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/label-placement/angular/example_component_ts.md b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/label-placement/index.md b/static/usage/v8/toggle/label-placement/index.md
index 7a5204f2f9..023b15fc38 100644
--- a/static/usage/v8/toggle/label-placement/index.md
+++ b/static/usage/v8/toggle/label-placement/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toggle/label-placement/demo.html"
   size="300px"
 />
diff --git a/static/usage/v8/toggle/list/angular.md b/static/usage/v8/toggle/list/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/list/angular.md
rename to static/usage/v8/toggle/list/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/list/angular/example_component_ts.md b/static/usage/v8/toggle/list/angular/example_component_ts.md
new file mode 100644
index 0000000000..80a17959d0
--- /dev/null
+++ b/static/usage/v8/toggle/list/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonList, IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/list/index.md b/static/usage/v8/toggle/list/index.md
index 66a8b51a02..f9f3bc75c5 100644
--- a/static/usage/v8/toggle/list/index.md
+++ b/static/usage/v8/toggle/list/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/list/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/list/demo.html"
+/>
diff --git a/static/usage/v8/toggle/on-off/angular.md b/static/usage/v8/toggle/on-off/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/on-off/angular.md
rename to static/usage/v8/toggle/on-off/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/on-off/angular/example_component_ts.md b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/on-off/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/on-off/index.md b/static/usage/v8/toggle/on-off/index.md
index ff1d95d2f8..e54975f66b 100644
--- a/static/usage/v8/toggle/on-off/index.md
+++ b/static/usage/v8/toggle/on-off/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/on-off/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/on-off/demo.html"
+/>
diff --git a/static/usage/v8/toggle/theming/colors/angular.md b/static/usage/v8/toggle/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toggle/theming/colors/angular.md
rename to static/usage/v8/toggle/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/colors/index.md b/static/usage/v8/toggle/theming/colors/index.md
index 44fc0a52e8..bf0a1e5ca4 100644
--- a/static/usage/v8/toggle/theming/colors/index.md
+++ b/static/usage/v8/toggle/theming/colors/index.md
@@ -3,6 +3,22 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
 
-<Playground version="8" code={{ javascript, react, vue, angular }} src="usage/v8/toggle/theming/colors/demo.html" />
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/toggle/theming/colors/demo.html"
+/>
diff --git a/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/css-properties/index.md b/static/usage/v8/toggle/theming/css-properties/index.md
index a136177ef9..553ef9c1fe 100644
--- a/static/usage/v8/toggle/theming/css-properties/index.md
+++ b/static/usage/v8/toggle/theming/css-properties/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md
new file mode 100644
index 0000000000..7bcffbfd88
--- /dev/null
+++ b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonToggle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonToggle],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/index.md b/static/usage/v8/toggle/theming/css-shadow-parts/index.md
index 771fc1621d..0af01bb85f 100644
--- a/static/usage/v8/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/toggle/theming/css-shadow-parts/index.md
@@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md';
 
 import vue from './vue.md';
 
-import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -23,8 +24,9 @@ import angular_example_component_html from './angular/example_component_html.md'
     vue,
     angular: {
       files: {
-        'src/app/example.component.css': angular_example_component_css,
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/static/usage/v8/toolbar/basic/angular.md b/static/usage/v8/toolbar/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toolbar/basic/angular.md
rename to static/usage/v8/toolbar/basic/angular/example_component_html.md
diff --git a/static/usage/v8/toolbar/basic/angular/example_component_ts.md b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
new file mode 100644
index 0000000000..0f1535b112
--- /dev/null
+++ b/static/usage/v8/toolbar/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonFooter, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/basic/index.md b/static/usage/v8/toolbar/basic/index.md
index 11700886f9..4f2d4d11f8 100644
--- a/static/usage/v8/toolbar/basic/index.md
+++ b/static/usage/v8/toolbar/basic/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toolbar/basic/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/buttons/angular/example_component_ts.md b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
index 7af150bd16..94e3d6ef6f 100644
--- a/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md
@@ -1,5 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
@@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle,
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/toolbar/progress-bars/angular.md b/static/usage/v8/toolbar/progress-bars/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toolbar/progress-bars/angular.md
rename to static/usage/v8/toolbar/progress-bars/angular/example_component_html.md
diff --git a/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
new file mode 100644
index 0000000000..989441ea2b
--- /dev/null
+++ b/static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/progress-bars/index.md b/static/usage/v8/toolbar/progress-bars/index.md
index 3b6da500f5..cb7eb9468e 100644
--- a/static/usage/v8/toolbar/progress-bars/index.md
+++ b/static/usage/v8/toolbar/progress-bars/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toolbar/progress-bars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/searchbars/angular.md b/static/usage/v8/toolbar/searchbars/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toolbar/searchbars/angular.md
rename to static/usage/v8/toolbar/searchbars/angular/example_component_html.md
diff --git a/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
new file mode 100644
index 0000000000..994d94b0a9
--- /dev/null
+++ b/static/usage/v8/toolbar/searchbars/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/searchbars/index.md b/static/usage/v8/toolbar/searchbars/index.md
index a8eaac0df2..36441a318c 100644
--- a/static/usage/v8/toolbar/searchbars/index.md
+++ b/static/usage/v8/toolbar/searchbars/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toolbar/searchbars/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/segments/angular.md b/static/usage/v8/toolbar/segments/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toolbar/segments/angular.md
rename to static/usage/v8/toolbar/segments/angular/example_component_html.md
diff --git a/static/usage/v8/toolbar/segments/angular/example_component_ts.md b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
new file mode 100644
index 0000000000..3dc563173a
--- /dev/null
+++ b/static/usage/v8/toolbar/segments/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/segments/index.md b/static/usage/v8/toolbar/segments/index.md
index d64efc983a..228433c3a1 100644
--- a/static/usage/v8/toolbar/segments/index.md
+++ b/static/usage/v8/toolbar/segments/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toolbar/segments/demo.html"
   devicePreview
   includeIonContent={false}
diff --git a/static/usage/v8/toolbar/theming/colors/angular.md b/static/usage/v8/toolbar/theming/colors/angular/example_component_html.md
similarity index 100%
rename from static/usage/v8/toolbar/theming/colors/angular.md
rename to static/usage/v8/toolbar/theming/colors/angular/example_component_html.md
diff --git a/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
new file mode 100644
index 0000000000..680c14e048
--- /dev/null
+++ b/static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/theming/colors/index.md b/static/usage/v8/toolbar/theming/colors/index.md
index 4fbb57b6d2..2dae319b1d 100644
--- a/static/usage/v8/toolbar/theming/colors/index.md
+++ b/static/usage/v8/toolbar/theming/colors/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/toolbar/theming/colors/demo.html"
   size="large"
 />
diff --git a/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 0000000000..680c14e048
--- /dev/null
+++ b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/toolbar/theming/css-properties/index.md b/static/usage/v8/toolbar/theming/css-properties/index.md
index 72e5c8117f..a277fcb21c 100644
--- a/static/usage/v8/toolbar/theming/css-properties/index.md
+++ b/static/usage/v8/toolbar/theming/css-properties/index.md
@@ -9,6 +9,7 @@ import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}
diff --git a/versioned_docs/version-v7/api/infinite-scroll.md b/versioned_docs/version-v7/api/infinite-scroll.md
index 81462fe6de..4b33dda184 100644
--- a/versioned_docs/version-v7/api/infinite-scroll.md
+++ b/versioned_docs/version-v7/api/infinite-scroll.md
@@ -23,6 +23,8 @@ The Infinite Scroll component calls an action to be performed when the user scro
 
 The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md';
 
 <Basic />
diff --git a/versioned_docs/version-v7/api/nav.md b/versioned_docs/version-v7/api/nav.md
index 2c17d05f6b..5195dc19ef 100644
--- a/versioned_docs/version-v7/api/nav.md
+++ b/versioned_docs/version-v7/api/nav.md
@@ -37,6 +37,20 @@ import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
 <NavLinkExample />
 
+## Navigation within a Modal
+
+Modal can use Nav to offer a linear navigation that is independent of the URL.
+
+:::note
+
+The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
+
+:::
+
+import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.md';
+
+<ModalNavigationExample />
+
 ## Interfaces
 
 ### NavCustomEvent
diff --git a/versioned_docs/version-v7/api/radio.md b/versioned_docs/version-v7/api/radio.md
index 25308e1fe2..c470a326ed 100644
--- a/versioned_docs/version-v7/api/radio.md
+++ b/versioned_docs/version-v7/api/radio.md
@@ -39,6 +39,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 <LabelPlacement />
 
+## Object Value References
+
+By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
+
+import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md';
+
+<UsingComparewith />
+
 ## Alignment
 
 Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
diff --git a/versioned_docs/version-v7/api/reorder.md b/versioned_docs/version-v7/api/reorder.md
index 0fe49c8b7d..8d5e7ef6aa 100644
--- a/versioned_docs/version-v7/api/reorder.md
+++ b/versioned_docs/version-v7/api/reorder.md
@@ -65,7 +65,7 @@ In order to sort the array upon completion of the reorder, the array should be p
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
-Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
 
 import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';