Skip to content

Commit 30d1910

Browse files
ShaneKbrandyscarney
ShaneK
authored and
brandyscarney
committed
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`
1 parent b154f4e commit 30d1910

File tree

18 files changed

+153
-17
lines changed

18 files changed

+153
-17
lines changed

‎packages/angular/common/src/index.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
export { MenuController } from './providers/menu-controller';
21
export { DomController } from './providers/dom-controller';
2+
export { MenuController } from './providers/menu-controller';
33
export { NavController } from './providers/nav-controller';
44

55
export { Config, ConfigToken } from './providers/config';
66
export { Platform } from './providers/platform';
77

8-
export { bindLifecycleEvents, AngularDelegate } from './providers/angular-delegate';
8+
export { AngularDelegate, bindLifecycleEvents, IonModalToken } from './providers/angular-delegate';
99

1010
export type { IonicWindow } from './types/interfaces';
11-
export type { ViewWillEnter, ViewWillLeave, ViewDidEnter, ViewDidLeave } from './types/ionic-lifecycle-hooks';
11+
export type { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from './types/ionic-lifecycle-hooks';
1212

1313
export { NavParams } from './directives/navigation/nav-params';
1414

15-
export { IonPopover } from './overlays/popover';
1615
export { IonModal } from './overlays/modal';
16+
export { IonPopover } from './overlays/popover';
1717

1818
export { IonRouterOutlet, provideComponentInputBinding } from './directives/navigation/router-outlet';
1919

20+
export * from './directives/control-value-accessors';
2021
export { IonBackButton } from './directives/navigation/back-button';
22+
export { IonNav } from './directives/navigation/nav';
2123
export {
2224
RouterLinkDelegateDirective,
2325
RouterLinkWithHrefDelegateDirective,
2426
} from './directives/navigation/router-link-delegate';
25-
export { IonNav } from './directives/navigation/nav';
2627
export { IonTabs } from './directives/navigation/tabs';
27-
export * from './directives/control-value-accessors';
2828

2929
export { ProxyCmp } from './utils/proxy';
3030

31-
export { IonicRouteStrategy } from './utils/routing';
3231
export { OverlayBaseController } from './utils/overlay';
32+
export { IonicRouteStrategy } from './utils/routing';
3333

3434
export { raf } from './utils/util';

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {
22
ApplicationRef,
3-
NgZone,
4-
Injectable,
5-
Injector,
3+
ComponentRef,
4+
createComponent,
65
EnvironmentInjector,
76
inject,
8-
createComponent,
7+
Injectable,
98
InjectionToken,
10-
ComponentRef,
9+
Injector,
10+
NgZone,
1111
} from '@angular/core';
1212
import {
1313
FrameworkDelegate,
@@ -22,6 +22,9 @@ import { NavParams } from '../directives/navigation/nav-params';
2222

2323
import { ConfigToken } from './config';
2424

25+
// Token for injecting the modal element
26+
export const IonModalToken = new InjectionToken<HTMLIonModalElement>('IonModalToken');
27+
2528
// TODO(FW-2827): types
2629

2730
@Injectable()
@@ -142,8 +145,19 @@ export const attachView = (
142145
* The modern approach is to access the data directly
143146
* from the component's class instance.
144147
*/
148+
const providers = getProviders(params);
149+
150+
// If this is an ion-modal, provide the modal element as an injectable
151+
// so components inside the modal can inject it directly
152+
if (container.tagName.toLowerCase() === 'ion-modal') {
153+
providers.push({
154+
provide: IonModalToken,
155+
useValue: container,
156+
});
157+
}
158+
145159
const childInjector = Injector.create({
146-
providers: getProviders(params),
160+
providers,
147161
parent: injector,
148162
});
149163

‎packages/angular/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export {
2626
AngularDelegate,
2727
NavParams,
2828
IonicRouteStrategy,
29+
IonModalToken,
2930
ViewWillEnter,
3031
ViewWillLeave,
3132
ViewDidEnter,

‎packages/angular/standalone/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export {
2121
Config,
2222
Platform,
2323
NavParams,
24+
IonModalToken,
2425
IonicRouteStrategy,
2526
ViewWillEnter,
2627
ViewDidEnter,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
"@angular/platform-server": "^18.0.0",
3030
"@angular/router": "^18.0.0",
3131
"@angular/ssr": "^18.0.0",
32-
"@ionic/angular": "^8.0.0",
33-
"@ionic/angular-server": "^8.0.0",
32+
"@ionic/angular": "^8.6.0",
33+
"@ionic/angular-server": "^8.6.0",
3434
"core-js": "^3.33.2",
3535
"express": "^4.15.2",
3636
"ionicons": "^7.2.0",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
"@angular/platform-server": "^19.0.0",
3030
"@angular/router": "^19.0.0",
3131
"@angular/ssr": "^19.0.2",
32-
"@ionic/angular": "^8.4.0",
33-
"@ionic/angular-server": "^8.4.0",
32+
"@ionic/angular": "^8.6.0",
33+
"@ionic/angular-server": "^8.6.0",
3434
"core-js": "^3.33.2",
3535
"express": "^4.18.2",
3636
"ionicons": "^7.2.0",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<p>
2+
modal works!
3+
<ion-button (click)="close()">Close Modal</ion-button>
4+
</p>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component, Inject } from '@angular/core';
2+
import { IonButton, IonModalToken } from "@ionic/angular/standalone";
3+
4+
@Component({
5+
selector: 'app-modal',
6+
templateUrl: './modal.component.html',
7+
imports: [IonButton],
8+
standalone: true,
9+
})
10+
export class ModalComponent {
11+
constructor(@Inject(IonModalToken) private modalToken: HTMLIonModalElement) {
12+
this.modalToken.onDidDismiss().then(() => {
13+
console.log('Modal dismissed');
14+
});
15+
}
16+
17+
public close() {
18+
this.modalToken.dismiss();
19+
}
20+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<ion-button (click)="open()">Open Modal</ion-button>
2+

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from '@angular/core';
2+
import { IonButton } from '@ionic/angular/standalone';
3+
import { ProgrammaticModalService } from './programmatic-modal.service';
4+
5+
@Component({
6+
selector: 'app-test',
7+
templateUrl: './programmatic-modal.component.html',
8+
standalone: true,
9+
imports: [IonButton]
10+
})
11+
export class ProgrammaticModalComponent {
12+
constructor(private modalService: ProgrammaticModalService) {}
13+
14+
public open() {
15+
this.modalService.open();
16+
}
17+
}
18+

0 commit comments

Comments
 (0)