javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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`
This commit is contained in:
Shane
2025-06-23 13:15:48 -07:00
committed by Brandy Smith
parent b154f4ed09
commit 30d1910d6e
18 changed files with 153 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/angular/common/src/index.ts
View File

@@ -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';

26
packages/angular/common/src/providers/angular-delegate.ts
View File

@@ -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,
});

1
packages/angular/src/index.ts
View File

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

1
packages/angular/standalone/src/index.ts
View File

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

4
packages/angular/test/apps/ng18/package.json
View File

@@ -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",

4
packages/angular/test/apps/ng19/package.json
View File

@@ -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",

4
packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/modal/modal.component.html Normal file
View File

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

20
packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/modal/modal.component.ts Normal file
View File

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

2
packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-modal.component.html Normal file
View File

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

18
packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-modal.component.ts Normal file
View File

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

18
packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-modal.service.ts Normal file
View File

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

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

@@ -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) },

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

@@ -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

3
packages/angular/test/base/src/app/standalone/programmatic-modal/modal/modal.component.html Normal file
View File

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

11
packages/angular/test/base/src/app/standalone/programmatic-modal/modal/modal.component.ts Normal file
View File

@@ -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 {
}

2
packages/angular/test/base/src/app/standalone/programmatic-modal/programmatic-modal.component.html Normal file
View File

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

18
packages/angular/test/base/src/app/standalone/programmatic-modal/programmatic-modal.component.ts Normal file
View File

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

18
packages/angular/test/base/src/app/standalone/programmatic-modal/programmatic-modal.service.ts Normal file
View File

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