Kendo-Angular-Editor: Content projection for custom toolbar

[Ewgenij]

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

[Ryan]

Have you found a solution to this problem? We're having a similar issue with the Grid, where we want to standardize the grid component and use it throughout the application, however we want the calling component  to also provide customizations like toolbars, extra columns, etc

@Component({
    selector: "app-common-grid",
    standalone: true,
    imports: [CommonModule, GridModule],
    template:  <kendo-grid #grid [data]="data">
        <ng-content />
        <kendo-grid-column [field]="'col1'" [title]="'Col1'">
        </kendo-grid-column>
        <kendo-grid-column [field]="'col2'" [title]="'Col2'">
        </kendo-grid-column>
    </kendo-grid>,
    styles: [],
    encapsulation: ViewEncapsulation.None,
})
export class TestCommonGridComponent {
    @ViewChild("grid") grid?: GridComponent;

    data = [
        {
            col1: "Test1",
            col2: "Test2",
        },
    ];
}

@Component({
    selector: "app-common-landing",
    standalone: true,
    imports: [TestCommonGridComponent],
    template:  <app-common-grid>
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
        </ng-template>
    </app-common-grid>,
    styles: [],
    encapsulation: ViewEncapsulation.None,
})
export class TestCommonGridLandingComponent {}

 

 

[Yanmario]

Hi Rayan,

Content projection is not typically supported in the Grid, but a custom approach can be used to implement some Grid elements with ng-content. However, this method is considered custom, and there may be limitations in some cases.

I was able to use my previous example to demonstrate column generation and successfully add the toolbar template to it.

Example in question - https://stackblitz.com/edit/angular-7qonm9-7qusje

Example with checkboxes and selection - https://stackblitz.com/edit/angular-7qonm9-waqx4e1l

Do keep in mind that further modifications are considered a developer effort.

For the people who are interested in the Editor, there is one bug that will prevent such modification and after the bug is resolved by Angular, it might be possible to be a viable option, but that option is still not supported by uses ContentChildren to gather all tools and there might be a conflict. 

I hope this helps.

Regards,
Yanmario
Progress Telerik