Update custom toolbar action example

[Brandon]

First, Im looking for the ability to customize the dropdown button on the toolbar. I found this example https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ but it appears to be out of date from the latest kendo ui libs and doesn't work in angular 9. I mean an exact copy of this example running Angular 9.0.0, results in no custom button.

So close on so many of these things but so far from being a useful library when custom matters in business apps.

It should not be that difficult to provide a custom template for the dropdown list.

[Svet]

Hi Brandon,

Thank you for reaching out to us.

It seems that the reported discrepancy is caused due to the new usage of the @ViewChild decorator introduced in Angular 9. Please check the following issue and the provided description from the official Angular GitHub repository for details:

https://github.com/angular/angular/pull/28810#issue-254078020

Passing the proper static parameter yields the expected functionality when using Angular 9:

in custom-tool.component.ts

export class CustomToolComponent extends ToolBarToolComponent {
    public tabindex = -1;

    @Input() public text: string;

    @ViewChild('toolbarTemplate', {static: true}) public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement') public toolbarElement: ElementRef;
    @ViewChild('button') public button: ElementRef;

Please check the attached Angular 9 project demonstrating the two examples from the referenced article. The second example demonstrating how to add a Kendo DropDownList Component as custom tool to a responsive ToolBar didn't need any adjustments as it already used @ViewChild properly:

export class CustomToolComponent extends ToolBarToolComponent implements OnInit {
    @Input() public text: string;

    @ViewChild('toolbarTemplate', { static: true }) public toolbarTemplate: TemplateRef<any>;
    @ViewChild('toolbarElement', { static: false }) public toolbarElement: ElementRef;

    @ViewChild('popupTemplate', { static: true }) public popupTemplate: TemplateRef<any>;
    @ViewChild('popupElement', { static: false }) public popupElement: ElementRef;

    @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) public dropdownlist: DropDownListComponent;
    @ViewChild('button', { static: false }) public button: ElementRef;
...

Currently the examples on our documentation site are based on Angular 7 as there haven't been major differences between version 7 and 8 of the framework. Indeed, in the coming weeks, we will update all examples on our documentation to use Angular 9.

Please let us know in case further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik