title: Communicate React<->Angular Iframe
body: <p>I know people will say don't do this or why use both.. but I have to. </p>
  
  <p>I need to pass data from React(child) to Angular (parent) to React(child) in an iframe.</p>
  
  <p>So far I can use <code>window.postMessage</code> from React to angular with <code>@HostListener</code>, the issue is that (and I think) is that the window attribute is getting refreshed every time I use <code>postMessage</code>. Within React, there are components that use <code>componentDidUpdate</code> and this causes an entire refresh within react component once I click/select within react.</p>
  
  <p>I can't do react to react because there are things that needs to be passed up to angular parent.</p>
  
  <p><a href="https://i.stack.imgur.com/sF7LN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sF7LN.png" alt="enter image description here"></a></p>
  
  <p>React side:</p>
  
  <pre><code>//some item is selected in react
  onSelect = selected =&gt; {
      window.parent.postMessage(
        {
          activeData:tselected
        },
        '*'
      )
    }
  </code></pre>
  
  <p>sends to angular in iframe</p>
  
  <pre><code>@HostListener('window:message', ['$event'])
      onMessage(e) {
        this.selection = e['data'];
    }
  </code></pre>
  
  <p>output looks great but then the entire window gets refreshed to original blank state once it is selected. </p>