Change CKEditor config does not reflect

[darushHamidi]

I need to support RTL text and LTR text with ckeditor.

Then

  public responsibilities = 'Angular CkEditor';
  public editorConfig = {}

  ngOnInit(): void {
    let removeButtons: string = "exportPdf,Source,Templates,Save,NewPage,Print,Replace,Scayt,SelectAll,Form,Radio,TextField,Textarea,Select,Button,ImageButton"
    this.editorConfig = {
      allowedContent: true,
      contentsLangDirection: "ltr",
      forcePasteAsPlainText: true,
      removePlugins: "easyimage, cloudservices, exportpdf,dialog,tableselection,scayt",
      extraPlugins: `${'divarea'}`,
      removeButtons: removeButtons,
      baseFloatZIndex: 9999999999,
      timestamp: +new Date,
      language: 'en'
    }
  }

app.component.html:

<ckeditor required class="editor form-control input-sm w-100" [(ngModel)]="responsibilities" name="responsibilities"
  id="insert-editor" [config]="editorConfig" [readonly]="false" debounce="500">
</ckeditor>
<br />
<button type="button" (click)="refreshConfig('rtl')">
  Refresh CKEditor Config - (RTL)
</button>

<button type="button" (click)="refreshConfig('ltr')">
  Refresh CKEditor Config - (LTR)
</button>

NOTE: based on this question I used timestamp, which does not work

Code to change config:

  refreshConfig(type: "rtl" | "ltr" = "ltr") {
    type == "rtl" ? this.rtlConfig() : this.ltrConfig();
  }

  private rtlConfig() {
    this.editorConfig = {
      ...this.editorConfig,
      language: 'fa',
      contentsLangDirection: "rtl",
      timestamp: +new Date
    }
  }

  private ltrConfig() {
    this.editorConfig = {
      ...this.editorConfig,
      language: 'en',
      contentsLangDirection: "ltr",
      timestamp: +new Date
    }
  }

NOTE

if set languageto faand contentsLangDirection to rtl in ngOnInit hook or set languageto en and contentsLangDirection to ltr it works.

Stackblitz Here

[kzimny]

It seems to be a known issue. Maybe this plugin could help?

[darushHamidi]

we can do it with the help of ChangeDetectorRef and *ngIf.

visit this link.