Search code examples
angularkendo-ui-angular2

Kendo UI with Angular 2 issue


Trying to follow http://www.telerik.com/kendo-angular-ui/getting-started/

Got this error from browser console... No error on server side...

<button kendoButton (click)="onButtonClick()" [ERROR ->][primary]=true >My Kendo UI Button</button>
"): AppComponent@9:46 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'primary' since it isn't a known property of 'button'. ("
<app-date>test</app-date>

<button kendoButton (click)="onButtonClick()" [ERROR ->][primary]=true >My Kendo UI Button</button>
"): AppComponent@9:46
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:15261:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:33578:51)
    at http://localhost:4200/main.bundle.js:33501:83
    at Set.forEach (native)
    at compile (http://localhost:4200/main.bundle.js:33501:47)
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:64762:28)
    at Zone.run (http://localhost:4200/main.bundle.js:64655:43)
    at http://localhost:4200/main.bundle.js:65021:57
    at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:64795:37)
    at Zone.runTask (http://localhost:4200/main.bundle.js:64695:47)consoleError @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375
zone.js:346Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:346_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375

Solution

  • Update your AppModule like this-

    Step1: import ButtonsModule like this-

    import { ButtonsModule } from '@progress/kendo-angular-buttons';
    

    Step2: Update @NgModule like this-

    @NgModule({
      imports: [ BrowserModule, ButtonsModule ],
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ]
    })
    

    This will fix your Template parse error.

    Angular2 version RC6

    Kendo version 0.9.3