One modal, but different background images that change on tap

Ionic Framework ionic-v3
1

I have 2 pages, one home page the other one is modal. Modal has its own background, but how can I change modals background by clicking something on the homepage?

modal.html

<ion-content>
something here
    </ion-content>

modal.scss

.scroll-content {
    background-image: url("image.jpg") !important; 
}

home.html

<div class="circle" (tap)="openModal1($event)">
    </div>

home.ts

tapMiddle(e) {
    this.openModal1();
}

So basicly, when someone clicks on a div, it is supposed to open the modal and change the background. How can this be done?

2

Can you achieve your goal by passing the image filename in via NavParams when the modal is created, storing it in a property of the modal component, and then binding to [style.background] in the modal template?

3

Yes, I managed to do it with NavParams for sending data from first to other page.