docs(modal): update angular to standalone

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

@@ -1,15 +1,28 @@
 ```ts
 import { Component } from '@angular/core';
-import { CheckboxCustomEvent } from '@ionic/angular';
+import {
+  CheckboxCustomEvent,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   canDismiss = false;
 
-  presentingElement = null;
+  presentingElement!: HTMLElement | null;
 
   ngOnInit() {
     this.presentingElement = document.querySelector('.ion-page');

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

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

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

@@ -1,14 +1,26 @@
 ```ts
 import { Component } from '@angular/core';
+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: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  presentingElement = undefined;
+  presentingElement!: HTMLElement | null;
 
   private canDismissOverride = false;
 
@@ -18,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/index.md

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

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

@@ -1,14 +1,24 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { ActionSheetController } from '@ionic/angular';
+import {
+  ActionSheetController,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @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/prevent-swipe-to-close/angular/example_component_ts.md

@@ -1,9 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   async canDismiss(data?: any, role?: string) {

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

@@ -1,13 +1,42 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 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/controller/angular/example_component_ts.md

@@ -1,12 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+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: [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/modal-example_component_ts.md

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

static/usage/v7/modal/controller/index.md

@@ -6,7 +6,6 @@ import react from './react.md';
 import vue_example from './vue/example_vue.md';
 import vue_modal from './vue/modal_vue.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
@@ -29,7 +28,6 @@ import angular_modal_example_component_html from './angular/modal-example_compon
         'src/app/example.component.ts': angular_example_component_ts,
         'src/app/modal-example.component.html': angular_modal_example_component_html,
         'src/app/modal-example.component.ts': angular_modal_example_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
   }}

static/usage/v7/modal/custom-dialogs/angular/example_component_ts.md

@@ -1,5 +1,17 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle } from 'ionicons/icons';
@@ -8,6 +20,7 @@ import { personCircle } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   constructor() {

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

@@ -1,17 +1,41 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonModal } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import { OverlayEventDetail } from '@ionic/core/components';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonInput,
+    IonItem,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
-  @ViewChild(IonModal) modal: IonModal;
+  @ViewChild(IonModal) modal!: IonModal;
 
   message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
-  name: string;
+  name!: string;
 
   cancel() {
     this.modal.dismiss(null, 'cancel');

static/usage/v7/modal/inline/is-open/angular/example_component_ts.md

@@ -1,9 +1,20 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
   isModalOpen = false;