How to get json specific data based on selected item?

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?

    <h1 style="font-size:large; text-align: center; color:darkblue; padding:10px 10px 10px 10px ">Search for your fav Game!!</h1>

<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-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 ">
                            <ion-buttons slot="end">
                                <ion-button (click)="setOpen(false)">Close</ion-button>
                    <ion-content class="ion-padding">

import { Component, OnInit } from ‘@angular/core’;
selector: ‘app-home’,
templateUrl: ‘’,
styleUrls: [‘’],
export class HomePage implements OnInit {
isModalOpen = false;
results: any;
constructor() {}
fetch(‘./assets/inputFile/input.json’).then(res => res.json()).then(json => {

setOpen(isOpen: boolean) {
this.isModalOpen = isOpen;

Angular’s tour of heros tutorial is a good place for you to start understanding what you need done.

1 Like