feat(angular): setting props on a signal works

packages/angular/common/src/directives/navigation/nav-params.ts

@@ -19,7 +19,11 @@
  * ```
  */
 export class NavParams {
-  constructor(public data: { [key: string]: any } = {}) {}
+  constructor(public data: { [key: string]: any } = {}) {
+    console.warn(
+      `[Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @Input decorator or the Signals-based input API.`
+    );
+  }
 
   /**
    * Get the value of a nav-parameter for the current view

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

@@ -20,12 +20,15 @@ import {
 
 import { NavParams } from '../directives/navigation/nav-params';
 
+import { ConfigToken } from './config';
+
 // TODO(FW-2827): types
 
 @Injectable()
 export class AngularDelegate {
   private zone = inject(NgZone);
   private applicationRef = inject(ApplicationRef);
+  private config = inject(ConfigToken);
 
   create(
     environmentInjector: EnvironmentInjector,
@@ -37,7 +40,8 @@ export class AngularDelegate {
       injector,
       this.applicationRef,
       this.zone,
-      elementReferenceKey
+      elementReferenceKey,
+      this.config.useSetInputAPI ?? false
     );
   }
 }
@@ -51,7 +55,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private injector: Injector,
     private applicationRef: ApplicationRef,
     private zone: NgZone,
-    private elementReferenceKey?: string
+    private elementReferenceKey?: string,
+    private enableSignalsSupport?: boolean
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
@@ -84,7 +89,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           component,
           componentProps,
           cssClasses,
-          this.elementReferenceKey
+          this.elementReferenceKey,
+          this.enableSignalsSupport
         );
         resolve(el);
       });
@@ -121,7 +127,8 @@ export const attachView = (
   component: any,
   params: any,
   cssClasses: string[] | undefined,
-  elementReferenceKey: string | undefined
+  elementReferenceKey: string | undefined,
+  enableSignalsSupport: boolean | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -164,7 +171,38 @@ export const attachView = (
       );
     }
 
-    Object.assign(instance, params);
+    /**
+     * Angular 14.1 added support for setInput
+     * so we need to fall back to Object.assign
+     * for Angular 14.0.
+     */
+    if (enableSignalsSupport === true && componentRef.setInput !== undefined) {
+      const { modal, popover, ...otherParams } = params;
+      /**
+       * Any key/value pairs set in componentProps
+       * must be set as inputs on the component instance.
+       */
+      for (const key in otherParams) {
+        componentRef.setInput(key, otherParams[key]);
+      }
+
+      /**
+       * Using setInput will cause an error when
+       * setting modal/popover on a component that
+       * does not define them as an input. For backwards
+       * compatibility purposes we fall back to using
+       * Object.assign for these properties.
+       */
+      if (modal !== undefined) {
+        Object.assign(instance, { modal });
+      }
+
+      if (popover !== undefined) {
+        Object.assign(instance, { popover });
+      }
+    } else {
+      Object.assign(instance, params);
+    }
   }
   if (cssClasses) {
     for (const cssClass of cssClasses) {

packages/angular/src/ionic-module.ts

@@ -52,14 +52,18 @@ const DECLARATIONS = [
   IonMaxValidator,
 ];
 
+type OptInAngularFeatures = {
+  useSetInputAPI?: boolean;
+};
+
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
-  providers: [AngularDelegate, ModalController, PopoverController],
+  providers: [ModalController, PopoverController],
   imports: [CommonModule],
 })
 export class IonicModule {
-  static forRoot(config?: IonicConfig): ModuleWithProviders<IonicModule> {
+  static forRoot(config: IonicConfig & OptInAngularFeatures = {}): ModuleWithProviders<IonicModule> {
     return {
       ngModule: IonicModule,
       providers: [
@@ -73,6 +77,7 @@ export class IonicModule {
           multi: true,
           deps: [ConfigToken, DOCUMENT, NgZone],
         },
+        AngularDelegate,
         provideComponentInputBinding(),
       ],
     };

packages/angular/standalone/src/providers/ionic-angular.ts

@@ -8,7 +8,11 @@ import type { IonicConfig } from '@ionic/core/components';
 import { ModalController } from './modal-controller';
 import { PopoverController } from './popover-controller';
 
-export const provideIonicAngular = (config?: IonicConfig): EnvironmentProviders => {
+type OptInAngularFeatures = {
+  useSetInputAPI?: boolean;
+};
+
+export const provideIonicAngular = (config: IonicConfig & OptInAngularFeatures = {}): EnvironmentProviders => {
   return makeEnvironmentProviders([
     {
       provide: ConfigToken,

packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
@@ -23,7 +23,7 @@ let rootParamsException = false;
 })
 export class NavRootComponent {
 
-  params: any;
+  @Input() params: any = {};
 
   ngOnInit() {
     if (this.params === undefined) {

packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
@@ -23,7 +23,7 @@ let rootParamsException = false;
 })
 export class NavRootComponent {
 
-  params: any;
+  @Input() params: any;
 
   ngOnInit() {
     if (this.params === undefined) {

packages/angular/test/base/src/app/lazy/alert/alert.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { AlertController } from '@ionic/angular';
-import { NavComponent } from '../nav/nav.component';
 
 @Component({
   selector: 'app-alert',

packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html

@@ -11,7 +11,7 @@
 <ion-content class="ion-padding">
   <h1>Value</h1>
   <h2>{{value}}</h2>
-  <h3>{{valueFromParams}}</h3>
+  <h3>{{prop}}</h3>
   <p>modal is defined: <span id="modalInstance">{{ !!modal }}</span></p>
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
+import { ModalController, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal-example',
@@ -9,12 +9,12 @@ import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDi
 export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
   @Input() value?: string;
+  @Input() prop?: string;
 
   form = new UntypedFormGroup({
     select: new UntypedFormControl([])
   });
 
-  valueFromParams: string;
   onInit = 0;
   willEnter = 0;
   didEnter = 0;
@@ -25,11 +25,8 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
 
   constructor(
     private modalCtrl: ModalController,
-    @Optional() public nav: IonNav,
-    navParams: NavParams
-  ) {
-    this.valueFromParams = navParams.get('prop');
-  }
+    @Optional() public nav: IonNav
+  ) {}
 
   ngOnInit() {
     NgZone.assertInAngularZone();

packages/angular/test/base/src/app/lazy/nav/nav.component.ts

@@ -1,6 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ModalExampleComponent } from '../modal-example/modal-example.component';
-import { NavParams } from '@ionic/angular';
 
 @Component({
   selector: 'app-nav',
@@ -10,11 +9,13 @@ export class NavComponent {
   rootPage = ModalExampleComponent;
   rootParams: any;
 
-  constructor(
-    params: NavParams
-  ) {
+  @Input() value?: string;
+  @Input() prop?: string;
+
+  ngOnInit() {
     this.rootParams = {
-      ...params.data
+      value: this.value,
+      prop: this.prop
     };
   }
 }