search

atularen / ngx-monaco-editor

Monaco Editor component for Angular 2 and Above
https://www.npmjs.com/package/ngx-monaco-editor
MIT License
428 stars 156 forks source link

Multiple instances #72

Open danielehrhardt opened 6 years ago

danielehrhardt commented 6 years ago

Could you add a option to support multiple instances

jesusvallez commented 5 years ago

@atul-wizni

nileshsoni1994 commented 4 years ago

@atul-wizni, Is it possible to add multiple instance of "ngx-monaco-editor@9.0.0" in multiple tabs of same page?

image

event I saw the code of Monaco editor home page play ground, https://microsoft.github.io/monaco-editor/playground.html they are also configuring only 1 instance to support JS, CSS & HTML.

please let us know if there any way or we configure only one instance.

image

mvanderlee commented 3 years ago

Multiple instances work fine!

When using it inside tabs it must be lazy loaded. Using Angular Material that means using an ng-template

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      <ngx-monaco-editor
        [(ngModel)]="editorData1"
        [options]="editorOptions"
      ></ngx-monaco-editor>
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      <ngx-monaco-editor
        [(ngModel)]="editorData3"
        [options]="editorOptions"
      ></ngx-monaco-editor>
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      <ngx-monaco-editor
        [(ngModel)]="editorData2"
        [options]="editorOptions"
      ></ngx-monaco-editor>
    </ng-template>
  </mat-tab>
</mat-tab-group>

https://material.angular.io/components/tabs/overview#lazy-loading