New to Kendo UI for Angular? Start a free 30-day trial

Wrapping the MultiSelect in a Custom Component with the Item Template


ProductProgress® Kendo UI® for Angular MultiSelect


How can I wrap the MultiSelect into a custom component and modify its items with the built-in ItemTemplateDirective?


To wrap the MultiSelect in a custom component and customize the items through the ItemTemplateDirective:

  1. Define the MultiSelect along with its ItemTemplateDirective. To customize the items from the custom wrapper component, define the ng-container tag inside the template and configure the NgTemplateOutlet.

    <kendo-multiselect [data]="listItems">
        <ng-template kendoMultiSelectItemTemplate let-dataItem>
            <ng-container *ngTemplateOutlet="currentTemplate; context: { $implicit: dataItem }"></ng-container>
  2. The currentTemplate is a custom field which represents the TemplateRef provided by the custom wrapper component.

    @Input() initialTemplate: TemplateRef<any>;
    currentTemplate: TemplateRef<any>;
    ngOnInit() {
        this.currentTemplate = this.initialTemplate;
  3. In the custom wrapper component, define an ng-template and pass the template reference variable to the custom initialTemplate field.

    <app-multi-select [initialTemplate]="save"> </app-multi-select>
    <ng-template #save let-dataItem>

The following example demonstrates how to wrap the MultiSelect component and customize its items by using an external template.

View Source
Change Theme:

In this article

Not finding the help you need?