feat(modal): add IonModalToken for injecting modal elements in Angular components (#30474)

Issue number: resolves #internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, we provide no injection access to angular modals, which makes
it difficult to connect to their events normally.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This is an attempt to allow easier programmatic access to the internals
of injected modals.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.6.2-dev.11749830167.1460aa73`

Author: ShaneK

packages/angular/common/src/index.ts

@@ -1,34 +1,34 @@
-export { MenuController } from './providers/menu-controller';
 export { DomController } from './providers/dom-controller';
+export { MenuController } from './providers/menu-controller';
 export { NavController } from './providers/nav-controller';
 
 export { Config, ConfigToken } from './providers/config';
 export { Platform } from './providers/platform';
 
-export { bindLifecycleEvents, AngularDelegate } from './providers/angular-delegate';
+export { AngularDelegate, bindLifecycleEvents, IonModalToken } from './providers/angular-delegate';
 
 export type { IonicWindow } from './types/interfaces';
-export type { ViewWillEnter, ViewWillLeave, ViewDidEnter, ViewDidLeave } from './types/ionic-lifecycle-hooks';
+export type { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from './types/ionic-lifecycle-hooks';
 
 export { NavParams } from './directives/navigation/nav-params';
 
-export { IonPopover } from './overlays/popover';
 export { IonModal } from './overlays/modal';
+export { IonPopover } from './overlays/popover';
 
 export { IonRouterOutlet, provideComponentInputBinding } from './directives/navigation/router-outlet';
 
+export * from './directives/control-value-accessors';
 export { IonBackButton } from './directives/navigation/back-button';
+export { IonNav } from './directives/navigation/nav';
 export {
   RouterLinkDelegateDirective,
   RouterLinkWithHrefDelegateDirective,
 } from './directives/navigation/router-link-delegate';
-export { IonNav } from './directives/navigation/nav';
 export { IonTabs } from './directives/navigation/tabs';
-export * from './directives/control-value-accessors';
 
 export { ProxyCmp } from './utils/proxy';
 
-export { IonicRouteStrategy } from './utils/routing';
 export { OverlayBaseController } from './utils/overlay';
+export { IonicRouteStrategy } from './utils/routing';
 
 export { raf } from './utils/util';

packages/angular/common/src/providers/angular-delegate.ts

@@ -1,13 +1,13 @@
 import {
   ApplicationRef,
-  NgZone,
-  Injectable,
-  Injector,
+  ComponentRef,
+  createComponent,
   EnvironmentInjector,
   inject,
-  createComponent,
+  Injectable,
   InjectionToken,
-  ComponentRef,
+  Injector,
+  NgZone,
 } from '@angular/core';
 import {
   FrameworkDelegate,
@@ -22,6 +22,9 @@ import { NavParams } from '../directives/navigation/nav-params';
 
 import { ConfigToken } from './config';
 
+// Token for injecting the modal element
+export const IonModalToken = new InjectionToken<HTMLIonModalElement>('IonModalToken');
+
 // TODO(FW-2827): types
 
 @Injectable()
@@ -142,8 +145,19 @@ export const attachView = (
    * The modern approach is to access the data directly
    * from the component's class instance.
    */
+  const providers = getProviders(params);
+
+  // If this is an ion-modal, provide the modal element as an injectable
+  // so components inside the modal can inject it directly
+  if (container.tagName.toLowerCase() === 'ion-modal') {
+    providers.push({
+      provide: IonModalToken,
+      useValue: container,
+    });
+  }
+
   const childInjector = Injector.create({
-    providers: getProviders(params),
+    providers,
     parent: injector,
   });
 

packages/angular/src/index.ts

@@ -26,6 +26,7 @@ export {
   AngularDelegate,
   NavParams,
   IonicRouteStrategy,
+  IonModalToken,
   ViewWillEnter,
   ViewWillLeave,
   ViewDidEnter,

packages/angular/standalone/src/index.ts

@@ -21,6 +21,7 @@ export {
   Config,
   Platform,
   NavParams,
+  IonModalToken,
   IonicRouteStrategy,
   ViewWillEnter,
   ViewDidEnter,

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/programmatic-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/programmatic-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/programmatic-modal/programmatic-modal.component.html

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

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

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

packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-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 ProgrammaticModalService {
+  #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: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
       { 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/programmatic-modal">
+      <ion-label>
+        Programmatic Modal Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/overlay-controllers">
       <ion-label>
         Overlay Controllers Test

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

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

packages/angular/test/base/src/app/standalone/programmatic-modal/modal/modal.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IonButton } from "@ionic/angular/standalone";
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  imports: [IonButton],
+  standalone: true,
+})
+export class ModalComponent  {
+}

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

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

packages/angular/test/base/src/app/standalone/programmatic-modal/programmatic-modal.component.ts

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

packages/angular/test/base/src/app/standalone/programmatic-modal/programmatic-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 ProgrammaticModalService {
+  #modalController = inject(ModalController);
+
+  async open() {
+    const modal = await this.#modalController.create({
+      component: ModalComponent,
+      focusTrap: true,
+    });
+    await modal.present();
+  }
+}