CKEditor is empty if ngModel is populated before `instanceready`

Using <ckeditor> the way the example shows seems to exhibit a problem:

import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#99000'}"
    (change)="onChange($event)"
    (ready)="onReady($event)"
    (focus)="onFocus($event)"
    (blur)="onBlur($event)"
    debounce="500">
  </ckeditor>
  `
})
export class Sample{
  constructor(){
    this.ckeditorContent = `<p>My HTML</p>`;
  }
}

If my ngModel value is set before the CKEditor’s instanceready event has fired, my CKEditor element will be blank.

I noticed this on my page when my Web Service call returns data before my CKEditor’s instanceready event has fired. I worked around it by calling my Web Service only after the instanceready event, like this:

import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#99000'}"
    (change)="onChange($event)"
    (ready)="onReady($event)"
    (focus)="onFocus($event)"
    (blur)="onBlur($event)"
    debounce="500">
  </ckeditor>
  `
})
export class Sample{
  ckeditorContent = '';
  constructor(){}
  onReady() {
    this.ckeditorContent = `<p>My HTML</p>`;
  }
}

Has anyone else encountered the same problem?

I am using ng2-ckeditor@1.1.8 and CKEDITOR@4.6.2.

[kzimny]

I have updated your plunker. Is that what you are looking for? If you model value change between initial instatiation and component initialization, you can change the value in onReady() event like that:

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ckeditor [(ngModel)]="content" debounce="500" (ready)="onReady($event)" #ckeditor>
      <p>Hello <strong>world</strong></p>
    </ckeditor>
    <div [innerHTML]="content"></div>
  `,
})
export class App {
  
  @ViewChild("ckeditor") ckeditor: any;
  content: string;
  myModelChanged: string;

  constructor() {
    this.content = '<p>Old Text</p>';
    
    setTimeout(() => {  
      this.myModelChanged = '<p>Is the way feasible?</p>';
    }, 50);
    
  }
  
  onReady(): void {
    if(this.ckeditor)
    {
      this.content = this.myModelChanged;
      // or
      //this.ckeditor.instance.setData(this.myModelChanged);
    }
  }
}

[kzimny]

Issue closed due to inactivity