[SOLVED] NavParams has been deprecated in favor of using Angular’s input API

NavParams has been deprecated in favor of using Angular’s input API

I am getting this message in the console:

[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 searched everywhere and there is no working sample of using @Input decorator instead of NavParams to pass data to the modal component.

Edit: I want to pass data to the modal component using componentProps of ionic ModalController.

Solution

Here is what I am testing right now and it works with the below ionic and angular

@ionic/angular 8.2.6

@angular/cdk 18.1.4

Main page

async openGEmodal( ) {
 const modal: HTMLIonModalElement =
  await this.modalController.create({
  component: ModalgePage,
  cssClass: 'largeModal',
  componentProps: { GEtype: true } // I am using true, but you can use any thing you wish
}); 
modal.onDidDismiss().then((data) =>{
  if(data.data !== ''){ console.log(data) }
});
await modal.present();
}

Modal page

//old
import { Component } from '@angular/core';
import { NavParams } from '@ionic/angular';

GEtype: any;  
this.GEtype = this.navParams.get('GEtype');

// new
import { Component, Input} from '@angular/core';

  export class SomeClassPage {
    @Input() GEtype: any; // this becomes this.GEtype console.log will show true