Angular Pass Input to Ionic Modal

Question

I have a component which takes in an Input parameter:

export class MapComponent implements OnInit {
   @Input() options: MapOptions<any>;
}

I page which opens this modal using the ionic ModalController:

async pickLocationModal() {
  const modal = await this.modalController.create({
    component: MapComponent
  });
  return await modal.present();
}

Additionally I have mapOptions stored in the page, which I would like to pass.

I can I pass my mapOptions to the Modal so the component will take it as an input?

Your question isn't clear at all. What's modalController? Is it your modal implementation? — developer033
– developer033, Commented Nov 6, 2019 at 1:15
Oops sorry I was using ionic I was under the impression it was built into angular it slipped my mind — johnny 5
– johnny 5, Commented Nov 6, 2019 at 1:22

Eliya Cohen · Accepted Answer · 2019-11-06 01:18:46Z

4

I'm assuming you're using Ionic since this is the same implementation of ionic's ModalController.

According to their docs, it's possible by passing to componentProps:

async pickLocationModal() {
  const modal = await this.modalController.create({
    component: MapComponent,
    componentProps: { // <----------
      options: ...
    }
  });
  return await modal.present();
}

answered Nov 6, 2019 at 1:18

Eliya Cohen

11.6k14 gold badges79 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

johnny 5 Over a year ago

Thanks, I didn't even realize it was ionics until you said so. I'll mark this answer as correct when the time limit elapses

Collectives™ on Stack Overflow

Angular Pass Input to Ionic Modal

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related