From 9daa0317fb123c686c99065f655e056dd1d9ac37 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:06:57 -0500
Subject: [PATCH 1/4] docs(modal): update angular to standalone

---
 .../boolean/angular/example_component_ts.md   | 12 ++++
 .../angular/example_component_ts.md           |  2 +
 .../function/angular/example_component_ts.md  | 10 ++++
 .../angular/example_component_ts.md           | 10 ++++
 .../basic/angular/example_component_ts.md     | 28 ++++++++++
 .../angular/example_component_ts.md           |  2 +
 .../angular/example_component_ts.md           | 13 +++++
 .../basic/angular/example_component_ts.md     | 12 ++++
 .../is-open/angular/example_component_ts.md   | 10 ++++
 .../mount/angular/example_component_html.md   | 23 ++++++++
 .../mount/angular/example_component_ts.md     | 19 +++++++
 .../usage/v7/modal/performance/mount/index.md | 11 +++-
 .../angular/example_component_ts.md           | 28 ++++++++++
 .../basic/angular/example_component_html.md   | 56 +++++++++++++++++++
 .../basic/angular/example_component_ts.md     | 37 ++++++++++++
 static/usage/v7/modal/sheet/basic/index.md    | 11 +++-
 .../angular/example_component_html.md         | 25 +++++++++
 .../angular/example_component_ts.md           | 11 ++++
 .../v7/modal/sheet/handle-behavior/index.md   | 11 +++-
 .../angular/example_component_ts.md           | 28 ++++++++++
 .../boolean/angular/example_component_ts.md   | 12 ++++
 .../angular/example_component_ts.md           |  2 +
 .../function/angular/example_component_ts.md  | 10 ++++
 .../angular/example_component_ts.md           | 10 ++++
 .../basic/angular/example_component_ts.md     | 28 ++++++++++
 .../angular/example_component_ts.md           |  2 +
 .../angular/example_component_ts.md           | 13 +++++
 .../basic/angular/example_component_ts.md     | 12 ++++
 .../is-open/angular/example_component_ts.md   | 10 ++++
 .../mount/angular/example_component_html.md   | 23 ++++++++
 .../mount/angular/example_component_ts.md     | 19 +++++++
 .../usage/v8/modal/performance/mount/index.md | 11 +++-
 .../angular/example_component_ts.md           | 28 ++++++++++
 .../basic/angular/example_component_html.md   | 56 +++++++++++++++++++
 .../basic/angular/example_component_ts.md     | 37 ++++++++++++
 static/usage/v8/modal/sheet/basic/index.md    | 11 +++-
 .../angular/example_component_html.md         | 25 +++++++++
 .../angular/example_component_ts.md           | 11 ++++
 .../v8/modal/sheet/handle-behavior/index.md   | 11 +++-
 .../angular/example_component_ts.md           | 28 ++++++++++
 40 files changed, 706 insertions(+), 12 deletions(-)
 create mode 100644 static/usage/v7/modal/performance/mount/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/performance/mount/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/sheet/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/angular/example_component_html.md
 create mode 100644 static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md
 create mode 100644 static/usage/v8/modal/performance/mount/angular/example_component_html.md
 create mode 100644 static/usage/v8/modal/performance/mount/angular/example_component_ts.md
 create mode 100644 static/usage/v8/modal/sheet/basic/angular/example_component_html.md
 create mode 100644 static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v8/modal/sheet/handle-behavior/angular/example_component_html.md
 create mode 100644 static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md

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..e16bbf9053c 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,10 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   canDismiss = false;
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..c2f0366a78c 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,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   presentingElement = undefined;
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..a9f23758848 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,11 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   presentingElement = undefined;
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..dfffc27bf23 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,19 @@
 ```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',
+  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..bff7184316b 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,9 +1,37 @@
 ```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',
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
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..8497a35dc20 100644
--- a/static/usage/v7/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v7/modal/controller/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
@@ -7,6 +8,7 @@ import { ModalExampleComponent } from './modal-example.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [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/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..290a9df7583 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,11 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   @ViewChild(IonModal) modal: IonModal;
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..63536269217 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,19 @@
 ```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',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v7/modal/performance/mount/angular/example_component_html.md b/static/usage/v7/modal/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..4b8bb7bc9d2
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Example</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+  <ion-modal [keepContentsMounted]="true" trigger="open-modal" #modal>
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="modal.dismiss()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> This content was mounted as soon as the modal was created. </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..50b91856a6c
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```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',
+  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/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/example_component_html.md b/static/usage/v7/modal/sheet/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..6561e311463
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/angular/example_component_html.md
@@ -0,0 +1,56 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
+    <ng-template>
+      <ion-content>
+        <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..25afbbdfac2
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```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',
+  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/example_component_html.md b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal
+    trigger="open-modal"
+    [initialBreakpoint]="0.25"
+    [breakpoints]="[0, 0.25, 0.5, 0.75]"
+    handleBehavior="cycle"
+  >
+    <ng-template>
+      <ion-content class="ion-padding">
+        <div class="ion-margin-top">
+          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+        </div>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..35fb1754b2e
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```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',
+  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 c4a743b2745..45c2b05e66c 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,38 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}
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..e16bbf9053c 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,10 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   canDismiss = false;
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..c2f0366a78c 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,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   presentingElement = undefined;
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..a9f23758848 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,11 +1,21 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   presentingElement = undefined;
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..dfffc27bf23 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,19 @@
 ```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',
+  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..bff7184316b 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,9 +1,37 @@
 ```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',
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
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..8497a35dc20 100644
--- a/static/usage/v8/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v8/modal/controller/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
@@ -7,6 +8,7 @@ import { ModalExampleComponent } from './modal-example.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [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/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..290a9df7583 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,11 +1,23 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   @ViewChild(IonModal) modal: IonModal;
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..63536269217 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,19 @@
 ```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',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   isModalOpen = false;
diff --git a/static/usage/v8/modal/performance/mount/angular/example_component_html.md b/static/usage/v8/modal/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..4b8bb7bc9d2
--- /dev/null
+++ b/static/usage/v8/modal/performance/mount/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Example</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
+  <ion-modal [keepContentsMounted]="true" trigger="open-modal" #modal>
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="modal.dismiss()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> This content was mounted as soon as the modal was created. </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..50b91856a6c
--- /dev/null
+++ b/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```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',
+  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/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/example_component_html.md b/static/usage/v8/modal/sheet/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..6561e311463
--- /dev/null
+++ b/static/usage/v8/modal/sheet/basic/angular/example_component_html.md
@@ -0,0 +1,56 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
+    <ng-template>
+      <ion-content>
+        <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..25afbbdfac2
--- /dev/null
+++ b/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```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',
+  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/example_component_html.md b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal
+    trigger="open-modal"
+    [initialBreakpoint]="0.25"
+    [breakpoints]="[0, 0.25, 0.5, 0.75]"
+    handleBehavior="cycle"
+  >
+    <ng-template>
+      <ion-content class="ion-padding">
+        <div class="ion-margin-top">
+          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
+        </div>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
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..35fb1754b2e
--- /dev/null
+++ b/static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```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',
+  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 c4a743b2745..45c2b05e66c 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,38 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor(private animationCtrl: AnimationController) {}

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

---
 .../v7/modal/can-dismiss/boolean/angular/example_component_ts.md | 1 +
 .../can-dismiss/child-state/angular/example_component_ts.md      | 1 +
 .../modal/can-dismiss/function/angular/example_component_ts.md   | 1 +
 .../prevent-swipe-to-close/angular/example_component_ts.md       | 1 +
 static/usage/v7/modal/card/basic/angular/example_component_ts.md | 1 +
 static/usage/v7/modal/controller/angular/example_component_ts.md | 1 +
 .../usage/v7/modal/inline/basic/angular/example_component_ts.md  | 1 +
 .../v7/modal/inline/is-open/angular/example_component_ts.md      | 1 +
 .../v7/modal/performance/mount/angular/example_component_ts.md   | 1 +
 .../usage/v7/modal/sheet/basic/angular/example_component_ts.md   | 1 +
 .../modal/sheet/handle-behavior/angular/example_component_ts.md  | 1 +
 .../v7/modal/styling/animations/angular/example_component_ts.md  | 1 +
 .../v8/modal/can-dismiss/boolean/angular/example_component_ts.md | 1 +
 .../can-dismiss/child-state/angular/example_component_ts.md      | 1 +
 .../modal/can-dismiss/function/angular/example_component_ts.md   | 1 +
 .../prevent-swipe-to-close/angular/example_component_ts.md       | 1 +
 static/usage/v8/modal/card/basic/angular/example_component_ts.md | 1 +
 static/usage/v8/modal/controller/angular/example_component_ts.md | 1 +
 .../usage/v8/modal/inline/basic/angular/example_component_ts.md  | 1 +
 .../v8/modal/inline/is-open/angular/example_component_ts.md      | 1 +
 .../v8/modal/performance/mount/angular/example_component_ts.md   | 1 +
 .../usage/v8/modal/sheet/basic/angular/example_component_ts.md   | 1 +
 .../modal/sheet/handle-behavior/angular/example_component_ts.md  | 1 +
 .../v8/modal/styling/animations/angular/example_component_ts.md  | 1 +
 24 files changed, 24 insertions(+)

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 e16bbf9053c..3de570c2d01 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
@@ -16,6 +16,7 @@ import { CheckboxCustomEvent } from '@ionic/angular';
 @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 {
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 c2f0366a78c..5422967137f 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
@@ -7,6 +7,7 @@ import { ActionSheetController } from '@ionic/angular';
 @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/can-dismiss/function/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md
index a9f23758848..75d58178366 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
@@ -15,6 +15,7 @@ import { ActionSheetController } from '@ionic/angular';
 @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/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 dfffc27bf23..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
@@ -13,6 +13,7 @@ import {
 @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/card/basic/angular/example_component_ts.md b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
index bff7184316b..7eff70d7cea 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
@@ -18,6 +18,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,
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 8497a35dc20..e693a88c21f 100644
--- a/static/usage/v7/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v7/modal/controller/angular/example_component_ts.md
@@ -8,6 +8,7 @@ import { ModalExampleComponent } from './modal-example.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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 290a9df7583..34903903ed3 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
@@ -17,6 +17,7 @@ import { OverlayEventDetail } from '@ionic/core/components';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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 63536269217..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
@@ -13,6 +13,7 @@ import {
 @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/angular/example_component_ts.md b/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
index 50b91856a6c..834c04ea000 100644
--- a/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
+++ b/static/usage/v7/modal/performance/mount/angular/example_component_ts.md
@@ -13,6 +13,7 @@ import {
 @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/sheet/basic/angular/example_component_ts.md b/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
index 25afbbdfac2..0a7209d8924 100644
--- a/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
+++ b/static/usage/v7/modal/sheet/basic/angular/example_component_ts.md
@@ -18,6 +18,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,
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
index 35fb1754b2e..ee03f01adc3 100644
--- 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
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonTool
 @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/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
index 45c2b05e66c..b55f43aad8c 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
@@ -19,6 +19,7 @@ import { AnimationController } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,
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 e16bbf9053c..3de570c2d01 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
@@ -16,6 +16,7 @@ import { CheckboxCustomEvent } from '@ionic/angular';
 @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 {
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 c2f0366a78c..5422967137f 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
@@ -7,6 +7,7 @@ import { ActionSheetController } from '@ionic/angular';
 @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/can-dismiss/function/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md
index a9f23758848..75d58178366 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
@@ -15,6 +15,7 @@ import { ActionSheetController } from '@ionic/angular';
 @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/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 dfffc27bf23..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
@@ -13,6 +13,7 @@ import {
 @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/card/basic/angular/example_component_ts.md b/static/usage/v8/modal/card/basic/angular/example_component_ts.md
index bff7184316b..7eff70d7cea 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
@@ -18,6 +18,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,
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 8497a35dc20..e693a88c21f 100644
--- a/static/usage/v8/modal/controller/angular/example_component_ts.md
+++ b/static/usage/v8/modal/controller/angular/example_component_ts.md
@@ -8,6 +8,7 @@ import { ModalExampleComponent } from './modal-example.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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 290a9df7583..34903903ed3 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
@@ -17,6 +17,7 @@ import { OverlayEventDetail } from '@ionic/core/components';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
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 63536269217..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
@@ -13,6 +13,7 @@ import {
 @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/angular/example_component_ts.md b/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
index 50b91856a6c..834c04ea000 100644
--- a/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
+++ b/static/usage/v8/modal/performance/mount/angular/example_component_ts.md
@@ -13,6 +13,7 @@ import {
 @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/sheet/basic/angular/example_component_ts.md b/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
index 25afbbdfac2..0a7209d8924 100644
--- a/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
+++ b/static/usage/v8/modal/sheet/basic/angular/example_component_ts.md
@@ -18,6 +18,7 @@ import {
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,
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
index 35fb1754b2e..ee03f01adc3 100644
--- 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
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonTool
 @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/styling/animations/angular/example_component_ts.md b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md
index 45c2b05e66c..b55f43aad8c 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
@@ -19,6 +19,7 @@ import { AnimationController } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [
     IonAvatar,
     IonButton,

From 5b87fe250f27f90bf1fd44b240e13dc9d49792f5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 26 Dec 2024 15:43:06 -0500
Subject: [PATCH 3/4] docs(modal): update angular to standalone

---
 .../boolean/angular/example_component_ts.md   |  4 +-
 .../child-state/angular/app_module_ts.md      | 19 -------
 .../child-state/angular/child_component_ts.md | 16 +++++-
 .../angular/example_component_ts.md           | 20 +++++--
 .../v7/modal/can-dismiss/child-state/index.md |  2 -
 .../function/angular/example_component_ts.md  |  5 +-
 .../basic/angular/example_component_ts.md     |  2 +-
 .../modal/controller/angular/app_module_ts.md | 19 -------
 .../angular/example_component_ts.md           |  6 +-
 .../angular/modal-example_component_ts.md     | 15 ++++-
 static/usage/v7/modal/controller/index.md     |  2 -
 .../basic/angular/example_component_ts.md     | 19 +++++--
 .../v7/modal/performance/mount/angular.md     | 23 --------
 .../angular/example_component_ts.md           | 12 ++++
 .../usage/v7/modal/sheet/auto-height/index.md |  2 +
 static/usage/v7/modal/sheet/basic/angular.md  | 56 -------------------
 .../v7/modal/sheet/handle-behavior/angular.md | 25 ---------
 .../angular/example_component_ts.md           |  6 +-
 .../theming/angular/example_component_ts.md   | 38 +++++++++++++
 .../usage/v7/modal/styling/theming/index.md   |  4 +-
 .../boolean/angular/example_component_ts.md   |  4 +-
 .../child-state/angular/app_module_ts.md      | 19 -------
 .../child-state/angular/child_component_ts.md | 16 +++++-
 .../angular/example_component_ts.md           | 20 +++++--
 .../v8/modal/can-dismiss/child-state/index.md |  2 -
 .../function/angular/example_component_ts.md  |  5 +-
 .../basic/angular/example_component_ts.md     |  2 +-
 .../modal/controller/angular/app_module_ts.md | 19 -------
 .../angular/example_component_ts.md           |  6 +-
 .../angular/modal-example_component_ts.md     | 15 ++++-
 static/usage/v8/modal/controller/index.md     |  2 -
 .../basic/angular/example_component_ts.md     | 19 +++++--
 .../v8/modal/performance/mount/angular.md     | 23 --------
 .../angular/example_component_ts.md           | 12 ++++
 .../usage/v8/modal/sheet/auto-height/index.md |  2 +
 static/usage/v8/modal/sheet/basic/angular.md  | 56 -------------------
 .../v8/modal/sheet/handle-behavior/angular.md | 25 ---------
 .../angular/example_component_ts.md           |  6 +-
 .../theming/angular/example_component_ts.md   | 38 +++++++++++++
 .../usage/v8/modal/styling/theming/index.md   |  4 +-
 40 files changed, 248 insertions(+), 342 deletions(-)
 delete mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md
 delete mode 100644 static/usage/v7/modal/controller/angular/app_module_ts.md
 delete mode 100644 static/usage/v7/modal/performance/mount/angular.md
 create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_ts.md
 delete mode 100644 static/usage/v7/modal/sheet/basic/angular.md
 delete mode 100644 static/usage/v7/modal/sheet/handle-behavior/angular.md
 create mode 100644 static/usage/v7/modal/styling/theming/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md
 delete mode 100644 static/usage/v8/modal/controller/angular/app_module_ts.md
 delete mode 100644 static/usage/v8/modal/performance/mount/angular.md
 create mode 100644 static/usage/v8/modal/sheet/auto-height/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/modal/sheet/basic/angular.md
 delete mode 100644 static/usage/v8/modal/sheet/handle-behavior/angular.md
 create mode 100644 static/usage/v8/modal/styling/theming/angular/example_component_ts.md

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 3de570c2d01..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  CheckboxCustomEvent,
   IonButton,
   IonButtons,
   IonCheckbox,
@@ -11,7 +12,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -22,7 +22,7 @@ import { CheckboxCustomEvent } from '@ionic/angular';
 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 5422967137f..2a9f1cd6c9a 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,17 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+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: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+  imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
@@ -21,7 +30,8 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onDismissChange(canDismiss: boolean) {
+  onDismissChange(canDismiss: any) {
+    console.log('canDismiss', canDismiss);
     // Allows the modal to be dismissed based on the state of the checkbox
     this.canDismissOverride = canDismiss;
   }
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 75d58178366..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  ActionSheetController,
   IonButton,
   IonButtons,
   IonContent,
@@ -10,8 +11,6 @@ import {
   IonToolbar,
 } from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
-
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -19,7 +18,7 @@ import { ActionSheetController } from '@ionic/angular';
   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/card/basic/angular/example_component_ts.md b/static/usage/v7/modal/card/basic/angular/example_component_ts.md
index 7eff70d7cea..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
@@ -36,7 +36,7 @@ import {
 })
 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 e693a88c21f..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,15 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+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: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+  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/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
index 34903903ed3..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,5 +1,6 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   IonButton,
   IonButtons,
@@ -11,20 +12,30 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
+  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/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md
deleted file mode 100644
index 4b8bb7bc9d2..00000000000
--- a/static/usage/v7/modal/performance/mount/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Example</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
-  <ion-modal [keepContentsMounted]="true" trigger="open-modal" #modal>
-    <ng-template>
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button (click)="modal.dismiss()">Cancel</ion-button>
-          </ion-buttons>
-          <ion-title>Modal</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding"> This content was mounted as soon as the modal was created. </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
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/basic/angular.md b/static/usage/v7/modal/sheet/basic/angular.md
deleted file mode 100644
index 6561e311463..00000000000
--- a/static/usage/v7/modal/sheet/basic/angular.md
+++ /dev/null
@@ -1,56 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>App</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
-    <ng-template>
-      <ion-content>
-        <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
-        <ion-list>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Connor Smith</h2>
-              <p>Sales Rep</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Daniel Smith</h2>
-              <p>Product Designer</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Greg Smith</h2>
-              <p>Director of Operations</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Zoey Smith</h2>
-              <p>CEO</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/angular.md b/static/usage/v7/modal/sheet/handle-behavior/angular.md
deleted file mode 100644
index d6f30b1ca8f..00000000000
--- a/static/usage/v7/modal/sheet/handle-behavior/angular.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>App</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-  <ion-modal
-    trigger="open-modal"
-    [initialBreakpoint]="0.25"
-    [breakpoints]="[0, 0.25, 0.5, 0.75]"
-    handleBehavior="cycle"
-  >
-    <ng-template>
-      <ion-content class="ion-padding">
-        <div class="ion-margin-top">
-          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
-        </div>
-      </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
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 b55f43aad8c..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  AnimationController,
   IonAvatar,
   IonButton,
   IonButtons,
@@ -14,7 +15,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -43,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 3de570c2d01..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  CheckboxCustomEvent,
   IonButton,
   IonButtons,
   IonCheckbox,
@@ -11,7 +12,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -22,7 +22,7 @@ import { CheckboxCustomEvent } from '@ionic/angular';
 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 5422967137f..2a9f1cd6c9a 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,17 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+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: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+  imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
@@ -21,7 +30,8 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onDismissChange(canDismiss: boolean) {
+  onDismissChange(canDismiss: any) {
+    console.log('canDismiss', canDismiss);
     // Allows the modal to be dismissed based on the state of the checkbox
     this.canDismissOverride = canDismiss;
   }
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 75d58178366..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  ActionSheetController,
   IonButton,
   IonButtons,
   IonContent,
@@ -10,8 +11,6 @@ import {
   IonToolbar,
 } from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
-
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
@@ -19,7 +18,7 @@ import { ActionSheetController } from '@ionic/angular';
   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/card/basic/angular/example_component_ts.md b/static/usage/v8/modal/card/basic/angular/example_component_ts.md
index 7eff70d7cea..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
@@ -36,7 +36,7 @@ import {
 })
 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 e693a88c21f..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,15 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+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: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+  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/inline/basic/angular/example_component_ts.md b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
index 34903903ed3..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,5 +1,6 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   IonButton,
   IonButtons,
@@ -11,20 +12,30 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { IonModal } from '@ionic/angular';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonModal, IonTitle, IonToolbar],
+  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/performance/mount/angular.md b/static/usage/v8/modal/performance/mount/angular.md
deleted file mode 100644
index 4b8bb7bc9d2..00000000000
--- a/static/usage/v8/modal/performance/mount/angular.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Example</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Modal</ion-button>
-  <ion-modal [keepContentsMounted]="true" trigger="open-modal" #modal>
-    <ng-template>
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button (click)="modal.dismiss()">Cancel</ion-button>
-          </ion-buttons>
-          <ion-title>Modal</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding"> This content was mounted as soon as the modal was created. </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
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/basic/angular.md b/static/usage/v8/modal/sheet/basic/angular.md
deleted file mode 100644
index 6561e311463..00000000000
--- a/static/usage/v8/modal/sheet/basic/angular.md
+++ /dev/null
@@ -1,56 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>App</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-  <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
-    <ng-template>
-      <ion-content>
-        <ion-searchbar placeholder="Search" (click)="modal.setCurrentBreakpoint(0.75)"></ion-searchbar>
-        <ion-list>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Connor Smith</h2>
-              <p>Sales Rep</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Daniel Smith</h2>
-              <p>Product Designer</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Greg Smith</h2>
-              <p>Director of Operations</p>
-            </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-avatar slot="start">
-              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
-            </ion-avatar>
-            <ion-label>
-              <h2>Zoey Smith</h2>
-              <p>CEO</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
diff --git a/static/usage/v8/modal/sheet/handle-behavior/angular.md b/static/usage/v8/modal/sheet/handle-behavior/angular.md
deleted file mode 100644
index d6f30b1ca8f..00000000000
--- a/static/usage/v8/modal/sheet/handle-behavior/angular.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>App</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
-
-  <ion-modal
-    trigger="open-modal"
-    [initialBreakpoint]="0.25"
-    [breakpoints]="[0, 0.25, 0.5, 0.75]"
-    handleBehavior="cycle"
-  >
-    <ng-template>
-      <ion-content class="ion-padding">
-        <div class="ion-margin-top">
-          <ion-label>Click the handle above to advance to the next breakpoint.</ion-label>
-        </div>
-      </ion-content>
-    </ng-template>
-  </ion-modal>
-</ion-content>
-```
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 b55f43aad8c..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,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  AnimationController,
   IonAvatar,
   IonButton,
   IonButtons,
@@ -14,7 +15,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -43,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,
       },
     },

From 4bd97d1b53e6a6a76cf0becd200762219ddcd061 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:23:41 -0500
Subject: [PATCH 4/4] docs(modal): update angular to standalone

---
 .../can-dismiss/child-state/angular/example_component_ts.md    | 3 +--
 .../can-dismiss/child-state/angular/example_component_ts.md    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

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 2a9f1cd6c9a..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
@@ -30,8 +30,7 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onDismissChange(canDismiss: any) {
-    console.log('canDismiss', canDismiss);
+  onDismissChange(canDismiss: boolean) {
     // Allows the modal to be dismissed based on the state of the checkbox
     this.canDismissOverride = canDismiss;
   }
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 2a9f1cd6c9a..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
@@ -30,8 +30,7 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onDismissChange(canDismiss: any) {
-    console.log('canDismiss', canDismiss);
+  onDismissChange(canDismiss: boolean) {
     // Allows the modal to be dismissed based on the state of the checkbox
     this.canDismissOverride = canDismiss;
   }