ngx-wig

Dependencies

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

Angular Support

Now supports Angular 6 and rxjs 6 - ngx-wig@1.6.0
For Angular 4 and Angular = ^5 - use version ngx-wig@1.2.7

Icons

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

Installation

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.

Usage

First, import the ngx-wig to your module:

import {NgxWigModule} from 'ngx-wig';

@NgModule({
  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>

Examples

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  [content]="name" [buttons]="'bold, italic'"></ngx-wig>

Two-way binding ( demo )

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

Development

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

$ npm run build

To lint all *.ts files:

$ npm run lint

batareechka/ngx-wig