From 8244296a23b1c592bbc5c95f2ba16747c6942e1a 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/3] docs(nav): update angular to standalone

---
 .../modal-navigation/angular/example_component_ts.md  | 11 +++++++++++
 .../v7/nav/nav-link/angular/example_component_ts.md   |  2 ++
 .../modal-navigation/angular/example_component_ts.md  | 11 +++++++++++
 .../v8/nav/nav-link/angular/example_component_ts.md   |  2 ++
 4 files changed, 26 insertions(+)

diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246d..2f19d2cc3dc 100644
--- a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { IonNav } from '@ionic/angular';
 
 import { PageOneComponent } from './page-one.component';
@@ -7,6 +17,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   @ViewChild('nav') private nav: IonNav;
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
index b123a4858ce..05c315730a5 100644
--- a/static/usage/v7/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246d..2f19d2cc3dc 100644
--- a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { IonNav } from '@ionic/angular';
 
 import { PageOneComponent } from './page-one.component';
@@ -7,6 +17,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   @ViewChild('nav') private nav: IonNav;
diff --git a/static/usage/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
index b123a4858ce..05c315730a5 100644
--- a/static/usage/v8/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;

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

---
 .../v7/nav/modal-navigation/angular/example_component_ts.md      | 1 +
 static/usage/v7/nav/nav-link/angular/example_component_ts.md     | 1 +
 .../v8/nav/modal-navigation/angular/example_component_ts.md      | 1 +
 static/usage/v8/nav/nav-link/angular/example_component_ts.md     | 1 +
 4 files changed, 4 insertions(+)

diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
index 2f19d2cc3dc..ac4f78a1084 100644
--- a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -17,6 +17,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
index 05c315730a5..4c364e72340 100644
--- a/static/usage/v7/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonNav],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
index 2f19d2cc3dc..ac4f78a1084 100644
--- a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
@@ -17,6 +17,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
diff --git a/static/usage/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
index 05c315730a5..4c364e72340 100644
--- a/static/usage/v8/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import { PageOneComponent } from './page-one.component';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonNav],
 })
 export class ExampleComponent {

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

---
 .../modal-navigation/angular/app_module_ts.md | 21 -------------------
 .../angular/example_component_ts.md           |  3 +--
 .../angular/page_one_component_ts.md          |  3 ++-
 .../angular/page_three_component_ts.md        |  3 ++-
 .../angular/page_two_component_ts.md          |  3 ++-
 static/usage/v7/nav/modal-navigation/index.md |  2 --
 .../v7/nav/nav-link/angular/app_module_ts.md  | 21 -------------------
 .../nav-link/angular/page_one_component_ts.md |  2 ++
 .../angular/page_three_component_ts.md        |  2 ++
 .../nav-link/angular/page_two_component_ts.md | 11 ++++++++++
 static/usage/v7/nav/nav-link/index.md         |  2 --
 .../modal-navigation/angular/app_module_ts.md | 21 -------------------
 .../angular/example_component_ts.md           |  3 +--
 .../angular/page_one_component_ts.md          |  3 ++-
 .../angular/page_three_component_ts.md        |  3 ++-
 .../angular/page_two_component_ts.md          |  3 ++-
 static/usage/v8/nav/modal-navigation/index.md |  2 --
 .../v8/nav/nav-link/angular/app_module_ts.md  | 21 -------------------
 .../nav-link/angular/page_one_component_ts.md |  2 ++
 .../angular/page_three_component_ts.md        |  2 ++
 .../nav-link/angular/page_two_component_ts.md | 11 ++++++++++
 static/usage/v8/nav/nav-link/index.md         |  2 --
 versioned_docs/version-v7/api/nav.md          | 14 +++++++++++++
 23 files changed, 58 insertions(+), 102 deletions(-)
 delete mode 100644 static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
 delete mode 100644 static/usage/v7/nav/nav-link/angular/app_module_ts.md
 delete mode 100644 static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
 delete mode 100644 static/usage/v8/nav/nav-link/angular/app_module_ts.md

diff --git a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
index ac4f78a1084..1c3ee806556 100644
--- a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -10,7 +10,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { IonNav } from '@ionic/angular';
 
 import { PageOneComponent } from './page-one.component';
 
@@ -21,7 +20,7 @@ import { PageOneComponent } from './page-one.component';
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d04..6467b66e9a0 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c3474..03f298b15ae 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c062..769b0bc9bda 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md
index 73ce3215f66..7e443a6d98e 100644
--- a/static/usage/v7/nav/modal-navigation/index.md
+++ b/static/usage/v7/nav/modal-navigation/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v7/nav/nav-link/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342cf..b6a83169e18 100644
--- a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed7218..4cc4fc01be1 100644
--- a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a593..d1986f19a96 100644
--- a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md
index de4e4e01562..0456c3ca67e 100644
--- a/static/usage/v7/nav/nav-link/index.md
+++ b/static/usage/v7/nav/nav-link/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
index ac4f78a1084..1c3ee806556 100644
--- a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
@@ -10,7 +10,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { IonNav } from '@ionic/angular';
 
 import { PageOneComponent } from './page-one.component';
 
@@ -21,7 +20,7 @@ import { PageOneComponent } from './page-one.component';
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d04..6467b66e9a0 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c3474..03f298b15ae 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c062..769b0bc9bda 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/modal-navigation/index.md b/static/usage/v8/nav/modal-navigation/index.md
index 3a6a6ab3142..e2e7320fe4d 100644
--- a/static/usage/v8/nav/modal-navigation/index.md
+++ b/static/usage/v8/nav/modal-navigation/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v8/nav/nav-link/angular/app_module_ts.md b/static/usage/v8/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v8/nav/nav-link/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342cf..b6a83169e18 100644
--- a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed7218..4cc4fc01be1 100644
--- a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a593..d1986f19a96 100644
--- a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/nav-link/index.md b/static/usage/v8/nav/nav-link/index.md
index eed4ca22d83..07a944aefd7 100644
--- a/static/usage/v8/nav/nav-link/index.md
+++ b/static/usage/v8/nav/nav-link/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/versioned_docs/version-v7/api/nav.md b/versioned_docs/version-v7/api/nav.md
index 2c17d05f6b2..5195dc19efb 100644
--- a/versioned_docs/version-v7/api/nav.md
+++ b/versioned_docs/version-v7/api/nav.md
@@ -37,6 +37,20 @@ import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
 <NavLinkExample />
 
+## Navigation within a Modal
+
+Modal can use Nav to offer a linear navigation that is independent of the URL.
+
+:::note
+
+The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
+
+:::
+
+import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.md';
+
+<ModalNavigationExample />
+
 ## Interfaces
 
 ### NavCustomEvent