feat(angular): add custom injector support for modal and popover controllers

Author: ShaneK

packages/angular/common/src/index.ts

@@ -9,6 +9,7 @@ export { AngularDelegate, bindLifecycleEvents, IonModalToken } from './providers
 
 export type { IonicWindow } from './types/interfaces';
 export type { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from './types/ionic-lifecycle-hooks';
+export type { AngularModalOptions, AngularPopoverOptions } from './types/overlay-options';
 
 export { NavParams } from './directives/navigation/nav-params';
 

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

@@ -36,15 +36,17 @@ export class AngularDelegate {
   create(
     environmentInjector: EnvironmentInjector,
     injector: Injector,
-    elementReferenceKey?: string
+    elementReferenceKey?: string,
+    customInjector?: Injector
   ): AngularFrameworkDelegate {
     return new AngularFrameworkDelegate(
       environmentInjector,
       injector,
       this.applicationRef,
       this.zone,
       elementReferenceKey,
-      this.config.useSetInputAPI ?? false
+      this.config.useSetInputAPI ?? false,
+      customInjector
     );
   }
 }
@@ -59,7 +61,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private applicationRef: ApplicationRef,
     private zone: NgZone,
     private elementReferenceKey?: string,
-    private enableSignalsSupport?: boolean
+    private enableSignalsSupport?: boolean,
+    private customInjector?: Injector
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
@@ -93,7 +96,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           componentProps,
           cssClasses,
           this.elementReferenceKey,
-          this.enableSignalsSupport
+          this.enableSignalsSupport,
+          this.customInjector
         );
         resolve(el);
       });
@@ -131,7 +135,8 @@ export const attachView = (
   params: any,
   cssClasses: string[] | undefined,
   elementReferenceKey: string | undefined,
-  enableSignalsSupport: boolean | undefined
+  enableSignalsSupport: boolean | undefined,
+  customInjector?: Injector
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -158,7 +163,7 @@ export const attachView = (
 
   const childInjector = Injector.create({
     providers,
-    parent: injector,
+    parent: customInjector ?? injector,
   });
 
   const componentRef = createComponent<any>(component, {

packages/angular/common/src/types/overlay-options.ts

@@ -0,0 +1,10 @@
+import type { Injector } from '@angular/core';
+import type { ModalOptions, PopoverOptions } from '@ionic/core/components';
+
+export interface AngularModalOptions extends ModalOptions {
+  injector?: Injector;
+}
+
+export interface AngularPopoverOptions extends PopoverOptions {
+  injector?: Injector;
+}

packages/angular/src/index.ts

@@ -32,6 +32,7 @@ export {
   ViewDidEnter,
   ViewDidLeave,
 } from '@ionic/angular/common';
+export type { AngularModalOptions, AngularPopoverOptions } from '@ionic/angular/common';
 export { AlertController } from './providers/alert-controller';
 export { AnimationController } from './providers/animation-controller';
 export { ActionSheetController } from './providers/action-sheet-controller';

packages/angular/src/providers/modal-controller.ts

@@ -1,10 +1,10 @@
 import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { ModalOptions } from '@ionic/core';
+import type { AngularModalOptions } from '@ionic/angular/common';
 import { modalController } from '@ionic/core';
 
 @Injectable()
-export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
+export class ModalController extends OverlayBaseController<AngularModalOptions, HTMLIonModalElement> {
   private angularDelegate = inject(AngularDelegate);
   private injector = inject(Injector);
   private environmentInjector = inject(EnvironmentInjector);
@@ -13,10 +13,11 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     super(modalController);
   }
 
-  create(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  create(opts: AngularModalOptions): Promise<HTMLIonModalElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal', customInjector),
     });
   }
 }

packages/angular/src/providers/popover-controller.ts

@@ -1,9 +1,9 @@
 import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { PopoverOptions } from '@ionic/core';
+import type { AngularPopoverOptions } from '@ionic/angular/common';
 import { popoverController } from '@ionic/core';
 
-export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
+export class PopoverController extends OverlayBaseController<AngularPopoverOptions, HTMLIonPopoverElement> {
   private angularDelegate = inject(AngularDelegate);
   private injector = inject(Injector);
   private environmentInjector = inject(EnvironmentInjector);
@@ -12,10 +12,11 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     super(popoverController);
   }
 
-  create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
+  create(opts: AngularPopoverOptions): Promise<HTMLIonPopoverElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover', customInjector),
     });
   }
 }

packages/angular/standalone/src/index.ts

@@ -28,6 +28,7 @@ export {
   ViewWillLeave,
   ViewDidLeave,
 } from '@ionic/angular/common';
+export type { AngularModalOptions, AngularPopoverOptions } from '@ionic/angular/common';
 export { IonNav } from './navigation/nav';
 export {
   IonCheckbox,

packages/angular/standalone/src/providers/modal-controller.ts

@@ -1,11 +1,11 @@
 import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { ModalOptions } from '@ionic/core/components';
+import type { AngularModalOptions } from '@ionic/angular/common';
 import { modalController } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
 @Injectable()
-export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
+export class ModalController extends OverlayBaseController<AngularModalOptions, HTMLIonModalElement> {
   private angularDelegate = inject(AngularDelegate);
   private injector = inject(Injector);
   private environmentInjector = inject(EnvironmentInjector);
@@ -15,10 +15,11 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     defineCustomElement();
   }
 
-  create(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  create(opts: AngularModalOptions): Promise<HTMLIonModalElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal', customInjector),
     });
   }
 }

packages/angular/standalone/src/providers/popover-controller.ts

@@ -1,10 +1,10 @@
 import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { PopoverOptions } from '@ionic/core/components';
+import type { AngularPopoverOptions } from '@ionic/angular/common';
 import { popoverController } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
 
-export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
+export class PopoverController extends OverlayBaseController<AngularPopoverOptions, HTMLIonPopoverElement> {
   private angularDelegate = inject(AngularDelegate);
   private injector = inject(Injector);
   private environmentInjector = inject(EnvironmentInjector);
@@ -14,10 +14,11 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     defineCustomElement();
   }
 
-  create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
+  create(opts: AngularPopoverOptions): Promise<HTMLIonPopoverElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover', customInjector),
     });
   }
 }

packages/angular/test/base/e2e/src/standalone/modal-custom-injector.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Modal: Custom Injector', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/modal-custom-injector');
+  });
+
+  test('should inject custom service via custom injector', async ({ page }) => {
+    await page.locator('ion-button#open-modal-with-custom-injector').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    const serviceValue = page.locator('#service-value');
+    await expect(serviceValue).toHaveText('Service Value: custom-injector-value');
+
+    await page.locator('#close-modal').click();
+    await expect(page.locator('ion-modal')).not.toBeVisible();
+  });
+
+  test('should fail without custom injector when service is not globally provided', async ({ page }) => {
+    await page.locator('ion-button#open-modal-without-custom-injector').click();
+
+    await page.waitForTimeout(1000);
+
+    const errorMessage = page.locator('#error-message');
+    await expect(errorMessage).toBeVisible();
+    await expect(errorMessage).toHaveText('Error: TestService not available');
+  });
+});