Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'

user_4590012 0
Viewed 5063

I get this error message:

Can't bind to 'primary' since it isn't a known property of 'button'.

I am using the yo aspnetcore-spa angular generator. BrowserAnimationsModule and ButtonsModule are imported in my app.module and registered in imports. All my angular and kendo packages are latest versions.

In addition, when I remove [primary]="true" from <button>, the error goes away. After that, I add [primary]="true" again and (without refreshing the page, HMR rebuilds) it works fine. And again, if I refresh the page the error comes back again.

Any solution?

Thanks in advance.

kendo-ui-angular2 angular
4 Answers

Here is my test result

A) [primary]="true"

<button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Angular Button</button>

include css class k-primary and does not include primary attribute

<button _ngcontent-ogg-c2="" kendobutton="" ng-reflect-primary="true" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

B) primary="true"

<button kendoButton (click)="onButtonClick()" primary="true">My Kendo UI Angular Button</button>

include css class k-primary and primary attribute

<button _ngcontent-jow-c2="" kendobutton="" primary="true" ng-reflect-primary="true" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

C) [primary]="false"

<button kendoButton (click)="onButtonClick()" [primary]="false">My Kendo UI Angular Button</button>

does not include css class k-primary and does not include primary attribute

<button _ngcontent-oto-c2="" kendobutton="" ng-reflect-primary="false" class="k-button" dir="ltr">My Kendo UI Angular Button</button>

D) primary=false

<button kendoButton (click)="onButtonClick()" primary="false">My Kendo UI Angular Button</button>

include css class k-primary and primary attribute

<button _ngcontent-ktx-c2="" kendobutton="" primary="false" ng-reflect-primary="false" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

Conclusion

  1. primary in bracket is the correct syntax. It means property binding, i.e. one-way mechanism that lets you set the property of a view element (reference). The reason why removing bracket works for some people because modem Web browser will ignore attribute that it does not recognize. (reference)
  2. Error Can't bind to 'primary' since it isn't a known property of 'button' is caused by Kendo UI module is not imported correctly. (reference)
user_4184390

Make sure you are importing the ButtonsModule in your module

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

@NgModule({
  declarations: [ButtonComponent],
  imports: [ButtonsModule],
  exports: [ButtonComponent]
})
user_56846980
Related