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

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { Router } from '@angular/router';
import { DestinationsComponent } from './destinations/destinations.component';
import { IonRouterOutlet } from '@ionic/angular';


@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss'],
})
export class ExploreComponent implements OnInit {

  constructor(private router: Router,
              private modalController: ModalController,
            
              private routerOutlet: IonRouterOutlet
              ) { }

  ngOnInit() {}


  

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


}

explore.component.html

 <div class="categoryName">
    <ion-row >
      <ion-col >
        <ion-card button="true" (click)="presentModal()">
              <img src="\assets\images\beachresort.jpg"> 
          <ion-card-header>
            <ion-card-title>Beach Resorts</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
      <ion-col> 
        <ion-card button="true" (click)="presentModal()">
            <img src="\assets\images\botanical.jpg"> 
        <ion-card-header>
          <ion-card-title>Botanical Gardens</ion-card-title>
        </ion-card-header>
     </ion-card> 
     </ion-col>
    </ion-row>
    <ion-row> 
    <ion-col>  
      <ion-card button="true" (click)="presentModal()">
          <img src="\assets\images\caves.jpg"> 
      <ion-card-header>
        <ion-card-title>Caves</ion-card-title>
      </ion-card-header>
           
      </ion-card>
    </ion-col>
    <ion-col> 
      <ion-card button="true" (click)="presentModal()" >
          <img src="\assets\images\inland-resort.jpg">
      <ion-card-header>
        <ion-card-title>Inland Resorts</ion-card-title>
      </ion-card-header>
   </ion-card> 

   </ion-col> 
</ion-row>
  </div>
</ion-content>

destinations.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { PlacesService } from 'src/app/services/places/places.service';


@Component({
  selector: 'app-destinations',
  templateUrl: './destinations.component.html',
  styleUrls: ['./destinations.component.scss'],
})
export class DestinationsComponent implements OnInit {

  constructor(public modalCtrl: ModalController, 
              private placesService: PlacesService) { }

  ngOnInit() {
    this.getAllBeaches();
  }
  closeModal(){
    this.modalCtrl.dismiss();
  }
  beachList = []
   
  getAllBeaches(){
    this.placesService.getAllBeaches().subscribe( 
      beaches => {
        this.beachList = beaches;
      }
    )
  }
}

destinations.html

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

places.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlacesService {


  constructor(private http : HttpClient) { }



//retrieves all beaches from database
  public getAllBeaches() : Observable<any>{
    return this.http.get('http://localhost:8000/api/getAllPlacesbyCategory/1',{
      headers: { 'Content-Type': 'application/json'}
    })
  }

//retrieves all inland resorts from database
  public getAllInland() : Observable<any>{
    return this.http.get('http://localhost:8000/api/getAllPlacesbyCategory/2',{
      headers: { 'Content-Type': 'application/json'}
    })
  }



}

1 post - 1 participant

Read full topic