ngstack / code-editor

Code editor component for Angular applications.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Code window is blank until window resizes

NewToStuff opened this issue · comments

Hi,

I am experiencing an issue similar to this:
#510

Basically the code window appears blank until the page resizes I believe by running the window:resize event.

  @HostListener('window:resize')
  onResize() {
    if (this._editor) {
      this._editor.layout();
    }
  }

The Angular Material Sidenav (https://material.angular.io/components/sidenav/overview) is closed when the editor component is created. The sideNav opens at some time later.

I think the onResize() function basically needs to be called when the sideNav opens If I remember correctly the width will start as 0 when created within a SideNav (or in the Mat-Tab example the other poster had)

Is there something to do to make this compatible and/or call onResize().

EDIT: After further investigation the issue seems to be triggered by putting the code to call the editor inside an which wraps the entire application and cannot be removed.

<amplify-authenticator>
       <ngs-code-editor
        [theme]="theme"
        [codeModel]="codeModel"
        [options]="options"
        (valueChanged)="onCodeChanged($event)"
      >
      </ngs-code-editor>
</amplify-authenticator>

Thanks