How to bind chiplist to textarea

[Bhagyasri]

We need to convert the text selected from listbox to chips and those chips should be added dynamically to textarea on selection of text from listbox. How to achieve this?

[Keerthana Rajendran]

Hi Bhagyasri, 

Thanks for contacting Syncfusion support.  

Based on your query, we suspect that you would like to choose an item from the list and that selected item should be displayed in the form of Chip. If so, EJ2 MultiSelect component might suit your requirement.  

Refer to the following demo and UG links for more details on this scenario. 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/chip-customization 

UG: https://ej2.syncfusion.com/angular/documentation/multi-select/chip-customization/ 

Please check whether the above links help you. If not, kindly elaborate on your exact use case scenario(whether you need to move the list item as Chip within textarea) with a pictorial representation(if possible) which will be helpful to guide you in a better way.  

Regards, 

Keerthana R. 

[Bhagyasri]

Hi Keerthana,

Thank You for your reply.

As attached below, the scenario required is on selection of particular item from listbox control (ejs-listbox), it should be converted to chip, and that chip should be added dynamically (on selection from listbox) to beside textarea.

How to achieve this?

[Shalini Maragathavel]

Hi Bhagyasri, 

Good day to you. 

We checked your requirement to dynamically create the Chip component for the selected items of the ListBox. You can achieve this requirement by adding the selected items of the ListBox in the ChipList using add method of Chip in the change event of ListBox as demonstrated in the below code snippet. 

App.component.html 

 

<div class="col-lg-12 control-section"> 

    <ejs-listbox [dataSource]="data" (change)="select($event)"></ejs-listbox> 

    <ejs-chiplist #chip enableDelete="true"></ejs-chiplist> 

</div> 

---------------------------------------------------
App.component.ts 

export class AppComponent { 

  public select(args) { 

    var addChip = args.value; 

    this.chip.add(addChip);  //appending chiplist in chip 

  } 

} 

Please find the below sample for your reference,

Sample: https://stackblitz.com/edit/angular-kdafrg-mc4zbc?file=app.component.html 

API Link: https://ej2.syncfusion.com/angular/documentation/api/list-box/#change 

                https://ej2.syncfusion.com/angular/documentation/api/chips/chipListComponent/#add 

Please get back to us if you need any further assistance. 

Regards, 

Shalini M.