Custom Toolbar Component Not Rendering

[Zach]

Hi all, I am trying to add a custom toolbar component that contains a dropdown button with role guards such that only certain users see all of the items in the dropdown button. Specifically following this example in your guides

https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/

I get an error Property 'toolbarTemplate' will overwrite the base property in 'ToolBarToolComponent'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.ts(2612) when trying to replicate the example on that guide. Furthermore even clearing the error by renaming the variable I can see the ng-template in my html but what is inside it will not render. Please let me know if you guys have a more current working example of a custom toolbar component or any advice. Thank you!

[Zach]

For anyone who encounters this issue, the override suggestion is a red herring, set    

"useDefineForClassFields": false

in tsconfig.json and rebuild

[Martin]

Hi Zach,

Thank you for sharing your experience and what fixed this type of issue.

[Zach]

Could you guys please make this component work with the default "useDefineForClassFields": true, since this is the default setting for newer versions of typescript

[Zach]

https://angular.schule/blog/2022-11-use-define-for-class-fields

[Martin]

Hi Zach,

Thank you for the provided feedback.

We will consider our options when updating the typescript settings that are used while developing components. In the meantime setting the useDefineForClassFields to false is the way to go.

As a side note, the useDefineForClassFields is set to false and target to ES2022 by Angular CLI when creating a new Angular v17 project with typescript v5.2.2.

Regards

 

[Martin]

Hello Zach,

Indeed we would need some more details about the implementation on your side (code snippets, used versions, etc.), because following the steps in the mentioned documentation article, renders a DropDownList inside the Toolbar as expected:

https://stackblitz.com/edit/angular-pxppfk

Please modify the above StackBlitz, or provide a runnable app, that demonstrates the exact configuration of the custom tool so that we can provide any further assistance on the case. Thank you in advance.

Regards,
Martin
Progress Telerik

[Zach]

Angular version 17.1, kendo version 14.3, the error can be reproduced on that stackblitz by changing the target in the tsconfig to es2022

[Martin]

Hi Zach,

Thank you for providing additional details for this case.

Try to put an override prefix to the toolbarTemplate property like:

@ViewChild('toolbarTemplate', { static: true }) public override toolbarTemplate!: TemplateRef<unknown>;

Let me know how it goes.

[Zach]

That does not work for my project, nor the stackblitz, same error

[Martin]

Hi Zach,

I am attaching a runnable Angular 17 project with target: ES2022 where a custom DropDownList component is displayed in the Toolbar.

To run the project:

1. Download and unzip the folder.
2. Run npm install command.
3. Execute ng serve.

Let me know how it goes.

[Zach]

There is loads of compilation errors along the lines of the one pasted below. 

[ERROR] NG8002: Can't bind to 'itemDisabled' since it isn't a known property of 'kendo-dropdownlist'.
1. If 'kendo-dropdownlist' is an Angular component and it has 'itemDisabled' input, then verify that it is part of this module.
2. If 'kendo-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. [plugin angular-compiler]

    src/app/custom-tool.component.ts:26:16:
      26 │                 [itemDisabled]="itemDisabled"

[Zach]

Nevermind, I'll see if I can implement this in my project