quill error 'quill Invalid Quill container'

Question

I'm using angular 4 and a quill editor. but I get an error of quill Invalid Quill container. I change the name of the container but it still returns the error and cannot identify the container id. I create my quill object in ngOninit but it's not working! these are my codes:

import * as Quill from 'quill';
quill;
this.quill = new Quill('#editor-container', {
    modules: {
        toolbar: { container: '#toolbar-toolbar' }
    },
    theme: 'snow'
});

and this is HTML file:

<md-card>
  <div class="toolbar border-none" id="toolbar-toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small"></option>
        <option selected=""></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select class="ql-align">
        <option selected=""></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
    </span>
  </div>
  <hr class="ma-0">
  <div class="border-none capital" id="editor-container" #content>
    <span class="font direct"></span>
  </div>
</md-card>

Answer 1

Unfortunately I am not an Angular expert but I had exactly the same issue with Vue.js. The problem was that Quill was initiated before the DOM container element was properly rendered. If you can make it sure (use a later lifecycle hook or try to initiate the toolbar in the options, not in the markup), it should work.