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`

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();
+  }
+}