Ionic 4 modal call on same page

[amjayesh07]

I added modal as described above, Right now i added the whole page, where modal is called.
But i want to show only particular part of html of same page where modal caled in modal,
How can i do that.

Below is my code

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';



@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})

export class SearchPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  async openModal() {
    const modal = await this.modalController.create({
      component: SearchPage,
      componentProps: { 
        foo: 'hello',
        bar: 'world'
      }
    });
    return await modal.present();
  }
}

For more info see image, on click of product listing, i want to call modal where i can show product details info.