2

I just started with Angular and when I tried to add a kendo button this error pops up: Type '"'default'"' is not assignable to type 'ButtonLook | "clear"'. In a fresh angular project first I used this command :

ng add @progress/kendo-angular-buttons

Then,

The package @progress/kendo-angular-buttons@6.3.0 will be installed and executed.

Would you like to proceed? Yes ✔ Package successfully installed.

then I added a component.

ng g c btn-control-panel

In btn-control-panel.component.html I tried this:

<div class="k-block">
    <button kendoButton look="'default'"></button>
</div>

On, compilation

ng serve --o

It threw the following errors:

Type '"'default'"' is not assignable to type 'ButtonLook | "clear"'. 2 ~~~~ src/app/btn-control-panel/btn-control-panel.component.ts:5:16 5 templateUrl: './btn-control-panel.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component BtnControlPanelComponent. ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Browser application bundle generation complete. 5 unchanged chunks Build at: 2021-09-08T04:41:31.525Z - Hash: 9d37dc75dd9c83801528 - Time: 221ms Error: src/app/btn-control-panel/btn-control-panel.component.html:2:25 - error TS2322: Type '"'default'"' is not assignable to type 'ButtonLook | "clear"'. 2 ~~~~ src/app/btn-control-panel/btn-control-panel.component.ts:5:16 5 templateUrl: './btn-control-panel.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component BtnControlPanelComponent.

And, browser tab shows :

Output in Browser

shubham shaw
  • 113
  • 12
  • As mentioned in [docs](https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonDirective/), the `look` options are ButtonLook = flat | outline and `clear`. There is no option for `default`. You must use the provided option. – Yong Shun Sep 08 '21 at 05:08
  • 1
    @YongShun it's working in stackbiltz with same version : https://stackblitz.com/edit/angular-cs6lkt?file=app/app.component.ts – Johar Zaman Sep 10 '21 at 09:35
  • @shubham shaw Please try this: `` without single quote – Johar Zaman Sep 10 '21 at 09:36
  • 1
    Hi @Johar, I saw your project and didn't found *tsconfig.json*. This error will prompt out when in *tsconfig.json* with `compilerOptions: { "strict": true }`. This setting will enforce strict checking for entire Typescript project. You may refer [here](https://www.typescriptlang.org/tsconfig#strict). – Yong Shun Sep 10 '21 at 09:40
  • @YongShun https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonLook/ here is the docs which says it has "default" option – Johar Zaman Sep 10 '21 at 09:41
  • 1
    @YongShun it's confusing in their documentation. 'default' is only shown when we go into the details but not in the main page. – Johar Zaman Sep 10 '21 at 09:43
  • 1
    @Johar, yes `ButtonLook` has value of `default`. But in [ButtonDirective look](https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonDirective/#toc-look), it only allows the options for ButtonLook = flat | outline and `clear`. – Yong Shun Sep 10 '21 at 09:44
  • @YongShun got it. Thanks – Johar Zaman Sep 10 '21 at 09:47

0 Answers0