ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked while getting the value from ckEditor

Question

I am trying to get the changed value ie text from ckEditor and emit the resulted output to parent.

Below is the corresponding code:

editor.component.html :

 <ckeditor  tagName="textarea" [config]="config"  
            [data]="text" (change)="onValueChange($event)" formControlName="text"></ckeditor>

editor.component.ts

export class TextEditorWithLimitedWidgetsComponent implements OnInit, AfterViewChecked, OnChanges  {

constructor(
private fb: FormBuilder,
private fileValidations: FileValidations,
private cdref: ChangeDetectorRef
) { }



@Input() text: string;

@Output() textValue = new EventEmitter();

form: FormGroup;

ngOnInit() {

this.form = this.fb.group({
  text: ['', [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});

  this.form.setValue({
    text: this.text
  });
}


get f() {
return this.form.controls;
}

ngAfterViewChecked() {
  // this.textValue.emit(this.form.controls);
// this.cdref.detectChanges();
// 
//  not working...
}


onValueChange(e) {

    this.cdref.detectChanges();
 }


ngOnChanges(changes: SimpleChanges): void {
  this.textValue.emit(this.form.controls);
 }
}

parent.component.html

            <app-editor [descriptionLimit]="50"  [text]="inputData.title" (input)="(inputData.title = $event.target.value);" (textValue)="getTextValue($event)"></app-editor>

parent.compoent.ts

 getTextValue(event) {


   const dataWithHTMLTags = event.text.value.toString();
   this.inputData.title = this.fileValidations.stringsWithoutHTMLTags(dataWithHTMLTags);


    console.log(this.inputData.title); // error..
  }

I have tried ngAfterContentChecked as well but ending up with same error.

Answer 1

Output emit inner a lifecycle method cause your issue. Should textValue emit the controls object or only value of ckeditor control? You can simplify your form init by

this.form = this.fb.group({
  text: [this.text, [
    Validators.required,
    CustomValidator.textEditor(30)
  ]]
});
}

onValueChange(e) {
    this.cdref.detectChanges();
 }

isn't necessary, angular events trigger change detection itself

(input)="(inputData.title = $event.target.value);"

won't work, there is no @Output named input defined in your component.

check out this documentation for component interaction

if I guess right, you would do this ckeditor-change

onValueChange({ editor }: ChangeEvent): void {
   this.textValue.emit(editor.getData());
}