In this article we’re gonna be implementing quill into angular project.
Following is the screenshot of what we are going to build:
It’s a pretty blank angular project and I just set up a basic homepage with WYSIWYG in angular.
Let’s start building this step by step.
Before we begin, make sure that angular cli is installed on your computer.
By the way, I also made a video version of this article. So if want, you can also watch video:
1- Create new angular project?
Then it would ask “Which stylesheet format would you like to use?”. You can select any oneoption that suits you but I would select SCSS for now with the help of the arrow down button and press enter.
After waiting for a while, it will be installed.
2- Start the server
Type the following code that will run and open app in a separate tab of browser.
By running the above command, it will ask you:
Just type y and press enter.
After process is done it will open following page in a tab:
3- Install dependencies
Now we need to install the dependencies: quill and ngx-quill
Stop the local server and run the following command in your terminal.
After installing run sever again with the command
4- Setup and use quill in angular project
Open your app.module.ts file and import QuilModule from ngx-quill library:
Now add the QuillModule in the “imports” array:
Next we need to import the quill’s style files.
Open the styles.scss ( or style.css if you chose css during installation of angular project ) and paste the following code on top of your global styles.scss file:
Now let’s use quill in our html file.
Open app.component.html file and add following tag in it and save:
Now you should see quill editor in action in the browser like in following screenshot: