Kendo UI

Sipmle Kendo

    jQuery('#myElement').kendoProgressBar({
        type: 'percent',
        value: 10
    });

Sipmle Compponent

import { Component, Input, ElementRef } from 'angular2/core';

@Component({
    selector: '[data-role=progressbar]',
    template: '<span>I am a {{ role }}</span>'
})
export class KendoProgressBarComponent {
    @Input() role;

    constructor(private _elementRef: ElementRef) { }

}

Step 1

import { Component, Input, ElementRef, OnInit } from 'angular2/core';

@Component({
    selector: '[data-role=progressbar]',
    template: '<div></div>'
})
export class KendoProgressBarComponent implements OnInit {
    @Input() role;

    constructor(private _elementRef: ElementRef) { }

    render() {
        $(this._elementRef.nativeElement).kendoProgressBar({
            type: 'percent',
            value: 10
        })
    }

    ngOnInit() {
        this.render();
    }
}

Step 2

import { Component, Input, ElementRef, OnInit } from 'angular2/core';

@Component({
    selector: '[data-role=progressbar]',
    template: '<div></div>'
})
export class KendoProgressBarComponent implements OnInit {
    @Input() role;
    @Input() bound;

    constructor(private _elementRef: ElementRef) { }

    render() {
        $(this._elementRef.nativeElement).kendoProgressBar(this.bound)
    }

    ngOnInit() {
        this.render();
    }
}

// a template
<div data-role="progressbar" [bound]="{ type: 'percent', value: 10 }"></div>

Step 3

@Component({
    selector: '[data-role=progressbar]',
    template: '<ng-content></ng-content>' // tell Angular 2 to render children
})
export class KendoProgressBarComponent implements OnInit, OnDestroy, OnChanges {
    @Input() role;
    @Input() bound;
    private _kWidget;
    private _hadFirstRender = false;
    constructor(private _elementRef: ElementRef) { }
    render() {
        this._kWidget = $(this._elementRef.nativeElement).kendoProgressBar(this.bound);
        this._hadFirstRender = true;
    }
    ngOnInit() {
        if(!this._hadFirstRender) { // ngOnChanges() is before ngOnInit()
            this.render();
        }
    }
    ngOnChanges(changes) {
        if(!this._hadFirstRender) { // if it is the first time ngOnChanges() is being called
            this.render();
            return;
        }        
        if(changes.bound
            && changes.bound.currentValue.value != changes.bound.previousValue.value) {
                this._kWidget.data('kendoProgressBar').value(this.bound.value);
        }
    }
    ngOnDestroy() {
        this._kWidget.data('kendoProgressBar').destroy();
        $(this._elementRef.nativeElement).empty();
    }
}

useage

@Component({
    selector: 'main',
    template: `<div data-role="progressbar" [bound]="pbOptions"></div>`,
    directives: [KendoProgressBarComponent]
})
export class MainComponent {
    pbOptions;

    constructor() {
        this.pbOptions = { type: 'percent', value: 10 }
        setTimeout(() => {
            this.pbOptions = Object.assign({}, this.pbOptions, {
                value: 70
            });
        }, 2000);
    }
 }