ionic 4 - how to retrieve data passed to a modal

Question

According to the Ionic 4 docs, you can pass data via the componentProps property. In Ionic3 I can retrieve it with the navParams Service. How do I do it in Ionic 4?

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Answer 1

You need to use @Input() decorator.

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Component:

@Component({
  selector: 'ModalPage',
  templateUrl: './ModalPage.component.html',
  styleUrls: [ './ModalPage.component.css' ]
})
export class ModalPage  {
  name = 'Angular';
  @Input() value: any;
}