2

For a school project we are using angular v4.4.6, ng2-translate for translations and ngx-quill@1.6.0 for text editor. When I use the placeholder attribute like so:

<quill-editor placeholder="{{'Topic.new.quill-placeholder' | translate}}"...></quill-editor>

Then my placeholder takes the value of the current language, but when I choose a new language my placeholder doesn't change. I have no idea why and wonder if there is a solution for this issue?

zgue
  • 3,793
  • 9
  • 34
  • 39
Ben Van Daele
  • 21
  • 1
  • 3

2 Answers2

2

Note: by now (7 month later) you should have found solution for this.

but what I think you're missing is setting the placeholder in box. 

<quill-editor [placeholder]="'Topic.new.quill-placeholder'|translate"...></quill-editor>

that should solve the problem above.

Bayan Abuawad
  • 94
  • 11
1

The solution provided at Dynamically change Quill placeholder works for me: quill.root.dataset.placeholder = 'Your new placeholder';

In Angular, your quill code maybe like this :

let editor = this.container.nativeElement.querySelector('#editor');
this.editor = new Quill(editor, {
              theme: 'snow',
              placeholder: this.placeholder
            });

your placeholder property maybe like this:

@Input()
get placeholder() {
   return this._placeholder;
}
set placeholder(plh) {
   this._placeholder = plh;
   this.stateChanges.next();
}
public _placeholder: string;

So what you need to do is to add some codes into property setter to update placeholder as follows:

set placeholder(plh) {
     this._placeholder = plh;
     this.stateChanges.next();    
     if (this.editor != null) {      
      this.editor.root.dataset.placeholder = this._placeholder;      
     }
  }
renwoxing
  • 11
  • 1