Is there a way to have checkbox list in chip customization

Question

Hi,I am adding edited images for you to have a better understanding of my requirement. When in focus, I need a checkbox list to select and the selected labels should look the same way displayed in the first image. Also, I require "Select All" and Filter Input in the dropdown When not in focus, the selected labels should be the same as in the second image. Also if the selected labels are more than the width of the multi-select then the string "+n more.." should show.Is it possible to do this way?  Please help.Thank you.

Sureshkumar P · Answer

Hi Nikitha,You can achieve your requirement by customizing the component
behavior on the change event. Find the code example here:

onChange(args) {
      if ((this.mulObj as any).viewWrapper) {
        (this.mulObj as any).viewWrapper.style.display = 'none';
      }
      (this.mulObj as any).chipCollectionWrapper.style.display = 'block';
      let inputPos = (this.mulObj as any).overAllWrapper.getBoundingClientRect();
      let popupPos =
        (this.mulObj as any).popupWrapper &&
        (this.mulObj as any).popupWrapper.getBoundingClientRect();
      if (inputPos && popupPos && inputPos.top + inputPos.height > popupPos.top) {
        (this.mulObj as any).popupWrapper.style.top =
          inputPos.top + inputPos.height + 'px';
      }
      this.selectedItems = document.getElementById(
        'multiselect-checkbox'
      ).ej2_instances[0].text;
    }

Find the customized sample here: https://stackblitz.com/edit/angular-9endz3-zzb1qh?file=app.component.html,app.component.ts
Regards,Sureshkumar P