Monaco editor is tuck till I open my dev tools

Question

I have a HTML file in which I have integrated monaco editor. But initially when I load the page the editor seems to be stuck . Only when I open my dev tools the editor starts working and if I dont open my dev tools it remains stuck. Here is the HTML code I am using:

                        <div class="condition-label">Condition</div>
                        <ngx-monaco-editor 
                        [ngClass]="{'error-border' : errorMessage.emptyExpression}"
                        [value]="userInput.textChange" 
                        [options]="options" 
                        [(ngModel)]="userInput.textChange" 
                        (onInit)="onInit()"
                        ></ngx-monaco-editor>
                        <ngx-loading [show]="monacoLoader"></ngx-loading>
                        <div *ngIf="errorMessage?.emptyExpression" class="error-on-empty-condition"><nile-icon name="info" size="14px" color="var(--nile-colors-red-700)"></nile-icon>This field cannot be left blank</div>
                       
                    </div>

Here is my TS options code :

public options = {
        theme : 'vs',
        language : 'javascript',
        fontSize: "14px",
        wordWrap: 'on',
        lineNumbers: "on",
        minimap: {
            enabled: false
        }
    }
    monacoLoader = false;

    onInit(){
        this.monacoLoader = false;
    }
    logger(){
        this.monacoLoader = false;
        this.cdr.detectChanges();
    }

I don't understand why this happens. Is there any solution for this?

Answer 1

I found the issue and fixed it. my editor was inside a mat-drawer. when the page was loaded initially the mat-drawer was being rendered in DOM. So due to this the mat-drawer was loaded when page loaded but the editor was not loaded. when the drawer was opened the editor was frozen as mat-drawer was already loaded without the editor. So I added a *ngIf condition for the mat-drawer which renders the drawer only when I open it manually. Once this was ensured the drawer is rendered with the editor properly.