Follow these steps it should work:

1- Installation:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

Update the angular.json file with the following code:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

import it in your app.module.ts

   import { QuillModule } from 'ngx-quill'

and in the imports add it like bellow

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

in your component.ts file you can modify the editor style like bellow code:

   editorStyle = {
     height: '200px'
   };

and in your component.html file you could call it like bellow code:

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

and here: https://www.npmjs.com/package/ng-quill

Answer from MJ X on Stack Overflow
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill
GitHub - KillerCodeMonkey/ngx-quill: Angular (>=2) components for the Quill Rich Text Editor · GitHub
Ngx-quill updates the ngModel or formControl for every user change in the editor. Checkout the QuillJS Source parameter of the text-change event. If you are using the editor reference to directly manipulate the editor content and want to update ...
Starred by 1.8K users
Forked by 273 users
Languages   TypeScript 96.3% | JavaScript 3.7%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-example
GitHub - KillerCodeMonkey/ngx-quill-example: demo app for the advanced usage of ngx-quill module · GitHub
The demo app for the usage of the ngx-quill module. This project was generated with Angular CLI version 17.0.0.
Starred by 231 users
Forked by 131 users
Languages   TypeScript 65.0% | HTML 29.0% | SCSS 6.0%
🌐
CodeSandbox
codesandbox.io › examples › package › ngx-quill
ngx-quill examples - CodeSandbox
Use this online ngx-quill playground to view and fork ngx-quill example apps and templates on CodeSandbox.
🌐
StackBlitz
stackblitz.com › edit › ngx-quill-demo
Ngx Quill Demo - StackBlitz
Webpack demo app for the advanced usage of ngx-quill module
🌐
StackBlitz
stackblitz.com › edit › ngx-quill-angular
Ngx Quill Angular - StackBlitz
Starter project for Angular apps that exports to the Angular CLI
🌐
npm
npmjs.com › package › ngx-quill
ngx-quill - npm
format - model format - default: html, values: html | object | text | json, sets the model value type - html = html string, object = quill operation object, json = quill operation json, text = plain text ... use customOptions for adding for example custom font sizes --> this overwrites this options globally !!! use customModules for adding and overwriting modules --> this overwrites this modules globally !!! sanitize - uses angulars DomSanitizer to sanitize html values - default: false, boolean (only for format="html")
      » npm install ngx-quill
    
Published   Dec 03, 2025
Version   30.0.1
Author   Bengt Weiße
🌐
Medium
mehul-kothari.medium.com › medium-like-text-editor-in-angular-quill-editor-38c0011a880b
Medium Like Text Editor in Angular (Quill Editor ) | by Mehul Kothari | Medium
February 24, 2021 - Medium Like Text Editor in Angular (Quill Editor ) Demo Link: https://mehulk05.github.io/Blog-Book/#/create-post Documentation: https://www.npmjs.com/package/ngx-quill Rich text editors or What You …
Top answer
1 of 3
34

Follow these steps it should work:

1- Installation:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

Update the angular.json file with the following code:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

import it in your app.module.ts

   import { QuillModule } from 'ngx-quill'

and in the imports add it like bellow

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

in your component.ts file you can modify the editor style like bellow code:

   editorStyle = {
     height: '200px'
   };

and in your component.html file you could call it like bellow code:

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

and here: https://www.npmjs.com/package/ng-quill

2 of 3
6

It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

Btw, this is how documentation tells us to do it.

Find elsewhere
🌐
DEV Community
dev.to › trungk18 › build-a-rich-text-editor-in-angular-with-ngx-quill-4i6d
Build a rich text editor in Angular with ngx-quill - DEV Community
November 4, 2020 - If you notice, the current jira.trungk18.com is using a rich text HTML editor. This tutorial will help you to create one using ngx-quill.
🌐
Freakyjolly
freakyjolly.com › angular-rich-text-editor-using-ngx-quill-tutorial
Angular 8,9 Rich Text Editor using Ngx-Quill Example Tutorial
April 30, 2023 - <quill-editor [styles]="{height: '200px'}" (onFocus)="focus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onEditorCreated)="created($event)" ></quill-editor> import { Component } from '@angular/core'; import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill' @Component({ selector: 'app-quill', templateUrl: './quill.component.html', styleUrls: ['./quill.component.scss'] }) export class QuillComponent { blured = false focused = false created(event) { // tslint:disable-next-line:no-console console.log('editor-created', event) } changedEditor(event: Edito
🌐
Snyk
snyk.io › advisor › ngx-quill › ngx-quill code examples
Top 5 ngx-quill Code Examples | Snyk
import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RichTextEditorComponent } from './rich-text-editor.component'; import { QuillModule, QUILL_CONFIG_TOKEN, QuillConfig } from 'ngx-quill'; import { FormsModule } from '@angular/forms'; import { RichTextEditorEmojiComponent } from './rich-text-editor-emoji/rich-text-editor-emoji.component'; import { ClickOutsideModule } from 'src/app/shared/directives/click-outside/click-outside.module'; @NgModule({ declarations: [RichTextEditorComponent, RichTextEditorEmojiComponent], imports:
🌐
UNPKG
app.unpkg.com › ngx-quill@4.6.9 › files › README.md
ngx-quill
The `QuillModule` exports the `defaultModules` if you want to extend them :). ## Outputs - onEditorCreated - editor instance ``` editor // Quill ``` - onContentChanged - text is updated ``` { editor: editorInstance, // Quill html: html, // html string text: text, // plain text string content: content, // Content - operatins representation delta: delta, // Delta oldDelta: oldDelta, // Delta source: source // ('user', 'api', 'silent' , undefined) } ``` - onSelectionChanged - selection is updated ``` { editor: editorInstance, // Quill range: range, // Range oldRange: oldRange, // Range source: so
🌐
GitHub
github.com › KillerCodeMonkey › angular-18-ngx-quill-26.0.4
GitHub - KillerCodeMonkey/angular-18-ngx-quill-26.0.4: working example - no parchment missing type error
working example - no parchment missing type error. Contribute to KillerCodeMonkey/angular-18-ngx-quill-26.0.4 development by creating an account on GitHub.
Author   KillerCodeMonkey
🌐
npm
npmjs.com › package › ngx-quill-editor
ngx-quill-editor - npm
September 28, 2017 - this is current quill instance object', quill); } onContentChanged({ quill, html, text }) { console.log('quill content is changed!', quill, html, text); } ngOnInit() { setTimeout(() => { this.editorContent = '<h1>content changed!</h1>'; console.log('you can use the quill instance object to do something', this.editor); // this.editor.disable(); }, 2800) } }
      » npm install ngx-quill-editor
    
Published   Sep 28, 2017
Version   2.2.2
Author   Surmon
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-angular-cli
GitHub - KillerCodeMonkey/ngx-quill-angular-cli: example of ngx-quill and angular cli
September 19, 2018 - The demo app for the usage of the ngx-quill module with the angular-cli.
Starred by 2 users
Forked by 4 users
Languages   TypeScript 63.8% | JavaScript 18.4% | HTML 15.7% | CSS 2.1% | TypeScript 63.8% | JavaScript 18.4% | HTML 15.7% | CSS 2.1%
🌐
GeeksforGeeks
geeksforgeeks.org › angularjs › how-to-use-quilljs-editor-in-angular-15
How to use Quilljs Editor in Angular 15 - GeeksforGeeks
April 19, 2024 - Use Quill Editor Component: Place ... provided ngx-quill in your component's HTML template to use the editor. Access Editor Content: Bind a variable to the editor's content using ngModel in your component and access it to handle the editor's content. Customize and Style (Optional): Customize the Quill editor's toolbar, formats, and styles to fit your application's requirements, and apply custom styles as needed. ... Step 2: Create a new Angular ...
🌐
The Johnny Decimal System
dsebastien.net › 2020-04-18-dynamically-customizing-quill-ngx-quill-editors-in-an-angular-application
NGX Quill tip: Dynamically customizing ngx-quill editors in an Angular application
December 3, 2024 - You can find more details about this pattern here: https://alligator.io/angular/providers-shared-modules/, which always has great quality content :) The other important piece of the puzzle is the directive, which makes the link between an editor added on a page (decorated with the directive) and our service. ... As you can see, the directive is really just making the connection between the host component holding the Quill editor instance and the service. The “QuillEditorComponent” type is the one provided by ngx-quill.