ngx-froala

Angular 9+ bindings for Froala WYSIWYG Editor. See Demo

Getting Started

You can install ngx-froala by using npm.

npm install ngx-froala froala-editor --save

Add Froala editor to angular app

Open angular.json file

• insert a new entry into the styles array

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

• insert a new entry into the scripts array

"scripts": [
  "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
  "..."
],

Usage

Import ngx-froala module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgxFroalaModule } from 'ngx-froala'; // <-- add

@NgModule({
  imports: [
    BrowserModule, 
    NgxFroalaModule  // <-- add
  ],
  declarations: [ 
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Then in HTML

<div froalaEditor [options]="options" [(ngModel)]="text"></div>

Froala editor directive

Input

[options]

• type: FroalaOptions
• require: false
• description: option for froala editor. see document

Output

[oncreated]

• return: Froala instance
• description: trigger when created the froala editor

Froala view

<ngx-froala-view [text]="text"></ngx-froala-view>

Input

[text]

• type: string
• require: true

Authors

• BoatZako ([email protected])

License

This project is licensed under the MIT License - see the LICENSE file for details