Hi, I’m new in ionic-angular framework , so i have a home page , inside it is a modal . The home page contains the list of items fetch from json file , when i click on a specific item i need to have all the info of this item inside the modal but i don’t know how to pass these data. any help?
home.page.html
<ion-text>
<h1 style="font-size:large; text-align: center; color:darkblue; padding:10px 10px 10px 10px ">Search for your fav Game!!</h1>
</ion-text>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; justify-content: center; ">
<div style="justify-content: center;text-align: center; " *ngFor="let item of results ">
<ion-card style="padding-bottom:10px;justify-content: center;">
<ion-img src=" {{item.Thumbnail_Large}} " style="margin:20px;">
</ion-img>
<ion-text style="font-size:x-small; color:darkblue; font-weight: bold; ">{{item.Title}}</ion-text><br>
<ion-text style="color: orange;font-size:large;margin-bottom: 20%; ">{{item.Rating}}</ion-text>
<ion-modal [isOpen]="isModalOpen" *ngFor="let item of results ">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button (click)="setOpen(false)">Close</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
</ion-content>
</ng-template>
</ion-modal>
</ion-card>
</div>
</div>
home.page.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
isModalOpen = false;
results: any;
constructor() {}
ngOnInit(){
fetch(‘./assets/inputFile/input.json’).then(res => res.json()).then(json => {
console.log(‘results::’,json);
this.results=json;
});
}
setOpen(isOpen: boolean) {
this.isModalOpen = isOpen;
}
}