Wrap Kendo UI into a Angular 2 component

Question

I am trying to get a regular Kendo UI widget (Editor) wrapper into an Angular 2 component. Is this possible. Has anyone done it?

I am aware of the Kendo UI 2 for Angular suite and I am using it already, but was wondering if the missing widgets can be still used with Angular 2.

Thanks

Answer 1

So, here is how I did it:

• First I included jQuery in Index.html. I used the CDN link.

• Then I got the Kendo UI scripts I needed. I used http://www.telerik.com/download/custom-download to create a smaller file.

• Then I created a component to wrap the kendo widget:

 import { Component, Input, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core'; declare var $: any; //inject jQuery @Component({ moduleId: module.id, selector: 'editor', template: ` <textarea>{{ text }}</textarea> `, }) export class EditorComponent { @Input() text: string; @Output() onTextChanged = new EventEmitter<string>(); constructor(private elem: ElementRef) { } ngAfterViewInit() { var ta = this.elem.nativeElement.children[0]; var self = this; $(ta).kendoEditor({ tools: [ "bold", "italic", "underline", "strikethrough", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "createLink", "unlink", "insertImage" ], change: function () { self.onTextChanged.emit(this.value()); } }); } } 

• Then to use it, I just declare it as :

 <editor [text]="'Hello from the outside'" (onTextChanged)="editorTextChanged($event)" ></editor> 

• and then I just handle the editorTextChanged event.

I know this is not exactly the Angular way, but it works. If anyone has a better way of doing this, please share it here.

Thanks.