Angular + GoldenLayout iframe reloads every time panel is moved — how to prevent iframe from...

I am using Angular 21 with GoldenLayout (v2). Inside a GoldenLayout component, I load an external site inside an .

The problem: Whenever I move the panel, drag it, dock it somewhere else, or resize groups, the iframe reloads. This causes the external page to reset every time.

I have already tried the common solution of preserving the same iframe DOM node, but it still reloads.

Here is my code:

chart.html:
<div style="height: 100%; width: 100%;">
<iframe
[src]="iframeUrl | safeUrl"
style="width: 100%; height: 100%; border: 0;"
allowfullscreen
(load)="onIframeLoad()">
</iframe>
</div>


chart.ts:
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { SafeUrlPipe } from '../safe-url-pipe';

let cachedIframe: HTMLIFrameElement | null = null;

@Component({
selector: 'app-home',
templateUrl: './chart.html',
imports: [SafeUrlPipe]
})
export class Charts implements OnInit, OnDestroy {

iframeUrl = "https://golden-layout.com/";

constructor(private host: ElementRef<HTMLElement>) {}

ngOnInit() {
console.log("ANGULAR: Charts component initialized");

if (!cachedIframe) {
cachedIframe = document.createElement('iframe');
cachedIframe.src = this.iframeUrl;
cachedIframe.style.width = "100%";
cachedIframe.style.height = "100%";
cachedIframe.style.border = "none";

cachedIframe.onload = () => {
console.log("IFRAME LOADED:", new Date().toLocaleTimeString());
};
}

this.host.nativeElement.appendChild(cachedIframe);
}

ngOnDestroy() {
console.log("ANGULAR: component destroyed but iframe preserved");
}

onIframeLoad() {
console.log("ANGULAR: iframe load event fired");
}
}


What I expect:
GoldenLayout to move/drag the panel without destroying the Angular component or at least attach the existing DOM node without reloading the iframe.

What is actually happening:
Even though the iframe DOM element is cached and reused, GoldenLayout still triggers a reload every time the panel moves. It seems like GoldenLayout internally destroys child containers or re-parents nodes in a way that causes iframe reloads.

My question:
Is there a supported way in GoldenLayout to prevent iframe reload during panel movement? Does GoldenLayout always destroy content containers? Is there a lifecycle hook or container option to preserve DOM nodes?

Continue reading...