Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

The Future-Proof Angular Rich Text Editor

Feature-rich, easy-to-use, and highly customizable. It's built to future-proof your Angular app to grow as your business grow, making it the most powerful and flexible WYSIWYG rich text Angular editor available.

240+

API Options

35+

Plugins

100+

API Events

700+

Github Stars

220+

API Methods

20,000+

Weekly Downloads

35+

Plugins

20,000+

Weekly downloads

240+

API Option

100+

API Events

220+

API Methods

TRUSTED BY: Samsung Apple IBM Amazon Ebay Intel Salesforce Cisco Thomson Reuters

Reimagine Angular Editing with the
Angular Rich Text Editor

Add Froala as your
Angular WYSIWYG editor

1
Install from NPM

npm install angular-froala-wysiwyg --save

2
Include the Stylesheets

open angular.json file and insert a new entry into the styles array

"styles": [
  "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "node_modules/froala-editor/css/froala_style.min.css",
]

3
Import the editor component & JS files


// Import all Froala Editor plugins.
// import 'froala-editor/js/plugins.pkgd.min.js';

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } 
  from 'angular-froala-wysiwyg';
...

@NgModule({
   ...
   imports: [
   FroalaEditorModule.forRoot(),
   FroalaViewModule.forRoot()
   ... 
   ],
   ...
})

4
Use the editor component

<div [froalaEditor]>Hello, Froala!</div>

Why use Froala as your
Angular Rich Text Editor?

developer friendly WYSIWYG editor

Plugin Diversity

Equip your Angular projects with advanced tools from our editor's comprehensive collection of 35 plugins. Streamlined text and table formatting takes efficiency to new heights.

developer friendly WYSIWYG editor

Plugin Diversity

Equip your Angular projects with advanced tools from our editor's comprehensive collection of 35 plugins. Streamlined text and table formatting takes efficiency to new heights.

Thinking about integrating Froala into your Angular app?

Frequently Asked Questions

Froala Angular WYSIWYG editor is an Angular component that allows you to easily integrate and use the Froala WYSIWYG HTML rich text editor in your Angular applications.

Froala editor is a lightweight and customizable editor that offers many features, such as inline editing, image and video upload, file management, code view, and more. You can use Froala editor to create and edit rich text content for websites, blogs, emails, or other web-based applications.

Furthermore, Integrating Froala in Angular is easy and takes a few lines of code.

Of course! Take advantage of our free trial by downloading the Angular SDK package to test the Froala editor before buying. 

The trial is fully featured and for all functional purposes exactly the same as the licensed versions. However, you will notice a Froala attribution watermark and red ‘unlicensed’ banner that will be present on the editor until the purchase of a Froala license plan.

Fit in Any Kind of Angular Projects

Let Froala power your editing needs

Unlimited users and developers no matter which plan you choose. For any questions, contact us or checkout our Help Center

ExploreDownload

G2's top WYSIWYG editor for three years in a row

Leader Spring 2021
Leader Winter 2021
Leading text editor 2022
Leading WYSIWYG Editor
Leading WYSIWYG editor 2023
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1315547510" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1681901451" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_939179011" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>