docs(nav): update angular to standalone (#3948)

Author: brandyscarney

static/usage/v7/nav/modal-navigation/angular/app_module_ts.md

@@ -1,15 +1,26 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);

static/usage/v7/nav/modal-navigation/angular/example_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) {}

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';
 
 @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) {}

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';
 
 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;

static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.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: {

static/usage/v7/nav/modal-navigation/index.md

@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;

static/usage/v7/nav/nav-link/angular/app_module_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;

static/usage/v7/nav/nav-link/angular/example_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 {}
 ```