Passing data to component using Modal Controller in ionic 4

Here we can see how to pass the data from angular page to component using ModalController in ionic 4


Invoking the modal popup:

  //invoking modal with data 
  async invokeAirportModal(title){

    const popover = await this.modalController.create({
      component: ModalComponent,
      componentProps: { value : title },
      showBackdrop: true
    });

    //open the modal popup
    await popover.present();
    
 //Receive data from component when dismiss the modal popup
    const event: any = await popover.onDidDismiss();
 
    console.log(JSON.stringify(event))
 
    const data: any = event.data;
    if(data != null)
    {  
    // Do your code 
    }
  }

Component:

We need to use @Input Decorator to receive the data from page

@Component({
  selector: 'ModalComponent',
  templateUrl: './ModalComponent.component.html',
  styleUrls: [ './ModalComponent.component.css' ]
})
export class ModalComponent  {
  @Input() value: any;
  ngOnInit() {
      console.log(" "+this.value);
  }
   
  // Passing data to page from modal component
  closeModal(data)
  {
  this.modalController.dismiss(returnData, data);
  }
}