npm i ngx-wig


Angular(also Angular 12) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)

by Stepan Suvorov

15.1.4 (see all)TypeScript:Built-In
npm i ngx-wig


Build Status

screen shot 2017-12-12 at 14 52 51


it's only Angular! No jQuery or other WYSIWYG monsters

Angular Support

For Angular 12 ngx-wig@12.0.0 For Angular 11 ngx-wig@11.0.0 For Angular 10 ngx-wig@10.0.0 For Angular 9 ngx-wig@9.0.0 Since Angular 8 we sync the version and now for each AngularX you will be able to use ngx-wig version X. For Angular 7 ngx-wig@2.0.0 For Angular 6 ngx-wig@1.6.0
For Angular 4 and Angular = ^5 - use version ngx-wig@1.2.7


Icons are not in the pack! You can use the icons that you like. We recommend to use Material Design Icons

If you dont want to use full icons set, you can use these steps:

  1. go to icons set
  2. choose the icon that you want, press the right mouse button on it, and then select "View SVG" option
  3. go to URL-encoder for SVG and use it to convert your SVG


ngx-wig could be simply installed via npm:

npm install ngx-wig --save

Important note:

The last version on ngx-wig that was built for Angular 4.x is 0.3.6. Any higher version may be not fully compatible with Angular version lower than 5.0.0.


First, import the ngx-wig to your module:

import {NgxWigModule} from 'ngx-wig';

  imports: [ NgxWigModule ]

it's just attribute directive for textarea:

<link href="https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet" />
<ngx-wig [content]="text1"></ngx-wig>


Quick start ( demo )

<ngx-wig [content]="text1"></ngx-wig>

Placeholder ( demo )

<ngx-wig [content]="text1" [placeholder]="'Enter instructions here.'"></ngx-wig>

ngModel sync ( demo )

<ngx-wig [(ngModel)]="text1"></ngx-wig>
<ngx-wig [(ngModel)]="text1"></ngx-wig>

Set buttons ( demo )

<ngx-wig [content]="text1" [buttons]="'bold, italic'"></ngx-wig>

onContentChange Hook ( demo )

<ngx-wig [content]="text1" (contentChange)="result = $event"></ngx-wig>
<div [innerHTML]="result"></div>

Reactive FormControl ( demo )

<ngx-wig [formControl]="text1"></ngx-wig>

Two-way binding ( demo )

<ngx-wig [(ngModel)]="text1"></ngx-wig>

Adding own buttons

Please check an example here https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts


To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

To run all tests:

$ npm run test


MIT © Stepan Suvorov