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

---
 .../angular/example_component_ts.md           |  2 ++
 .../sizing/angular/example_component_html.md  | 15 ++++++++++++
 .../sizing/angular/example_component_ts.md    | 11 +++++++++
 .../v7/popover/customization/sizing/index.md  | 16 +++++++++++--
 .../nested/angular/example_component_html.md  | 24 +++++++++++++++++++
 .../nested/angular/example_component_ts.md    | 11 +++++++++
 static/usage/v7/popover/nested/index.md       | 16 +++++++++++--
 .../mount/angular/example_component_html.md   |  8 +++++++
 .../mount/angular/example_component_ts.md     | 11 +++++++++
 .../v7/popover/performance/mount/index.md     | 11 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 22 +++++++++++++++++
 .../angular/example_component_ts.md           | 11 +++++++++
 .../presenting/inline-trigger/index.md        | 16 +++++++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../sizing/angular/example_component_html.md  | 15 ++++++++++++
 .../sizing/angular/example_component_ts.md    | 11 +++++++++
 .../v8/popover/customization/sizing/index.md  | 16 +++++++++++--
 .../nested/angular/example_component_html.md  | 24 +++++++++++++++++++
 .../nested/angular/example_component_ts.md    | 11 +++++++++
 static/usage/v8/popover/nested/index.md       | 16 +++++++++++--
 .../mount/angular/example_component_html.md   |  8 +++++++
 .../mount/angular/example_component_ts.md     | 11 +++++++++
 .../v8/popover/performance/mount/index.md     | 11 +++++++--
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_ts.md           |  2 ++
 .../angular/example_component_html.md         | 22 +++++++++++++++++
 .../angular/example_component_ts.md           | 11 +++++++++
 .../presenting/inline-trigger/index.md        | 16 +++++++++++--
 30 files changed, 340 insertions(+), 16 deletions(-)
 create mode 100644 static/usage/v7/popover/customization/sizing/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/nested/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/nested/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/performance/mount/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/performance/mount/angular/example_component_ts.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md
 create mode 100644 static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
 create mode 100644 static/usage/v8/popover/customization/sizing/angular/example_component_html.md
 create mode 100644 static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
 create mode 100644 static/usage/v8/popover/nested/angular/example_component_html.md
 create mode 100644 static/usage/v8/popover/nested/angular/example_component_ts.md
 create mode 100644 static/usage/v8/popover/performance/mount/angular/example_component_html.md
 create mode 100644 static/usage/v8/popover/performance/mount/angular/example_component_ts.md
 create mode 100644 static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md
 create mode 100644 static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md

diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
index 4db53a836a9..3d0ceecf836 100644
--- a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v7/popover/customization/sizing/angular/example_component_html.md b/static/usage/v7/popover/customization/sizing/angular/example_component_html.md
new file mode 100644
index 00000000000..ca06883d451
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-button id="auto-trigger">Size=Auto</ion-button>
+<ion-popover trigger="auto-trigger" size="auto">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="cover-trigger">Size=Cover</ion-button>
+<ion-popover trigger="cover-trigger" size="cover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md
index 3eb127648dc..dd1f84ade48 100644
--- a/static/usage/v7/popover/customization/sizing/index.md
+++ b/static/usage/v7/popover/customization/sizing/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/customization/sizing/demo.html"
 />
diff --git a/static/usage/v7/popover/nested/angular/example_component_html.md b/static/usage/v7/popover/nested/angular/example_component_html.md
new file mode 100644
index 00000000000..cdbe68f341f
--- /dev/null
+++ b/static/usage/v7/popover/nested/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-button id="popover-button">Open Menu</ion-button>
+<ion-popover trigger="popover-button" [dismissOnSelect]="true">
+  <ng-template>
+    <ion-content>
+      <ion-list>
+        <ion-item [button]="true" [detail]="false">Option 1</ion-item>
+        <ion-item [button]="true" [detail]="false">Option 2</ion-item>
+        <ion-item [button]="true" id="nested-trigger">More options...</ion-item>
+
+        <ion-popover trigger="nested-trigger" [dismissOnSelect]="true" side="end">
+          <ng-template>
+            <ion-content>
+              <ion-list>
+                <ion-item [button]="true" [detail]="false">Nested option</ion-item>
+              </ion-list>
+            </ion-content>
+          </ng-template>
+        </ion-popover>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/nested/angular/example_component_ts.md b/static/usage/v7/popover/nested/angular/example_component_ts.md
new file mode 100644
index 00000000000..d385b068e2c
--- /dev/null
+++ b/static/usage/v7/popover/nested/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md
index cb8a824edb0..c9cf4cedcaa 100644
--- a/static/usage/v7/popover/nested/index.md
+++ b/static/usage/v7/popover/nested/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/nested/demo.html"
 />
diff --git a/static/usage/v7/popover/performance/mount/angular/example_component_html.md b/static/usage/v7/popover/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..b8a696ab948
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="open-popover">Open Popover</ion-button>
+<ion-popover [keepContentsMounted]="true" trigger="open-popover">
+  <ng-template>
+    <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/performance/mount/angular/example_component_ts.md b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md
index 9c846cc784b..4e995fa3754 100644
--- a/static/usage/v7/popover/performance/mount/index.md
+++ b/static/usage/v7/popover/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="medium"
   src="usage/v7/popover/performance/mount/demo.html"
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
index 647bef04dac..e929db538ce 100644
--- a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
 
 import { PopoverController } from '@ionic/angular';
 
@@ -8,6 +9,7 @@ import { PopoverComponent } from './popover.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(public popoverController: PopoverController) {}
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
index ef604e603d9..fb688e17235 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..de7f6d02a6f
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+<ion-button id="click-trigger">Left-Click Me</ion-button>
+<ion-popover trigger="click-trigger" triggerAction="click">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="hover-trigger">Hover Over Me</ion-button>
+<ion-popover trigger="hover-trigger" triggerAction="hover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md
index ac99108a561..37e86a4ac58 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v7/popover/presenting/inline-trigger/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v7/popover/presenting/inline-trigger/demo.html"
 />
diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
index 4db53a836a9..3d0ceecf836 100644
--- a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
+++ b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md
@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/popover/customization/sizing/angular/example_component_html.md b/static/usage/v8/popover/customization/sizing/angular/example_component_html.md
new file mode 100644
index 00000000000..ca06883d451
--- /dev/null
+++ b/static/usage/v8/popover/customization/sizing/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-button id="auto-trigger">Size=Auto</ion-button>
+<ion-popover trigger="auto-trigger" size="auto">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="cover-trigger">Size=Cover</ion-button>
+<ion-popover trigger="cover-trigger" size="cover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/customization/sizing/index.md b/static/usage/v8/popover/customization/sizing/index.md
index 1d79e113da8..5848dbfe329 100644
--- a/static/usage/v8/popover/customization/sizing/index.md
+++ b/static/usage/v8/popover/customization/sizing/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/customization/sizing/demo.html"
 />
diff --git a/static/usage/v8/popover/nested/angular/example_component_html.md b/static/usage/v8/popover/nested/angular/example_component_html.md
new file mode 100644
index 00000000000..cdbe68f341f
--- /dev/null
+++ b/static/usage/v8/popover/nested/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+<ion-button id="popover-button">Open Menu</ion-button>
+<ion-popover trigger="popover-button" [dismissOnSelect]="true">
+  <ng-template>
+    <ion-content>
+      <ion-list>
+        <ion-item [button]="true" [detail]="false">Option 1</ion-item>
+        <ion-item [button]="true" [detail]="false">Option 2</ion-item>
+        <ion-item [button]="true" id="nested-trigger">More options...</ion-item>
+
+        <ion-popover trigger="nested-trigger" [dismissOnSelect]="true" side="end">
+          <ng-template>
+            <ion-content>
+              <ion-list>
+                <ion-item [button]="true" [detail]="false">Nested option</ion-item>
+              </ion-list>
+            </ion-content>
+          </ng-template>
+        </ion-popover>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v8/popover/nested/angular/example_component_ts.md b/static/usage/v8/popover/nested/angular/example_component_ts.md
new file mode 100644
index 00000000000..d385b068e2c
--- /dev/null
+++ b/static/usage/v8/popover/nested/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/nested/index.md b/static/usage/v8/popover/nested/index.md
index f1f7f46524b..5600f89d7eb 100644
--- a/static/usage/v8/popover/nested/index.md
+++ b/static/usage/v8/popover/nested/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="medium"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/nested/demo.html"
 />
diff --git a/static/usage/v8/popover/performance/mount/angular/example_component_html.md b/static/usage/v8/popover/performance/mount/angular/example_component_html.md
new file mode 100644
index 00000000000..b8a696ab948
--- /dev/null
+++ b/static/usage/v8/popover/performance/mount/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+<ion-button id="open-popover">Open Popover</ion-button>
+<ion-popover [keepContentsMounted]="true" trigger="open-popover">
+  <ng-template>
+    <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v8/popover/performance/mount/angular/example_component_ts.md b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/performance/mount/index.md b/static/usage/v8/popover/performance/mount/index.md
index b6b291a7036..ea6103db4f3 100644
--- a/static/usage/v8/popover/performance/mount/index.md
+++ b/static/usage/v8/popover/performance/mount/index.md
@@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
@@ -11,7 +13,12 @@ import angular from './angular.md';
     javascript,
     react,
     vue,
-    angular,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
   }}
   size="medium"
   src="usage/v8/popover/performance/mount/demo.html"
diff --git a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
index 647bef04dac..e929db538ce 100644
--- a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
 
 import { PopoverController } from '@ionic/angular';
 
@@ -8,6 +9,7 @@ import { PopoverComponent } from './popover.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton],
 })
 export class ExampleComponent {
   constructor(public popoverController: PopoverController) {}
diff --git a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
index ef604e603d9..fb688e17235 100644
--- a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -1,9 +1,11 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
   @ViewChild('popover') popover;
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..de7f6d02a6f
--- /dev/null
+++ b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+<ion-button id="click-trigger">Left-Click Me</ion-button>
+<ion-popover trigger="click-trigger" triggerAction="click">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
+<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+
+<ion-button id="hover-trigger">Hover Over Me</ion-button>
+<ion-popover trigger="hover-trigger" triggerAction="hover">
+  <ng-template>
+    <ion-content class="ion-padding">Hello World!</ion-content>
+  </ng-template>
+</ion-popover>
+```
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..bebcfbd493a
--- /dev/null
+++ b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/presenting/inline-trigger/index.md b/static/usage/v8/popover/presenting/inline-trigger/index.md
index 4f9756466ff..051e50ad135 100644
--- a/static/usage/v8/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v8/popover/presenting/inline-trigger/index.md
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
   size="300px"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
   src="usage/v8/popover/presenting/inline-trigger/demo.html"
 />

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

---
 .../popover/customization/sizing/angular/example_component_ts.md | 1 +
 static/usage/v7/popover/nested/angular/example_component_ts.md   | 1 +
 .../v7/popover/performance/mount/angular/example_component_ts.md | 1 +
 .../presenting/controller/angular/example_component_ts.md        | 1 +
 .../presenting/inline-isopen/angular/example_component_ts.md     | 1 +
 .../presenting/inline-trigger/angular/example_component_ts.md    | 1 +
 .../popover/customization/sizing/angular/example_component_ts.md | 1 +
 static/usage/v8/popover/nested/angular/example_component_ts.md   | 1 +
 .../v8/popover/performance/mount/angular/example_component_ts.md | 1 +
 .../presenting/controller/angular/example_component_ts.md        | 1 +
 .../presenting/inline-isopen/angular/example_component_ts.md     | 1 +
 .../presenting/inline-trigger/angular/example_component_ts.md    | 1 +
 12 files changed, 12 insertions(+)

diff --git a/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
+++ b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/popover/nested/angular/example_component_ts.md b/static/usage/v7/popover/nested/angular/example_component_ts.md
index d385b068e2c..b32f800ad5d 100644
--- a/static/usage/v7/popover/nested/angular/example_component_ts.md
+++ b/static/usage/v7/popover/nested/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angu
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/popover/performance/mount/angular/example_component_ts.md b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
+++ b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
index e929db538ce..b0a6d63d53f 100644
--- a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -9,6 +9,7 @@ import { PopoverComponent } from './popover.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
index fb688e17235..44b683e908c 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
+++ b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/popover/nested/angular/example_component_ts.md b/static/usage/v8/popover/nested/angular/example_component_ts.md
index d385b068e2c..b32f800ad5d 100644
--- a/static/usage/v8/popover/nested/angular/example_component_ts.md
+++ b/static/usage/v8/popover/nested/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angu
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonItem, IonList, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/popover/performance/mount/angular/example_component_ts.md b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
+++ b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}
diff --git a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
index e929db538ce..b0a6d63d53f 100644
--- a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
@@ -9,6 +9,7 @@ import { PopoverComponent } from './popover.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
index fb688e17235..44b683e908c 100644
--- a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
index bebcfbd493a..3d0ceecf836 100644
--- a/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {}

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

---
 .../popover/customization/sizing/angular.md   | 15 ------------
 .../styling/angular/example_component_ts.md   | 12 ++++++++++
 .../v7/popover/customization/styling/index.md |  2 ++
 static/usage/v7/popover/nested/angular.md     | 24 -------------------
 .../v7/popover/performance/mount/angular.md   |  8 -------
 .../controller/angular/app_module_ts.md       | 19 ---------------
 .../angular/example_component_ts.md           |  6 ++---
 .../angular/popover_component_ts.md           |  3 ++-
 .../v7/popover/presenting/controller/index.md |  2 --
 .../angular/example_component_ts.md           |  2 +-
 .../presenting/inline-trigger/angular.md      | 22 -----------------
 .../popover/customization/sizing/angular.md   | 15 ------------
 .../styling/angular/example_component_ts.md   | 12 ++++++++++
 .../v8/popover/customization/styling/index.md |  2 ++
 static/usage/v8/popover/nested/angular.md     | 24 -------------------
 .../v8/popover/performance/mount/angular.md   |  8 -------
 .../controller/angular/app_module_ts.md       | 19 ---------------
 .../angular/example_component_ts.md           |  6 ++---
 .../angular/popover_component_ts.md           |  3 ++-
 .../v8/popover/presenting/controller/index.md |  2 --
 .../angular/example_component_ts.md           |  2 +-
 .../presenting/inline-trigger/angular.md      | 22 -----------------
 22 files changed, 38 insertions(+), 192 deletions(-)
 delete mode 100644 static/usage/v7/popover/customization/sizing/angular.md
 create mode 100644 static/usage/v7/popover/customization/styling/angular/example_component_ts.md
 delete mode 100644 static/usage/v7/popover/nested/angular.md
 delete mode 100644 static/usage/v7/popover/performance/mount/angular.md
 delete mode 100644 static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
 delete mode 100644 static/usage/v7/popover/presenting/inline-trigger/angular.md
 delete mode 100644 static/usage/v8/popover/customization/sizing/angular.md
 create mode 100644 static/usage/v8/popover/customization/styling/angular/example_component_ts.md
 delete mode 100644 static/usage/v8/popover/nested/angular.md
 delete mode 100644 static/usage/v8/popover/performance/mount/angular.md
 delete mode 100644 static/usage/v8/popover/presenting/controller/angular/app_module_ts.md
 delete mode 100644 static/usage/v8/popover/presenting/inline-trigger/angular.md

diff --git a/static/usage/v7/popover/customization/sizing/angular.md b/static/usage/v7/popover/customization/sizing/angular.md
deleted file mode 100644
index ca06883d451..00000000000
--- a/static/usage/v7/popover/customization/sizing/angular.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```html
-<ion-button id="auto-trigger">Size=Auto</ion-button>
-<ion-popover trigger="auto-trigger" size="auto">
-  <ng-template>
-    <ion-content class="ion-padding">Hello!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="cover-trigger">Size=Cover</ion-button>
-<ion-popover trigger="cover-trigger" size="cover">
-  <ng-template>
-    <ion-content class="ion-padding">Hello!</ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v7/popover/customization/styling/angular/example_component_ts.md b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..3d0ceecf836
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md
index 658ef72d45a..4bf193fb781 100644
--- a/static/usage/v7/popover/customization/styling/index.md
+++ b/static/usage/v7/popover/customization/styling/index.md
@@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v7/popover/nested/angular.md b/static/usage/v7/popover/nested/angular.md
deleted file mode 100644
index cdbe68f341f..00000000000
--- a/static/usage/v7/popover/nested/angular.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```html
-<ion-button id="popover-button">Open Menu</ion-button>
-<ion-popover trigger="popover-button" [dismissOnSelect]="true">
-  <ng-template>
-    <ion-content>
-      <ion-list>
-        <ion-item [button]="true" [detail]="false">Option 1</ion-item>
-        <ion-item [button]="true" [detail]="false">Option 2</ion-item>
-        <ion-item [button]="true" id="nested-trigger">More options...</ion-item>
-
-        <ion-popover trigger="nested-trigger" [dismissOnSelect]="true" side="end">
-          <ng-template>
-            <ion-content>
-              <ion-list>
-                <ion-item [button]="true" [detail]="false">Nested option</ion-item>
-              </ion-list>
-            </ion-content>
-          </ng-template>
-        </ion-popover>
-      </ion-list>
-    </ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v7/popover/performance/mount/angular.md b/static/usage/v7/popover/performance/mount/angular.md
deleted file mode 100644
index b8a696ab948..00000000000
--- a/static/usage/v7/popover/performance/mount/angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```html
-<ion-button id="open-popover">Open Popover</ion-button>
-<ion-popover [keepContentsMounted]="true" trigger="open-popover">
-  <ng-template>
-    <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
deleted file mode 100644
index 887ca3acf89..00000000000
--- a/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PopoverComponent } from './popover.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PopoverComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
index b0a6d63d53f..0ef12b6fd4c 100644
--- a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -1,8 +1,6 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
-import { IonButton } from '@ionic/angular/standalone';
-
-import { PopoverController } from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonButton, PopoverController } from '@ionic/angular/standalone';
 
 import { PopoverComponent } from './popover.component';
 
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
index 2900a32240c..64d3666e3e9 100644
--- a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
@@ -1,10 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
+  imports: [IonContent],
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md
index 9bbfc24fc16..98d6d7216e5 100644
--- a/static/usage/v7/popover/presenting/controller/index.md
+++ b/static/usage/v7/popover/presenting/controller/index.md
@@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_popover_component_html from './angular/popover_component_html.md';
 import angular_popover_component_ts from './angular/popover_component_ts.md';
-import angular_app_module from './angular/app_module_ts.md';
 
 <Playground
   version="7"
@@ -30,7 +29,6 @@ import angular_app_module from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/popover.component.html': angular_popover_component_html,
         'src/app/popover.component.ts': angular_popover_component_ts,
-        'src/app/app.module.ts': angular_app_module,
       },
     },
   }}
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
index 44b683e908c..617cd653a49 100644
--- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -9,7 +9,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
 
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular.md b/static/usage/v7/popover/presenting/inline-trigger/angular.md
deleted file mode 100644
index de7f6d02a6f..00000000000
--- a/static/usage/v7/popover/presenting/inline-trigger/angular.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-button id="click-trigger">Left-Click Me</ion-button>
-<ion-popover trigger="click-trigger" triggerAction="click">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
-<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="hover-trigger">Hover Over Me</ion-button>
-<ion-popover trigger="hover-trigger" triggerAction="hover">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v8/popover/customization/sizing/angular.md b/static/usage/v8/popover/customization/sizing/angular.md
deleted file mode 100644
index ca06883d451..00000000000
--- a/static/usage/v8/popover/customization/sizing/angular.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```html
-<ion-button id="auto-trigger">Size=Auto</ion-button>
-<ion-popover trigger="auto-trigger" size="auto">
-  <ng-template>
-    <ion-content class="ion-padding">Hello!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="cover-trigger">Size=Cover</ion-button>
-<ion-popover trigger="cover-trigger" size="cover">
-  <ng-template>
-    <ion-content class="ion-padding">Hello!</ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v8/popover/customization/styling/angular/example_component_ts.md b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..3d0ceecf836
--- /dev/null
+++ b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonPopover],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/popover/customization/styling/index.md b/static/usage/v8/popover/customization/styling/index.md
index 4e9429b2f2a..6434328a3ca 100644
--- a/static/usage/v8/popover/customization/styling/index.md
+++ b/static/usage/v8/popover/customization/styling/index.md
@@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
         'src/global.css': angular_global_css,
       },
     },
diff --git a/static/usage/v8/popover/nested/angular.md b/static/usage/v8/popover/nested/angular.md
deleted file mode 100644
index cdbe68f341f..00000000000
--- a/static/usage/v8/popover/nested/angular.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```html
-<ion-button id="popover-button">Open Menu</ion-button>
-<ion-popover trigger="popover-button" [dismissOnSelect]="true">
-  <ng-template>
-    <ion-content>
-      <ion-list>
-        <ion-item [button]="true" [detail]="false">Option 1</ion-item>
-        <ion-item [button]="true" [detail]="false">Option 2</ion-item>
-        <ion-item [button]="true" id="nested-trigger">More options...</ion-item>
-
-        <ion-popover trigger="nested-trigger" [dismissOnSelect]="true" side="end">
-          <ng-template>
-            <ion-content>
-              <ion-list>
-                <ion-item [button]="true" [detail]="false">Nested option</ion-item>
-              </ion-list>
-            </ion-content>
-          </ng-template>
-        </ion-popover>
-      </ion-list>
-    </ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v8/popover/performance/mount/angular.md b/static/usage/v8/popover/performance/mount/angular.md
deleted file mode 100644
index b8a696ab948..00000000000
--- a/static/usage/v8/popover/performance/mount/angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```html
-<ion-button id="open-popover">Open Popover</ion-button>
-<ion-popover [keepContentsMounted]="true" trigger="open-popover">
-  <ng-template>
-    <ion-content class="ion-padding">This content was mounted as soon as the popover was created.</ion-content>
-  </ng-template>
-</ion-popover>
-```
diff --git a/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md
deleted file mode 100644
index 887ca3acf89..00000000000
--- a/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PopoverComponent } from './popover.component';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PopoverComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
index b0a6d63d53f..0ef12b6fd4c 100644
--- a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md
@@ -1,8 +1,6 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
-import { IonButton } from '@ionic/angular/standalone';
-
-import { PopoverController } from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonButton, PopoverController } from '@ionic/angular/standalone';
 
 import { PopoverComponent } from './popover.component';
 
diff --git a/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
index 2900a32240c..64d3666e3e9 100644
--- a/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
+++ b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md
@@ -1,10 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { IonContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-popover',
   templateUrl: 'popover.component.html',
+  imports: [IonContent],
 })
 export class PopoverComponent {}
 ```
diff --git a/static/usage/v8/popover/presenting/controller/index.md b/static/usage/v8/popover/presenting/controller/index.md
index 3593122f0c3..35d31f2449d 100644
--- a/static/usage/v8/popover/presenting/controller/index.md
+++ b/static/usage/v8/popover/presenting/controller/index.md
@@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_popover_component_html from './angular/popover_component_html.md';
 import angular_popover_component_ts from './angular/popover_component_ts.md';
-import angular_app_module from './angular/app_module_ts.md';
 
 <Playground
   version="8"
@@ -30,7 +29,6 @@ import angular_app_module from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/popover.component.html': angular_popover_component_html,
         'src/app/popover.component.ts': angular_popover_component_ts,
-        'src/app/app.module.ts': angular_app_module,
       },
     },
   }}
diff --git a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
index 44b683e908c..617cd653a49 100644
--- a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
+++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -9,7 +9,7 @@ import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone';
   imports: [IonButton, IonContent, IonPopover],
 })
 export class ExampleComponent {
-  @ViewChild('popover') popover;
+  @ViewChild('popover') popover!: HTMLIonPopoverElement;
 
   isOpen = false;
 
diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular.md b/static/usage/v8/popover/presenting/inline-trigger/angular.md
deleted file mode 100644
index de7f6d02a6f..00000000000
--- a/static/usage/v8/popover/presenting/inline-trigger/angular.md
+++ /dev/null
@@ -1,22 +0,0 @@
-```html
-<ion-button id="click-trigger">Left-Click Me</ion-button>
-<ion-popover trigger="click-trigger" triggerAction="click">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="context-menu-trigger">Right-Click Me</ion-button>
-<ion-popover trigger="context-menu-trigger" triggerAction="context-menu">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-
-<ion-button id="hover-trigger">Hover Over Me</ion-button>
-<ion-popover trigger="hover-trigger" triggerAction="hover">
-  <ng-template>
-    <ion-content class="ion-padding">Hello World!</ion-content>
-  </ng-template>
-</ion-popover>
-```