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 b13c147dc2d..eeb7aa9fce5 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 b273d851f90..00000000000
--- 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 420359602a2..54a8b6ed52a 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,11 +1,25 @@
 ```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;
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 19544ec574a..1f1f3fd5e57 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 d213d283663..d77ccf90326 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 a62465cfee3..35aace1d20d 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 788b9a14c0f..e03f99778bc 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,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 {
   async canDismiss(data?: any, role?: string) {
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 5a28a156a32..1dad2a6af9f 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 e9e4f00dff3..00000000000
--- 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 920a2335257..8f8c0acde95 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 621996015b4..e82dcffc025 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 750bbe53efb..8c864ebf732 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 387bce95476..9c607135640 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 a21954ec5f1..ab087edaadd 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 321577939a9..7e324c0446a 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 00000000000..834c04ea000
--- /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 16018d41230..baa65b7b7af 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 00000000000..60d2613a19e
--- /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 35cec0645c0..58e06370041 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 e132d2f84c7..1b0d5bfcb83 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 00000000000..0a7209d8924
--- /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 837a75b0494..9e67d2a290f 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 00000000000..ee03f01adc3
--- /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 11ed9f04493..8592cc686fb 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 acfb6a412ca..3adcfbfb564 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/standalone';
+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 00000000000..7db30b437f3
--- /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 3d0ebd17096..e087f1b7bb7 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/v8/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
index b13c147dc2d..eeb7aa9fce5 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 b273d851f90..00000000000
--- 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 420359602a2..54a8b6ed52a 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,11 +1,25 @@
 ```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;
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 19544ec574a..1f1f3fd5e57 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 75821bfd692..786aff9a003 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 a62465cfee3..35aace1d20d 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 788b9a14c0f..e03f99778bc 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,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 {
   async canDismiss(data?: any, role?: string) {
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 5a28a156a32..1dad2a6af9f 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 e9e4f00dff3..00000000000
--- 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 920a2335257..8f8c0acde95 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 621996015b4..e82dcffc025 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 3c8431902fd..78b876e1e54 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 387bce95476..9c607135640 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 a21954ec5f1..ab087edaadd 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 321577939a9..7e324c0446a 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 00000000000..834c04ea000
--- /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 3123a5a89de..7c5f088c5e7 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 00000000000..60d2613a19e
--- /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 26469dbb862..3e37214f64a 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 e132d2f84c7..1b0d5bfcb83 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 00000000000..0a7209d8924
--- /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 533e6430406..cd57113bf44 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 00000000000..ee03f01adc3
--- /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 e1f2e9865a6..98cde271f02 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 acfb6a412ca..3adcfbfb564 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/standalone';
+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 00000000000..7db30b437f3
--- /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 beb05518014..5ffcfe265f0 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,
       },
     },