Light-weight WYSIWYG Editor for Angular

Usage no npm install needed!

<script type="module">
  import ngxWig from '';



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


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="" 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


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