Videos
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
@importstatements, 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
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.
Good observation by @Otrebor regarding the version of @types/quill.
I managed to install Quill with Angular 15 using:
npm i ngx-quill@21npm i @types/quill@1
as version 22 required Angular 16, and @types/quill@2 leads to the error message regarding "Delta".
Have a look at this example:
https://github.com/KillerCodeMonkey/ngx-quill-example
I had the same problem (or it seems to be) and i solved it by downgrading the package @types/quill and adding:
"allowedCommonJsDependencies": ["quill"]
to my angular.json