The Future-Proof Angular Rich Text Editor
Feature-rich, easy-to-use, and highly customizable. Built to future-proof your Angular app as your business grows — the most powerful and flexible WYSIWYG rich text editor for Angular available.
240+
API Options
40+
Plugins
100+
API Events
220+
API Methods
700+
GitHub Stars
20K+
Weekly Downloads
240+
API Options
40+
Plugins
100+
API Events
220+
API Methods
700+
GitHub Stars
20K+
Weekly Downloads
TRUSTED BY:
Get started in 60 seconds
Add Froala as your Angular WYSIWYG editor
SSR-friendly, standalone-component ready, and tuned for Angular’s change-detection model — Froala fits naturally into modern Angular apps.
1Install from NPM
Pull the package
$ npm install angular-froala-wysiwyg --save
2Import the Module and the Stylesheets
Bring it into your project
import { FroalaEditorModule, FroalaViewModule }
from 'angular-froala-wysiwyg';
// add froala CSS to angular.json "styles"
3Import the editor component & JS files
Wire it up in your component
// Import helpers to detect browser context
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...
@Component({
...
imports: [FroalaEditorModule, FroalaViewModule ...],
...
})
export class AppComponent {
...
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
// Import Froala plugins dynamically only in the browser context
if (isPlatformBrowser(this.platformId)) {
// Import all Froala Editor plugins.
// @ts-ignore
import('froala-editor/js/plugins.pkgd.min.js');
}
}
...
}
// 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()
...
],
...
})
Why developers choose us
Reimagine Angular Editing with the Angular Rich Text Editor
Built for production. Every feature engineered for reliability, performance and developer experience.
Enhanced Security
Protect your Angular projects from XSS attacks. Robust client-side security, with our recommendation to add server-side checks for a defense-in-depth layer.
XSS · CSP · Sanitized
SEO Optimization
Gain a competitive edge with our HTML editor — clean, search-engine-optimized output makes SEO-ready content creation simple.
Clean HTML · Semantic
Plugin Diversity
Equip your Angular projects with advanced tools from our editor’s comprehensive collection of 40+ plugins — streamlined text and table formatting included.
40+ plugins
Clean Aesthetics
Froala brings minimalism to Angular development. Our UI is your gateway to a straightforward and efficient experience — a perfect choice for websites seeking an uncluttered look.
Clean UI
Mobile Adaptability
Froala’s responsive WYSIWYG editor adapts to Angular projects, fitting screens of all sizes for a seamless coding experience.
Responsive · Touch-ready
Fine-Tuned Experience
Control the content and user experience in Angular with Froala Editor’s customizable toolbar. Developers can fine-tune content creation to their liking.
Toolbar · Themes · Events
Thinking about integrating Froala into your Angular app?
Use cases
Fits Any Kind of Angular Project
From content platforms to internal SaaS tools — Froala adapts to your domain.
CMS
Content Management Systems
Enhance your CMS in Angular with the Froala WYSIWYG editor — transforming the editing process for pages and blog posts.
LMS
Learning Management Systems
Advance your Angular LMS with MathType integration, delivering a new level of accuracy and professionalism for educational content.
Email
Email Marketing Systems
Effortlessly craft email content with the Froala Angular WYSIWYG editor, guaranteeing output that’s compatible with major mail clients.
CRM
Customer Relationship Management
Transform your Angular CRM strategy with a cutting-edge rich-text WYSIWYG editor that brings innovative features to customer relationship management.
SaaS
SaaS & Internal Apps
Enhance your SaaS application’s capabilities with a robust editor — purpose-built for the kinds of formatted-text input that internal tools demand.
Docs
Document Management
Develop Angular applications with capabilities akin to Microsoft Word and Google Docs — empowering your document management workflows.
Tutorials
Explore how to use Froala Angular WYSIWYG Editor
Step-by-step guides walking you through real integration patterns.
Let Froala power your editing needs
Unlimited users and developers no matter which plan you choose. For any questions, contact us or check out our Help Center.
G2's top WYSIWYG editor for three years in a row
Questions
Frequently Asked Questions
Everything you need to know before adopting Froala in your Angular stack.
What is Froala's Angular WYSIWYG editor?
Froala’s Angular WYSIWYG editor is an Angular component that lets you easily integrate and use the Froala WYSIWYG HTML rich text editor in your Angular applications.
Why should you choose Froala Angular rich text editor?
Froala is a lightweight and customizable editor offering many features: inline editing, image and video upload, file management, code view, and more. Use it to create and edit rich text for websites, blogs, emails, or any web-based application. Integrating Froala in Angular is easy — it only takes a few lines of code.
Can I try the Froala editor before I buy it?
Of course! Take advantage of our free trial by downloading the Angular SDK package to test the editor before buying. The trial is fully featured and functionally identical to the licensed versions. However, you’ll see a Froala attribution watermark and a red ‘unlicensed’ banner until a license plan is purchased.
