title: How to add custom Quill toolbar in Angular application
body: <p>My web application is based on Angular and I try to integrate Quill into it using <a href="https://github.com/KillerCodeMonkey/ngx-quill" rel="noreferrer">ngx-quill</a> library. I have created my custom embed blot containing just unmodifiable text block (retrieved from the database) and now I try to create a custom toolbar allowing users to insert instances of this blot into the text.</p>
  
  <p>My question is, how is it possible to create a custom drop-down in Quill toolbar where I can supply my own content that will be shown to the user and inserted to the text?</p>
  
  <p>I try to do it this way:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;quill-editor&gt;
    &lt;div quill-editor-toolbar&gt;
      &lt;select class="ql-attribute"&gt;
        &lt;option *ngFor="let attribute of documentAttributes()"
                [title]="document.data[attribute.id]"
                (click)="onAddAttribute(attribute.id)"&gt;
          {{attribute.name}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/quill-editor&gt;
  </code></pre>
  
  <p>...but there are no values shown in the drop-down menu.</p>
  
  <p>It seems that this problem has already been solved for <a href="https://quannt.github.io/programming/javascript/2017/05/11/adding-custom-toolbar-react-quill.html" rel="noreferrer">React</a> and <a href="https://jsfiddle.net/q7jferw3/" rel="noreferrer">plain JS</a>. But it looks like it will be a little bit harder doing so in Angular, especially when Quill is integrated using <a href="https://github.com/KillerCodeMonkey/ngx-quill/blob/master/src/quill-editor.component.ts" rel="noreferrer">QuillEditorComponent</a> provided by <strong>ngx-quill</strong> library.</p>