Prerequisites
Ionic Framework Version
v8.x
Current Behavior
The ion-modal component appears to be incompatible with Angular Input Signals. Specifically, when passing a value or object via componentProps, if the component loaded by the modal declares the input as an Input Signal, what is passed is not received as a signal, but as the actual passed value. This results in [value] is not a function errors when attempting to access the Input Signal in the modal (in this case, when attempting to use it in a computed signal). However, if you try to treat the declared Input Signal as a regular class property, the code won't compile because it's a signal and needs to be invoked.
This could be a repeat of this issue: #28876
However, one difference is that I came across this error when trying to use the Input Signal within a Computed Signal.
Expected Behavior
Passed componentProps should be received into a component with Input Signals as Input Signals and be able to be used in computed signals
Steps to Reproduce
- Create a component with an Input Signal and a Computed Signal that uses the Input Signal
- Create and Present an
ion-modal programmatically, passing a value in the componentProps for the input in the component
- Call up the modal in your app
Code Reproduction URL
https://stackblitz.com/github/sarahmmcb/ionic-modal-input-bug?file=src%2Fapp%2Fmodal%2Fmodal.component.ts
Ionic Info
Ionic:
Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.8.8
@angular-devkit/build-angular : 20.3.26
@angular-devkit/schematics : 20.3.26
@angular/cli : 20.3.26
@ionic/angular-toolkit : 12.3.0
Capacitor:
Capacitor CLI : 8.3.4
@capacitor/android : not installed
@capacitor/core : 8.3.4
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.3
System:
NodeJS : v24.10.0 (C:\Program Files\nodejs\node.exe)
npm : 11.6.1
OS : Windows 10
Additional Information
Repo link in case you have trouble with the StackBlitz: https://github.com/sarahmmcb/Ionic-Modal-Input-Bug
Apologies in advance if I'm just doing something stupid to cause this error.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
The
ion-modalcomponent appears to be incompatible with Angular Input Signals. Specifically, when passing a value or object viacomponentProps, if the component loaded by the modal declares the input as an Input Signal, what is passed is not received as a signal, but as the actual passed value. This results in[value] is not a functionerrors when attempting to access the Input Signal in the modal (in this case, when attempting to use it in a computed signal). However, if you try to treat the declared Input Signal as a regular class property, the code won't compile because it's a signal and needs to be invoked.This could be a repeat of this issue: #28876
However, one difference is that I came across this error when trying to use the Input Signal within a Computed Signal.
Expected Behavior
Passed
componentPropsshould be received into a component with Input Signals as Input Signals and be able to be used in computed signalsSteps to Reproduce
ion-modalprogrammatically, passing a value in thecomponentPropsfor the input in the componentCode Reproduction URL
https://stackblitz.com/github/sarahmmcb/ionic-modal-input-bug?file=src%2Fapp%2Fmodal%2Fmodal.component.ts
Ionic Info
Ionic:
Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.8.8
@angular-devkit/build-angular : 20.3.26
@angular-devkit/schematics : 20.3.26
@angular/cli : 20.3.26
@ionic/angular-toolkit : 12.3.0
Capacitor:
Capacitor CLI : 8.3.4
@capacitor/android : not installed
@capacitor/core : 8.3.4
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.3
System:
NodeJS : v24.10.0 (C:\Program Files\nodejs\node.exe)
npm : 11.6.1
OS : Windows 10
Additional Information
Repo link in case you have trouble with the StackBlitz: https://github.com/sarahmmcb/Ionic-Modal-Input-Bug
Apologies in advance if I'm just doing something stupid to cause this error.