I have an attribute called counter that I want to be increased by 1 everytime I click on a button in my iframe.
Here is my code : https://stackblitz.com/edit/angular-fznrnf?file=src/app/app.component.ts
app.component.ts :
export class AppComponent implements AfterViewInit {
counter = 0;
@HostListener('window:message', ['$event']) onPostMessage() {
console.log('Message received');
}
ngAfterViewInit(): void {
let iframe = document.getElementById('iframe') as HTMLIFrameElement;
iframe?.addEventListener('load', () => {
let iframeWindow = iframe.contentWindow;
if (iframeWindow) {
const doc = iframeWindow?.document;
doc.getElementById('iframeButton')?.addEventListener('click', () => {
this.counter++;
window?.postMessage('update ?', '*');
});
}
});
}
}
app.component.html :
<iframe
id="iframe"
srcdoc="<button id='iframeButton'>Increase my counter !</button>"
></iframe>
<p>Counter = {{ counter }}</p>
Now, I want to understand why I need the window?.postMessage('update ?', '*'); and the @HostListener to have my counter to increase, and specifically, what really happens behind the scene.
postMessage is a Web API, that allows communication between windows. So if you have a web page and an iframe using postMessage you can facilitate a communication between those two windows.
I played a bit with your project. When you comment out the window?.postMessage('update ?', '*'); and clicking the button, the counter property on AppComponent is getting incremented, but the Angular is not responding to the change.
My guess is that increment is running outside of Angular's change detection system. On the other hand when when you also do a postMessage the change detection is triggered correctly, because @HostListener('window:message', ['$event']) will take care of that.
If you update your component as follows, it will display increment of your counter property in AppComponent.
export class AppComponent implements AfterViewInit {
counter = 0;
constructor(public cd: ChangeDetectorRef) {}
@HostListener('window:message', ['$event']) onPostMessage() {
console.log('Message received');
}
ngAfterViewInit(): void {
let iframe = document.getElementById('iframe') as HTMLIFrameElement;
iframe?.addEventListener('load', () => {
let iframeWindow = iframe.contentWindow;
if (iframeWindow) {
const doc = iframeWindow?.document;
doc.getElementById('iframeButton')?.addEventListener('click', () => {
this.counter++;
this.cd.detectChanges();
// window?.postMessage('update ?', '*');
});
}
});
}
}
Calling this.cd.detectChanges(); will ask Angular explicitly to run change detection thus will display the counter update.
Extended answer:
Will try to explain in more details, what I think is going on under the hood.
Your application have two "contexts". Main window, in which the Angular app is running and then iframe window, which is just plain HTML.
Per article about change detection you've mentioned in the comment, in the main window Angular is patching browser API, such as addEventListener, setTimeout, etc. to be able to detect changes, that should be rendered in the view.
But the iframe window does not have it's API patched.
So if you click button within the iframe to increment counter, the view is not updated (although AppComponent property is). Click handler in your iframe is not patched to trigger Angular change detection and to update the view.
To let Angular know, that something in the view was updated from "the outside" we need to call change detection explicitly by this.cd.detectChanges();.
But if you do a postMessage from iframe window, a message handler onPostMessage() in main window is triggered. Message handler in the main window is patched by Angular, so when the message event is received the change detection is kicked off, counter increment is detected and the view is updated.