CODEWITHSUNDEEP
angularng-tags-input
DEV1205
DEV1205

Reputation: 372

array of object as input for autocompleteItems in ngx-chips

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 ??

Upvotes: 0

Views: 3606

Answers (2)

Immad Hamid
Immad Hamid

Reputation: 789

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

Upvotes: 0

Valindo Godinho
Valindo Godinho

Reputation: 76

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.

Upvotes: 1

Related Questions