I need a little help here.

I have some data gotten from an api in my angular application.

I want to prefill the value of the data I am getting inside the Quill Editor input box. The Quill Editor doesn't work with the html value attribute, so this doesn't work: [value]="paymentMessage ? paymentMessage.message_before_payment : ''"

So far, I can only display the data as a placeholder instead of an actual value. Here is my code below:

 <quill-editor
            [styles]="editorStyle"
            name="form"
            [placeholder]="paymentMessage ? paymentMessage.message_before_payment : ''"
            [ngModelOptions]="{ standalone: true }"
 >
 </quill-editor>

Here is the result I get:

If I use the [innerHtml] attribute. The data will display outside the input field instead of it displaying inside the input field.

I'll really appreciate any help I can get.

Here is a link to their npm site.

I need a little help here.

I have some data gotten from an api in my angular application.

I want to prefill the value of the data I am getting inside the Quill Editor input box. The Quill Editor doesn't work with the html value attribute, so this doesn't work: [value]="paymentMessage ? paymentMessage.message_before_payment : ''"

So far, I can only display the data as a placeholder instead of an actual value. Here is my code below:

 <quill-editor
            [styles]="editorStyle"
            name="form"
            [placeholder]="paymentMessage ? paymentMessage.message_before_payment : ''"
            [ngModelOptions]="{ standalone: true }"
 >
 </quill-editor>

Here is the result I get:

If I use the [innerHtml] attribute. The data will display outside the input field instead of it displaying inside the input field.

I'll really appreciate any help I can get.

Here is a link to their npm site. https://www.npmjs./package/ngx-quill

• javascript
• html
• angular
• typescript

3 Answers 3

Hi i think is better to set custom value ponent.ts instead of html.

Like this:

ponent.html

  <ngx-quill #editor [(ngModel)]="content" [modules]="modules"  (contentChanged)="logChange($event);"></ngx-quill>

ponent.ts

export class AppComponent {
  content='my text'

  titleName = 'Angular';
  modules = {
    toolbar: [      
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  };
}

I leave you a link of stackbliz to have some running exemple of solution ;).

https://stackblitz./edit/angular-quill-editor-15qhyp

link of a repo with some different example: https://github./KillerCodeMonkey/ngx-quill-example

try this here!

 @ViewChild('editorText') editorText!: QuillViewComponent;
 
 private content: any;
 
 ngAfterViewInit():{
    this.content = '<p>return back-end</p>
   //fill this variable with what es from your database
   
   this.editorText.content = this.content;
 }

  <quill-editor #editorText></quill-editor>

You need to access the editorElem, the Element of the editor and that gives you access to the innerHtml.

Working with Angular 16

import { QuillViewComponent } from 'ngx-quill';

@ViewChild('editor') editor!: QuillViewComponent;

this.editor.editorElem.innerHTML  = this.thing.details       

 <quill-editor
 #editor
 [modules]="modules"
 formControlName="details"
 ></quill-editor>