Ionic 8, Angular 18 - Using @Input to replace NavParams doesn't work

Question

I am in the process of migrating my Ionic 6/Angular 14 app to Ionic 8/Angular 18.

In my old code -

parent ts file opens a child component called ReceiptPage and passes this.expense as the component prop

 receiptimg(){
      this.modalCtrl.create({
        component: ReceiptPage,
        componentProps: this.expense
      }).then( modalres => {
          modalres.present();
          modalres.onDidDismiss().then(res =>{     
          })
       })     
    }

In the child component i.e. ReceiptPage .ts file has the following code:

export class ReceiptPage implements OnInit {
expense: any = {};
  expenseOnly: any = {};
  expenseimg = null;

  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams
    ) { 
        this.expense = this.navParams.data;
        this.expenseOnly = this.expense[0];
        this.expenseimg = this.expenseOnly.expense_receipt;
    }

  ngOnInit() {
  }

  close(){
   this.modalCtrl.dismiss(this.expense);
  }

}

I imported Input from '@angular/core' and then replaced expense: any = {}; with @Input() expense: any = {};

However, if now I try setting this.expenseOnly = this.expense[0]; the app fails to compile and run.

Answer 1

I managed to resolve it without @Input.

In my parent ts file

receiptimg(){
      this.modalCtrl.create({
        component: ReceiptPage,
        componentProps: { expense: this.expense }
      }).then( modalres => {
          modalres.present();
          modalres.onDidDismiss().then(res =>{
          })
       })     
    }

In my receipt ts file:

export class ReceiptPage implements OnInit {

  expense: any = {};
  expenseOnly: any = {};
  expenseimg = null;

  constructor(
    private modalCtrl: ModalController,
    ) {}

  async ngOnInit() {
  const expenseProp = this.expense;
    if (expenseProp) {
      this.expense = expenseProp;
      this.expenseOnly = this.expense[0];
      this.expenseimg = this.expenseOnly.expense_receipt;
    }
  }

  close(){
   this.modalCtrl.dismiss(this.expense);
  }

}