How to change modal content

hello. i have this page explore that categorizes destinations by ion-cards, these cards are clickable and opens to a modal page destinations, now what I want to happen is by clicking this cards the modal page destinations changes content according to the category clicked.
can someone help me with this ?

here is the explore.component.ts

   async presentModal(name) {
    const modal = await this.modalController.create({
      component: DestinationsComponent,
      cssClass: 'my-custom-class',
      swipeToClose: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: { 
        tag: name,
     await modal.present();




export class DestinationsComponent implements OnInit {
 // @Input() tag:number;
  public tag = this.navParams.get('tag');
  constructor(public modalCtrl: ModalController, 
              private placesService: PlacesService,
              private navParams: NavParams
              ) { }

  ngOnInit() {
  placeList = []
      place => {
        this.placeList = place;


  <ion-col *ngFor ="let item of placeList">
      <ion-card button="true" color="#f5f6f9">
        <img src="{{item.imagePath}}">
          <ion-card-title><b><h1> {{item.description}}</h1></b> </ion-card-title>
        <ion-button  shape="round" size="small" style="font-size: 8pt;"><span style="padding-left: 10%; margin-right: 15%;">Book</span></ion-button>  


public getPlaces(name) : Observable<any>{

    if (name="beach") {

        return this.http.get('http://localhost:8000/api/getAllPlacesbyCategory/1',{

      headers: { 'Content-Type': 'application/json'}



    else if (name="inland") {

      return this.http.get('http://localhost:8000/api/getAllPlacesbyCategory/2',{

      headers: { 'Content-Type': 'application/json'}



So, what problem do you have? Do you need to know how to pass information to the modal so it can display different information based on what was clicked? Is that the problem you do not know how to solve?

Yes. I want my modal’s content to change based on what I clicked.

Can you describe for me what information you need to send to the modal so it can decide what content to show? Is it a single string? An object? Multiple values?


So for example, when I click “Beach Resort” the model opens and displays all the beaches in the array. It’s also like changing the array contents depending on what place I click.

OK. Well, you didn’t really answer my question, but I’ll assume you need to pass multiple pieces of data to the modal.

The easiest way to do this is described here:

Use componentProps: { … } in your modalController.create() call in explore.component.ts file and then use @Input variables in DestinationsComponent to get the values that were passed in componentsProps. YOu can then get the data to dsiplay in the modal.

Hope this helps.

Oh Im sorry, well yes I need to pass multiple data. I actually updated some of my codes above, and I already tried componentProps… , but the data in my modal doesn’t change, It always shows the data from “beach resorts” whatever cards i click.

Do the values you see in the @Input variables get the values you pass through from explore.component.ts?

I can’t really tell because I’m quite unsure of the value I assigned from explore.component.ts. I don’t know if its right to assign a parameter value to the componentProps variable.

Put a console.log in both places and see if the values are the same.