WYSIWYG HTML Angular Editor Example

In this tutorial, you will learn how to add WYSIWYG HTML angular-editor in your Angular application in just few steps.

We will create a text editor that looks like the one below:

1. Lets start by installing kolkov/angular-editor:

    npm install @kolkov/angular-editor --save
    

2. Install angular-font-awesome:

    npm install angular-font-awesome --save
    

3. Import angular-font-awesome by adding the following in your my-component.css file:

    @import  "../../node_modules/font-awesome/css/font-awesome.css"
    

4. Add AngularEditorModule, HttpClientModule, FormsModule file in your app.module.ts file:
5. Add the following in your some-component.html file:

You can also remove [config]="configEditor" from the above code to load editor with default configuration.

6. To configure editor, go to your some-component.ts file and create an object from AngularEditorConfig class as shown in the example below:
7. On running your application, you should see the editor now.