Wrapping the MultiSelect in a Custom Component with the Item Template

Environment

Description

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

Solution

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.

   Copy Code<kendo-multiselect [data]="listItems">
       <ng-template kendoMultiSelectItemTemplate let-dataItem>
           <ng-container *ngTemplateOutlet="currentTemplate; context: { $implicit: dataItem }"></ng-container>
       </ng-template>
   </kendo-multiselect>

2. The currentTemplate is a custom field which represents the TemplateRef provided by the custom wrapper component.

   Copy Code@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.

   Copy Code<app-multi-select [initialTemplate]="save"> </app-multi-select>
   
   <ng-template #save let-dataItem>
       {{dataItem.text}}
   </ng-template>

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