Automatically loaded (predefined) Layout with strange popout behaviour

[JonasC97]

Hi, I discovered a strange GoldenLayout behaviour regarding popouts.

When I set up the project and started it without changes, I can click together a layout with the controls and the popouts work as they should. Same goes for the predefined layouts that you can switch between in the controls.

But when I adapted the AppComponent, so that one of the predefined layouts are loaded automatically during the ngAfterViewInit() in app.component.ts, the popout does not pop out the component only, but the whole application like in the picture below:

Here is the code from the app.component.ts:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { LayoutConfig, ComponentItemConfig } from 'golden-layout';
import { ColorComponent } from './color.component';
import { ControlsComponent } from './controls.component';
import { GoldenLayoutHostComponent } from './golden-layout-host.component';
import { predefinedLayouts } from "./predefined-layouts"

@Component({
  selector: 'app-root',
  template: `
      <button (click)="test()">Test</button>
      <app-controls #controls></app-controls>
      <app-golden-layout-host #goldenLayoutHost></app-golden-layout-host>   
  `,
  styles: [
    `
      :host {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
      }
    `
  ]
})
export class AppComponent implements AfterViewInit {
  title = 'golden-layout-ng-app';

  private _controlsElement: HTMLElement;

  responsiveConfig: LayoutConfig = predefinedLayouts[2].config

  @ViewChild('controls') private _controlsComponent: ControlsComponent; 
  @ViewChild('goldenLayoutHost') private _goldenLayoutHostComponent: GoldenLayoutHostComponent; 

  ngAfterViewInit() {
    setTimeout(() => {
      this._controlsElement = this._controlsComponent.element;

      this._goldenLayoutHostComponent.initialise();
      this._controlsComponent.initialise(this._goldenLayoutHostComponent);
  
      if (this._goldenLayoutHostComponent.isGoldenLayoutSubWindow) {
        this._controlsElement.style.display = 'none';
      }

      this._goldenLayoutHostComponent.goldenLayout.loadLayout(this.responsiveConfig);

    }, 0);
  }

  test(){
    // this._goldenLayoutHostComponent.goldenLayout.loadLayout(this.responsiveConfig);
  }
}

Do you know, why this is happening and how I can avoid this and still load a layout in the initialization process?

Thanks in regard!
Jonas