How to bind an array of strings to a textbox field in Angular?

Question

I have an array of strings which I want to bind with a textbox field in HTML code. I am not sure how to iterate through the array to show the values as comma separated list in textbox field.

I have tried:

[(ngModel)] = "arrayName" 

But it is working only if I take out only one element from array.

[(ngModel)] = "arrayName[0]" 

HTML Code:

<input type="text" class="form-control" placeholder="Recipient's username" [(ngModel)]="selectedRecipients"name="recpList"/>

Array:

selectedRecipients = [recp1,recp2]

Now I want to show the elements of array(recp1,recp2) to the textbox.

Answer 1

You could try binding ngModel to a method that formats the array as string.

<input type="text" class="form-control" placeholder="Recipient's username" [ngModel]="formatRecipients(selectedRecipients)"name="recpList"/>

and then your formatRecipients method

function formatRecipients(recipients){
    return recipients.join()
}