Open aamado91 opened 1 month ago
Same here
Ionic:
Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 8.2.7 @angular-devkit/build-angular : 18.2.1 @angular-devkit/schematics : 18.2.1 @angular/cli : 18.2.1 @ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.1.2 @capacitor/android : 6.1.2 @capacitor/android : 6.1.2 @capacitor/core : 6.1.2 @capacitor/ios : 6.1.2
Utility:
cordova-res : not installed globally native-run : 2.0.1
System:
NodeJS : v22.3.0 (C:\Program Files\nodejs\node.exe) npm : 10.2.3 OS : Windows 10
ionic-selectable version is: "5.0.3"
Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:
import {ModalController} from "@ionic/angular/standalone";
Instead of:
import { IonItem, ModalController, Platform } from '@ionic/angular';
With this fix, the component works correctly.
Although there is a warning in the browser console:
ionic-selectable-modal.component.ts:13 [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.
I'm trying to figure out how to solve it, i'll add a comment when I find out
Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:
import {ModalController} from "@ionic/angular/standalone";
Instead of:
import { IonItem, ModalController, Platform } from '@ionic/angular';
With this fix, the component works correctly.
Although there is a warning in the browser console:
ionic-selectable-modal.component.ts:13 [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.
I'm trying to figure out how to solve it, i'll add a comment when I find out
Regarding the warning mentioned earlier, it also has an easy fix:
All necessary changes must be made in the ionic-selectable-modal.component.ts
component.
selectComponent
with @Input()
Before:
selectComponent: IonicSelectableComponent;
After:
@Input() selectComponent: IonicSelectableComponent;
navParams
from the constructor and move the code to OnInit
This ensures that the selectComponent
parameter gets its value in time.
Before:
constructor(
private navParams: NavParams,
public _element: ElementRef,
) {
this.selectComponent = this.navParams.get('selectComponent');
this.selectComponent._modalComponent = this;
this.selectComponent._selectedItems = [];
if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
if (this.selectComponent.isMultiple) {
this.selectComponent.value.forEach((item: any) => {
this.selectComponent._selectedItems.push(item);
});
} else {
this.selectComponent._selectedItems.push(this.selectComponent.value);
}
}
this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
}
After:
constructor(public _element: ElementRef) {
}
ngOnInit(): void {
this.selectComponent._modalComponent = this;
this.selectComponent._selectedItems = [];
if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
if (this.selectComponent.isMultiple) {
this.selectComponent.value.forEach((item: any) => {
this.selectComponent._selectedItems.push(item);
});
} else {
this.selectComponent._selectedItems.push(this.selectComponent.value);
}
}
this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
}
Let me know if this fix sounds good to you
I am implementing an application with Ionic 7.1.1 and angular 17.3.8 and this error is occurring when implementing the ionic-selectable component. Install version 5.0.0