feat(angular): use ComponentRef.setInput() API by default

Author: hakimio

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

@@ -20,8 +20,6 @@ import {
 
 import { NavParams } from '../directives/navigation/nav-params';
 
-import { ConfigToken } from './config';
-
 // Token for injecting the modal element
 export const IonModalToken = new InjectionToken<HTMLIonModalElement>('IonModalToken');
 
@@ -31,7 +29,6 @@ export const IonModalToken = new InjectionToken<HTMLIonModalElement>('IonModalTo
 export class AngularDelegate {
   private zone = inject(NgZone);
   private applicationRef = inject(ApplicationRef);
-  private config = inject(ConfigToken);
 
   create(
     environmentInjector: EnvironmentInjector,
@@ -43,8 +40,7 @@ export class AngularDelegate {
       injector,
       this.applicationRef,
       this.zone,
-      elementReferenceKey,
-      this.config.useSetInputAPI ?? false
+      elementReferenceKey
     );
   }
 }
@@ -58,8 +54,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private injector: Injector,
     private applicationRef: ApplicationRef,
     private zone: NgZone,
-    private elementReferenceKey?: string,
-    private enableSignalsSupport?: boolean
+    private elementReferenceKey?: string
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
@@ -92,8 +87,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           component,
           componentProps,
           cssClasses,
-          this.elementReferenceKey,
-          this.enableSignalsSupport
+          this.elementReferenceKey
         );
         resolve(el);
       });
@@ -130,8 +124,7 @@ export const attachView = (
   component: any,
   params: any,
   cssClasses: string[] | undefined,
-  elementReferenceKey: string | undefined,
-  enableSignalsSupport: boolean | undefined
+  elementReferenceKey: string | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -185,37 +178,28 @@ export const attachView = (
       );
     }
 
+    const { modal, popover, ...otherParams } = params;
     /**
-     * Angular 14.1 added support for setInput
-     * so we need to fall back to Object.assign
-     * for Angular 14.0.
+     * Any key/value pairs set in componentProps
+     * must be set as inputs on the component instance.
      */
-    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]);
-      }
+    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 });
-      }
+    /**
+     * 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 (popover !== undefined) {
+      Object.assign(instance, { popover });
     }
   }
   if (cssClasses) {

packages/angular/src/ionic-module.ts

@@ -52,18 +52,14 @@ const DECLARATIONS = [
   IonMaxValidator,
 ];
 
-type OptInAngularFeatures = {
-  useSetInputAPI?: boolean;
-};
-
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
   providers: [ModalController, PopoverController],
   imports: [CommonModule],
 })
 export class IonicModule {
-  static forRoot(config: IonicConfig & OptInAngularFeatures = {}): ModuleWithProviders<IonicModule> {
+  static forRoot(config: IonicConfig = {}): ModuleWithProviders<IonicModule> {
     return {
       ngModule: IonicModule,
       providers: [

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

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

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

@@ -1,4 +1,3 @@
-import { JsonPipe } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
@@ -19,7 +18,7 @@ let rootParamsException = false;
     {{ hasException ? 'ERROR' : 'OK' }}
   `,
   standalone: true,
-  imports: [IonicModule, JsonPipe]
+  imports: [IonicModule]
 })
 export class NavRootComponent implements OnInit {
 

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

@@ -1,4 +1,3 @@
-import { JsonPipe } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
@@ -19,7 +18,7 @@ let rootParamsException = false;
     {{ hasException ? 'ERROR' : 'OK' }}
   `,
   standalone: true,
-  imports: [IonicModule, JsonPipe]
+  imports: [IonicModule]
 })
 export class NavRootComponent implements OnInit {
 

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

@@ -1,5 +1,4 @@
-import { JsonPipe } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
@@ -19,11 +18,11 @@ let rootParamsException = false;
     {{ hasException ? 'ERROR' : 'OK' }}
   `,
   standalone: true,
-  imports: [IonicModule, JsonPipe]
+  imports: [IonicModule]
 })
 export class NavRootComponent implements OnInit {
 
-  params: any;
+  @Input() params: any;
 
   ngOnInit() {
     if (this.params === undefined) {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
@@ -14,14 +14,13 @@ let rootParamsException = false;
 
 @Component({
     selector: 'app-modal-content',
-    template: `
-    {{ hasException ? 'ERROR' : 'OK' }}
-  `,
+    template: `{{ hasException ? 'ERROR' : 'OK' }}`,
+    standalone: true,
     imports: [IonicModule]
 })
 export class NavRootComponent implements OnInit {
 
-  params: any;
+  @Input() params: any;
 
   ngOnInit() {
     if (this.params === undefined) {