array of object as input for autocompleteItems in ngx-chips

Question

I am using angular 4 ngx-chips for input tags. From the following link 'ngx-chips' Saw the issue regarding array of objects as input for 'autocompleteitems' but not able to print the dropdown elements. //arrayOfObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}]; and want to print name in dropdown

<tag-input [ngModel]="['@item']"
       [onlyFromAutocomplete]="true">
<tag-input-dropdown [showDropdownIfEmpty]="true"
                    [autocompleteItems]="arrayOfObjects">
</tag-input-dropdown>

But not able to print the dropdown names. Am i missing something ??

Answer 1

I think you should read through the documentation more throughly.

particularly this section

identifyBy - [?string]

Just like for tag-input, this property defines the property of the value displayed of the object passed to the autocomplete

displayBy - [?string]

Just like for tag-input, this property defines the property of the unique value of the object passed to the autocomplete

your tag-input-dropdown should look like this

<tag-input-dropdown [identifyBy]="'id'" [displayBy]="'name'" [showDropdownIfEmpty]="true" [autocompleteItems]="arrayOfObjects">

I hope this helps. All the best.

Answer 2

Other than using like this:

<tag-input [ngModel]="['@item']"

You can just bind the ngModel with item like this:

<tag-input [ngModel]="items"

and then you can bind it with the variable items = [] in your .ts file and below you can print the tags added like this:

 <p *ngFor="let i of items">{{ i.display }}</p>

OR

 <p *ngFor="let i of items">{{ i.value }}</p>

The object would be saved like this:

 items: any = [
    { display: 'Javascript', value: 'Javascript' },
    { display: 'Typescript', value: 'Typescript' },
    { display: 'Go', value: 'Go' }
 ];

It will save the added tags in an object with keys: display and value and in your case the same value would be saved in both the keys which are display and value and its your wish what you would like to do with it. Hope this answers the question. Thanks