Angular CKEditor Cannot set data property with required values from database

[d0rf47]

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);
  }

[ma2ciek]

It looks like a duplicate of #215.

[takarka]

I have the same problem too(

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

*ngIf="productDescription && productDescription.length > 0" ckeditor receives data only when it is created, so I create ckeditor component only when the required value is received from the server