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();
}
}
}
destinations.ts
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() {
this.getPlaces();
}
placeList = []
getPlaces(){
this.placesService.getPlaces(this.tag).subscribe(
place => {
this.placeList = place;
}
)
}
destinations.html
<ion-list>
<ion-grid>
<ion-row>
<ion-col *ngFor ="let item of placeList">
<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>
places.service.ts
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'}
})
}
}