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
  };
  }
 }