Cannot customize PrimeNG Quill Editor in Angular

Question

I am using PrimeNG Editor (based on Quill in an Angular 7 project and I want to customize the toolbar. Although I have tried some of the configuration options on HTML and JavaScript side, the only thing I managed to update is placeholder property via HTML side. Here is my approach (I defined Editor as a custom control):

#FormComponent.ts:

public controlDescription = new ControlEditor({
    key: 'Description',
    label: 'Description',
    required: true
});

this.controls = [this.controlDescription, ... ];

#FormComponent.html:

<div comp-dynamic-control [form]="form" [control]="controlDescription"></div>

#ControlEditor.html:

<p-editor [formControlName]="control.key" placeholder='Compose text...'></p-editor>

Please note that I also tried to use Editor directly (without our Custom Editor) using the following code in FormComponent.html but there is no editor seems on the page despite adding import {EditorModule} from 'primeng/editor'; to the ControlEditor.ts file. ANy idea?

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

Answer 1

I'm using Angular 9 and for me the customization only worked when i provided the formats property with a string array of all the desired formats (buttons) and next to that i needed to add the buttons in the html page as well. The buttons needed to be enclosed within p-header tags and the p-header tags needed to be between the p-editor tags like so:

<p-editor [(ngModel)]="value" [style]="{'height':'100px'}" formats="formats">
    <p-header>
       <span class="ql-formats">
        <button class="ql-bold" aria-label="Bold"></button>
        <button class="ql-italic" aria-label="Italic"></button>
       </span>
    </p-header>
</p-editor>

The bold and italic buttons will only appear when i also define them in a string array in the typescript page like so:

formats: string[] = ['bold', 'italic'];

Here are all the other options: https://quilljs.com/docs/formats/

don't forget to add formats="formats" to the first p-editor tag