docs(modal): update angular to standalone

Author: brandyscarney

static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md

@@ -1,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  CheckboxCustomEvent,
   IonButton,
   IonButtons,
   IonCheckbox,
@@ -11,7 +12,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -22,7 +22,7 @@ import { CheckboxCustomEvent } from '@ionic/angular';
 export class ExampleComponent {
   canDismiss = false;
 
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');

static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md

@@ -1,11 +1,25 @@
 ```ts
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
-import { CheckboxCustomEvent, IonModal } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonModal,
+  IonNote,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-child',
   templateUrl: 'child.component.html',
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonNote, IonToolbar, IonTitle],
 })
 export class ChildComponent {
   @Input() modal!: IonModal;

static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md

@@ -1,17 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
+import {
+  ActionSheetController,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
+import { ChildComponent } from './child.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
+  imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
@@ -21,7 +30,8 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onDismissChange(canDismiss: boolean) {
+  onDismissChange(canDismiss: any) {
+    console.log('canDismiss', canDismiss);
     // Allows the modal to be dismissed based on the state of the checkbox
     this.canDismissOverride = canDismiss;
   }

static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md

@@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_child_component_html from './angular/child_component_html.md';
 import angular_child_component_ts from './angular/child_component_ts.md';
-import angular_app_module_ts from './angular/app_module_ts.md';
 
 <Playground
   version="7"
@@ -33,7 +32,6 @@ import angular_app_module_ts from './angular/app_module_ts.md';
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/child.component.html': angular_child_component_html,
         'src/app/child.component.ts': angular_child_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
   }}

static/usage/v7/modal/can-dismiss/child-state/index.md

@@ -1,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
+  ActionSheetController,
   IonButton,
   IonButtons,
   IonContent,
@@ -10,16 +11,14 @@ import {
   IonToolbar,
 } from '@ionic/angular/standalone';
 
-import { ActionSheetController } from '@ionic/angular';
-
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   constructor(private actionSheetCtrl: ActionSheetController) {}
 

static/usage/v7/modal/can-dismiss/function/angular/example_component_ts.md

@@ -36,7 +36,7 @@ import {
 })
 export class ExampleComponent {
   // Typically referenced to your ion-router-outlet
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');

static/usage/v7/modal/card/basic/angular/example_component_ts.md

@@ -1,15 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
 
-import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from './modal-example.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
-  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+  imports: [FormsModule, IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   message = 'This modal example uses the modalController to present and dismiss modals.';

static/usage/v7/modal/controller/angular/app_module_ts.md

@@ -1,14 +1,25 @@
 ```ts
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { ModalController } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: 'modal-example.component.html',
+  imports: [FormsModule, IonButton, IonButtons, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
 })
 export class ModalExampleComponent {
-  name: string;
+  name!: string;
 
   constructor(private modalCtrl: ModalController) {}