I am encountering an issue with two angular apps, one acting as the parent and the other as the child within an iframe. The HTML structure is quite simple:
<div class="first">
<label>{{postedMessage}}</label>
</div>
<div id="second"gt;
<iframe src="http://localhost:4200/" id="displayFrame" title="Compass" width="70%"
float="right" height="750px"></iframe>
</div>
The parent app has a postMessage() event listener set up to receive messages from the child app located at localhost:4200. When the event is triggered, it successfully updates the value of postedMessage in the console but does not reflect this change on the UI. Surprisingly, manually updating the value through a button click works perfectly.
Below is a snippet of the TypeScript code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: '',
templateUrl: '',
styleUrls: ['']
})
export class TestComponent {
postedMessage: string = 'This is a test string';
constructor() {
window.addEventListener("message", this.handleEvent, false);
}
handleEvent(event: MessageEvent) {
console.log(JSON.stringify(event));
this.postedMessage = (JSON.stringify(event));
}
}
If anyone can provide insights into why the UI update is failing, I would greatly appreciate it! Thank you
In response to carl's question, I'm unable to share the exact code of the child app. However, a simplified version of it might include the following:
HTML:
<button (click)="postMessage()">Test</button>
TypeScript:
postMessage() {
// Data calculation for sending to parent
data: string; // JSON data string
window.parent.postMessage(data, this.parentOrigin);
{
This simplistic example showcases the communication flow between the parent and child apps. Let me know if more details are needed. Appreciate your help!
Thanks!