Good observation by @Otrebor regarding the version of @types/quill.

I managed to install Quill with Angular 15 using:

  • npm i ngx-quill@21
  • npm i @types/quill@1

as version 22 required Angular 16, and @types/quill@2 leads to the error message regarding "Delta".

Answer from devio on Stack Overflow
🌐
npm
npmjs.com › package › ngx-quill
ngx-quill - npm
Angular components for the easy use of the QuillJS richt text editor.. Latest version: 30.0.1, last published: 3 months ago. Start using ngx-quill in your project by running `npm i ngx-quill`. There are 161 other projects in the npm registry using ngx-quill.
      » npm install ngx-quill
    
Published   Dec 03, 2025
Version   30.0.1
Author   Bengt Weiße
🌐
StackBlitz
stackblitz.com › edit › ngx-quill-angular
Ngx Quill Angular - StackBlitz
Starter project for Angular apps that exports to the Angular CLI
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill › releases
Releases · KillerCodeMonkey/ngx-quill
Angular (>=2) components for the Quill Rich Text Editor - Releases · KillerCodeMonkey/ngx-quill
Author   KillerCodeMonkey
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill
GitHub - KillerCodeMonkey/ngx-quill: Angular (>=2) components for the Quill Rich Text Editor · GitHub
ngx-quill is an angular (>=2) module for the Quill Rich Text Editor containing all components you need.
Starred by 1.8K users
Forked by 273 users
Languages   TypeScript 96.3% | JavaScript 3.7%
🌐
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 - ngx-quill is an angular module for the Quill Rich Text Editor containing all components you need.
🌐
Stack Overflow
stackoverflow.com › questions › tagged › ngx-quill
Newest 'ngx-quill' Questions - Stack Overflow
I am using Quill as a rich text editor in my Angular project. While it's functioning well overall, I encountered an issue when creating nested lists. When I pass the HTML content to downstream systems,... ... Iam Using Quill mention with ngx-quill. Every text edit and formatting is working.
Find elsewhere
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.

🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill › issues › 1714
Not supported with angular 15 · Issue #1714 · KillerCodeMonkey/ngx-quill
December 14, 2022 - import QuillType, {Delta} from 'quill' - This error can solve like this: import QuillType from 'quill'; import Delta from 'quill';
Author   kavicastelo
🌐
Medium
poonamkumawat.medium.com › text-editor-in-angular-with-ngx-quill-f94847e02c41
Text Editor in Angular with ngx-quill | by Poonam Kumawat | Medium
May 26, 2024 - In this blog post, we will walk through the steps to set up and use ngx-quill in your Angular project.
🌐
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 - In my current project (an Angular application), I’m using the Quill rich text editor, with the help of the ngx-quill utility library (which provides an easy way to use Quill in Angular projects.
🌐
SourceForge
sourceforge.net › projects › ngx-quill.mirror
ngx-quill download | SourceForge.net
This is an exact mirror of the ngx-quill project, hosted at https://github.com/KillerCodeMonkey/ngx-quill.
🌐
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:
🌐
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.
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-angular-cli
GitHub - KillerCodeMonkey/ngx-quill-angular-cli: example of ngx-quill and angular cli
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%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-example
GitHub - KillerCodeMonkey/ngx-quill-example: demo app for the advanced usage of ngx-quill module · GitHub
demo app for the advanced usage of ngx-quill module - KillerCodeMonkey/ngx-quill-example
Starred by 231 users
Forked by 131 users
Languages   TypeScript 65.0% | HTML 29.0% | SCSS 6.0%