Custom operator buttons for Angular apps

Thank you for your awesome contribution. I managed to successfully integrate it into my angular application following the documentation. But now, I cannot find an easy way to add the Custom operator buttons. I tried plain JS like this.

window.addEventListener("load", function(){
var quill = new Quill('#editor', {
  modules: {
    formula: true,
    toolbar: [['formula']]
  },
  theme: 'snow'
});

var enableMathQuillFormulaAuthoring = mathquill4quill();

enableMathQuillFormulaAuthoring(quill, {
  operators: [["\\sqrt[n]{x}", "\\nthroot"], ["\\frac{x}{y}","\\frac"]]
});
    
});

It works. But it also overrides the editor I defined in my angular component. I understand because var quill = new Quill just creates a new instance of Quill. How can I access the existed editor and add the custom options buttons without overriding the editor in angular?

Just like you wrote a specific doc for React, I would love to see something for Angular.

Thank you for your help.

[icostaykov]

@anisabboud Thanks greatly for your really quick reply! I had done those imports, but your answer lead me to discover I was actually missing jquery - so I had to add that as well. Thank you very much once again 💯

[anisabboud]

• package.json:

    "mathquill": "^0.10.1",
    "mathquill4quill": "^2.3.0",    <-- npm i mathquill4quill
  

• angular.json:

            "styles": [
              "node_modules/@highlightjs/cdn-assets/styles/github.min.css",
              "node_modules/katex/dist/katex.min.css",
              "node_modules/mathquill/build/mathquill.css",
              "node_modules/mathquill4quill/build/mathquill4quill.min.css",  <-- Add this
              "node_modules/quill/dist/quill.snow.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/@highlightjs/cdn-assets/highlight.min.js",
              "node_modules/katex/dist/katex.min.js",
              "node_modules/quill/dist/quill.min.js",
              "node_modules/mathquill/build/mathquill.min.js",
              "node_modules/mathquill4quill/build/mathquill4quill.min.js"  <-- Add this
            ],
  

• component.html:

    <quill-editor
        format="object" formControlName="..."
        [modules]="..."
        (onEditorCreated)="onEditorCreated($event)">
     </quill-editor>

• component.ts:

  public onEditorCreated(quill: any) {
    (window as any).mathquill4quill()(quill, {
      operators: [
        ['\\frac{x}{y}', '\\frac'],
        ['x^2', '^'],
        ...
      ]
    });
  }