two different html access in angular 6

Question

I have two different html files like,

1) home1.html

2) home2.html

home1.html

 ImgSrc : string = "https://brandmark.io/logo-rank/random/pepsi.png"

 <div> <img [src]="ImgSrc" /> </div>

home2.html

 onMouseOver:void{ // change home1.html background image }

 <div (mouseover)="onMouseOver()"> </div>

In home2.html file, if i mouseover i want to change the home1.html background image as " https://image.freepik.com/free-icon/apple-logo_318-40184.jpg " this.

Please help me how can I do this in angular 2 or 4 or 5 or 6?

Answer 1

The answer would typically depend on how these 2 components are connected.

If they share a common parent, then you can go ahead and emit an event when mouseOver occurs on html1 and then you could listen to that event in your parent and act accordingly.

However if they do not share a common parent or they have a common parent but it is higher in the component hierarchy, you could then write a shared service which would then inform html2 that an event has occurred so act accordingly.

In order to provide code snippets, I would need to get how the components are connected and some basic code as to gain a little insight.