test(modal): adding programatic modal angular standalone tests for creating and accessing modals through angular

Author: ShaneK

packages/angular/test/apps/ng18/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-server": "^18.0.0",
     "@angular/router": "^18.0.0",
     "@angular/ssr": "^18.0.0",
-    "@ionic/angular": "^8.0.0",
-    "@ionic/angular-server": "^8.0.0",
+    "@ionic/angular": "^8.6.0",
+    "@ionic/angular-server": "^8.6.0",
     "core-js": "^3.33.2",
     "express": "^4.15.2",
     "ionicons": "^7.2.0",

packages/angular/test/apps/ng19/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-server": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@angular/ssr": "^19.0.2",
-    "@ionic/angular": "^8.4.0",
-    "@ionic/angular-server": "^8.4.0",
+    "@ionic/angular": "^8.6.0",
+    "@ionic/angular-server": "^8.6.0",
     "core-js": "^3.33.2",
     "express": "^4.18.2",
     "ionicons": "^7.2.0",

packages/angular/test/apps/ng19/src/app/standalone/programatic-modal/modal/modal.component.html

@@ -0,0 +1,4 @@
+<p>
+  modal works!
+  <ion-button (click)="close()">Close Modal</ion-button>
+</p>

packages/angular/test/apps/ng19/src/app/standalone/programatic-modal/modal/modal.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+import { IonButton, IonModalToken } from "@ionic/angular/standalone";
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  imports: [IonButton],
+  standalone: true,
+})
+export class ModalComponent  {
+  constructor(@Inject(IonModalToken) private modalToken: HTMLIonModalElement) {
+    this.modalToken.onDidDismiss().then(() => {
+      console.log('Modal dismissed');
+    });
+  }
+
+  public close() {
+    this.modalToken.dismiss();
+  }
+}

packages/angular/test/apps/ng19/src/app/standalone/programatic-modal/programatic-modal.component.html

@@ -0,0 +1,2 @@
+<ion-button (click)="open()">Open Modal</ion-button>
+

packages/angular/test/apps/ng19/src/app/standalone/programatic-modal/programatic-modal.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
+import { ProgramaticModalService } from './programatic-modal.service';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './programatic-modal.component.html',
+  standalone: true,
+  imports: [IonButton]
+})
+export class ProgramaticModalComponent {
+  constructor(private modalService: ProgramaticModalService) {}
+
+  public open() {
+    this.modalService.open();
+  }
+}
+

packages/angular/test/apps/ng19/src/app/standalone/programatic-modal/programatic-modal.service.ts

@@ -0,0 +1,18 @@
+import { inject, Injectable } from '@angular/core';
+import { ModalController } from "@ionic/angular/standalone";
+import { ModalComponent } from "./modal/modal.component";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgramaticModalService {
+  #modalController = inject(ModalController);
+
+  async open() {
+    const modal = await this.#modalController.create({
+      component: ModalComponent,
+      focusTrap: true,
+    });
+    await modal.present();
+  }
+}

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -11,6 +11,7 @@ export const routes: Routes = [
       { path: 'action-sheet-controller', loadComponent: () => import('../action-sheet-controller/action-sheet-controller.component').then(c => c.ActionSheetControllerComponent) },
       { path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
       { path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
+      { path: 'programatic-modal', loadComponent: () => import('../programatic-modal/programatic-modal.component').then(c => c.ProgramaticModalComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
       { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(c => c.RouterLinkComponent) },

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -85,6 +85,11 @@
         Modal Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/programatic-modal">
+      <ion-label>
+        Programatic Modal Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/overlay-controllers">
       <ion-label>
         Overlay Controllers Test

packages/angular/test/base/src/app/standalone/programatic-modal/modal/modal.component.html

@@ -0,0 +1,3 @@
+<p>
+  modal works!
+</p>