Load multiple ngx-editor in the same page

I'm trying to show multiple NgxEditor on the same page but only the last editor is loading correctly with textarea. The other editors doesn't load the textarea. If I make changes in the menu of the other editors, it reflects in the last editor.

I don't see any error in the console.

Here's an example code with 2 editors. I don't know how to separate between them so that it works independently.

<div class="NgxEditor__Wrapper">
    <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
    <ngx-editor [editor]="editor" [ngModel]="htmlOne" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>
<div class="NgxEditor__Wrapper">
    <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
    <ngx-editor [editor]="editor" [ngModel]="htmlTwo" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>

Here's the .TS file:

import { Editor } from 'ngx-editor';
export class myIpComponent implements OnInit {
  htmlOne = '';
  htmlTwo = '';
  public editor = new Editor()

Solution

We just need to have two separate instances of the Editor, each editor will have its own instance.

Doing this initializes both of them!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { Editor, NgxEditorModule } from 'ngx-editor';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxEditorModule, FormsModule],
  template: `
    <div class="NgxEditor__Wrapper">
        <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
        <ngx-editor [editor]="editor" [ngModel]="htmlOne" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
    </div>
    <div class="NgxEditor__Wrapper">
        <ngx-editor-menu [editor]="editor2"> </ngx-editor-menu>
        <ngx-editor [editor]="editor2" [ngModel]="htmlTwo" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
    </div>
  `,
})
export class App {
  htmlOne = '';
  htmlTwo = '';
  public editor = new Editor();
  public editor2 = new Editor();
}

bootstrapApplication(App);

Load multiple ngx-editor in the same page

Stackblitz Demo