Allow defining buttons in ButtonGroup component using NgTemplateOutlet:
<kendo-buttongroup>
<ng-container *ngTemplateOutlet="buttonsList"></ng-container>
</kendo-buttongroup>
<ng-template #buttonsList>
<button kendoButton size="small">Button 1</button>
<button kendoButton size="small">Button 2</button>
<button kendoButton size="small">Button 3</button>
</ng-template>
So far, the ButtonGroup doesn't appear when using this markup.
After conducted research whether this approach could work, we ran into a core limitation in Angular’s content projection model.
When ngTemplateOutlet points to a template defined outside the <kendo-buttongroup> (a sibling or parent), Angular renders that template in a way that breaks the projection chain. The buttons show up in the DOM, but they’re no longer part of the component’s projected content. That means @ContentChildren can’t detect them—they aren’t actual content children, just dynamically inserted nodes outside the projection boundary. And because of how Angular handles these inserts, neither @ContentChildren nor @ViewChildren can access them.
The ButtonGroup component depends on direct access to its button children for keyboard navigation, focus handling, selection logic, styling, and accessibility, so this limitation blocks the approach entirely.
https://stackblitz.com/edit/angular-xykubf4p-ygpmrrag
That is the reason for declining the current feature request.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.