angularjs - Wysiwyg with Angular2 and two-way binding -

i need advice on how run two-way binding using wysiwyg editor (in case ckeditor). data loaded editor correctly, when modify text, not show in model. tried manually call events (change, onchange, keypress, keyup, textinput etc ...) , failed.

ckeditor directive:

import {directive, elementref} "angular2/core";  @directive({     selector: 'textarea.cke-editor' })  export class ckeplugin{     constructor(elementref:elementref) {         ckeditor.replace(elementref.nativeelement);     } } 

component:

import {component} "angular2/core"; import {routerlink} 'angular2/router'; import {productentity} "../../../entity/product.entity"; import {productprovider} "../../../providers/product.provider"; import {ckeplugin} "../../../plugins/cke.plugin";  @component({     templateurl: '/templates/productshopdetailbasic',     directives: [routerlink, ckeplugin] })  export class productshopdetailbasiccomponent{      product:productentity;      private _productprovider:productprovider;      constructor(productprovider:productprovider){         this.product = productprovider.product;         this._productprovider = productprovider;     }     saveproduct(){         this._productprovider.savechanges();     } } 

template:

            <div class="form-group">                 <label class="col-sm-2 control-label">description</label>                 <div class="col-sm-7">                     <textarea                     cols="80"                     id="editor1"                     name="editor1"                     rows="10"                     class="cke-editor"                     [(ngmodel)]="product.productshop.description"                     ngcontrol="description" #description="ngform"                     >                     </textarea>                 </div>             </div> 

i found solution, not good.if thought cleanly, i'm welcome.

import {directive, elementref, eventemitter, oninit} "angular2/core";  @directive({     selector: 'textarea.cke', })  export class ckeplugin implements oninit{       private _elementref:elementref;     private _editor;     private _valuechange = new eventemitter();      constructor(elementref:elementref) {         this._elementref = elementref;         this._editor = ckeditor.replace(this._elementref.nativeelement);          //total s**t         this._elementref.nativeelement.style.visibility = 'visible';         this._elementref.nativeelement.style.display = 'inline';         this._elementref.nativeelement.style.setproperty("display", "inline", "important");         this._elementref.nativeelement.style.setproperty("visibility", "visible", "important");         this._elementref.nativeelement.style.setproperty("width", "0px", "important");         this._elementref.nativeelement.style.setproperty("height", "0px", "important");         this._elementref.nativeelement.style.setproperty("background", "none", "important");         this._elementref.nativeelement.style.setproperty("border", "none", "important");         this._elementref.nativeelement.style.setproperty("opacity", "0", "important");          this._valuechange.subscribe(res => {              var focused = document.activeelement;             $(this._elementref.nativeelement).focus();             $(this._elementref.nativeelement).val(res);             var textevent = document.createevent('textevent');             textevent.inittextevent ('textinput', true, true, null, "\0", 9, "en-us");             this._elementref.nativeelement.dispatchevent(textevent);             $(focused).focus();          });     }      ngoninit():any {         var base = this;         this._editor.on('change', function(){             base._valuechange.emit(base._editor.getdata());         });     }   }