ngx-editor showing placeholder although it has a value

Question

I have a simple component using ngx-editor. The html file is below:

<ng-container>

  <ngx-editor
    class="ngxEditor-view"
    [editor]="editorSummary"
    [ngModel]="test"
    [disabled]="true"
    [placeholder]="'No description available...'"
  ></ngx-editor>
</ng-container>

The ts class:

import {Component, Input, OnInit, OnChanges, EventEmitter, Output, OnDestroy} from '@angular/core';
import {UntilDestroy} from '@ngneat/until-destroy';
import { Editor, Toolbar, Validators as EditorValidators } from 'ngx-editor';

@UntilDestroy({checkProperties: true})
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit, OnChanges, OnDestroy {

  editorSummary: Editor;
  test: string="123";
  constructor() {
  }

  ngOnInit() {
       this.editorSummary = new Editor();
  }

  ngOnChanges(): void {
  }

  closeMe(): void {
    this.isModalOpen = false;
    this.closeModal.emit();
  }

  ngOnDestroy(): void {
    this.editorSummary.destroy();
  }

}

the editor is imported as follows:

import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  
  imports: [

    NgxEditorModule

  ],

The text is never displayed, the message of the placeholder is shown instead. What can be the cause? I'm using it in several places in the application. There is only one page where it does not work.

Answer 1

What I see is that you want to use two way binding [(ngModel)] and not one way [ngModel]. Maybe this resouce could help you better understand the different Data Binding variants in Angular Databinding in Angular.