Angular CKEditor Cannot set data property with required values

Question

I am building an angular application which utilizes CKEditor. I am trying to load data into the editor based on content pulled from the database so a user can edit it. This issue is when i try to set the data as the string pulled from the database, the editor is always blank. However, when i copy and paste the string (the EXACT SAME STRING) it works perfectly fine. I cannot seem to find the source of this issue. Any help is greatly appreciated.

You Can see in the image at the bottom how it SHOULD work, and it does work when setting the string directly even with the identical text, but when i try to use the data i get from my db, nothing. I have view that the string is correct when inspecting the console.

Thank you.

RELEVANT CODE //sets the value based on an input object property

ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,
      name : this.currentProduct.name,
      price : this.currentProduct.price,
      inStock : this.currentProduct.inStock,
      stockQty : this.currentProduct.stockQty
    });
    this.productDescription = this.currentProduct.desc.valueOf();    
    console.log(this.productForm.value, this.productDescription);
  }

html

<div class="form-control d-flex" style="flex-direction: column">
            <label for="productDescription" class="">Product Description</label>
            <div class="input-group">
              <ckeditor
                [editor]="Editor"
                [data]="productDescription"
                (change)="ckEditOnChange($event)"
                style="width: 100%"
              ></ckeditor>
            </div>
          </div>

example of when it kinda works

  ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,
      name : this.currentProduct.name,
      price : this.currentProduct.price,
      inStock : this.currentProduct.inStock,
      stockQty : this.currentProduct.stockQty
    });
    this.productDescription = "<p>this is my description</p>";    
    console.log(this.productForm.value, this.productDescription);
  }

Answer 1

I solved that obstacle by adding [formControlName] directive on ckeditor angular component. Then you van set/get values like from ordinary form element of ReactiveFormsModule.

Note: In that case data and change attributes are not needed any more

 <ckeditor [editor]="Editor" formControlName="FORM_CONTROL_NAME"></ckeditor>