ngx-chips: unable to show auto complete items

Question

In Angular, I want to show the items (genreName) in autocomplete. In the .html I wrote the following:

 <tag-input [ngModel]="genre" [onlyFromAutocomplete]="true">
            <tag-input-dropdown [showDropdownIfEmpty]="false"
                                [autocompleteItems]="responseRawGenreList">
            </tag-input-dropdown>
</tag-input>

In the .ts file, I wrote the following codes:

this.commonService.getAllGenre(this.userToken).subscribe((data: any) => {
  this.responseRawGenreList = data.data;
  console.log(this.responseRawGenreList)
});

The above code consoling the result as below:

[0 … 99]
0: {genreId: 4, genreName: "Action", genreDescription: "", status: "ONE"}
1: {genreId: 5, genreName: "Action", genreDescription: "", status: "ONE"}
2: {genreId: 6, genreName: "Action", genreDescription: "", status: "ONE"}
3: {genreId: 7, genreName: "ऐक्शन", genreDescription: "", status: "ONE"}

When I enter something into the 'input tag' on browser, it shows me the below error:

core.js:6014 ERROR TypeError: Cannot read property 'toString' of undefined at TagInputDropdown.matchingFn (ngx-chips.js:207) at ngx-chips.js:1216 at Array.filter () at TagInputDropdown.getMatchingItems (ngx-chips.js:1208) at SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:1011) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at FilterSubscriber._next (filter.js:33)

Answer 1

You need to add [identifyBy] and [displayBy] and pass the property name.

You can either set:

identifyByProperty = 'genreId';

[identifyBy]="identifyByProperty"

or,

identifyBy="genreId"

Try like this:

<tag-input [ngModel]="genre" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [autocompleteObservable]="requestAutocompleteItems" displayBy="genreName"
        identifyBy="genreId">
    </tag-input-dropdown>
</tag-input>

Working Demo