CODEWITHSUNDEEP
angulartypescriptngx-chips
Paul
Paul

Reputation: 1355

ngx-chips: it's not possible to add a second tag from autocompleteItems

I'm using ngx-chips with autocompleteItems for tags input, but after adding the first tag, the dropdown is not appearing anymore and also there is no error in the console.

HTML

<tag-input
    [ngModel]="columnsToIgnore"
    [ngModelOptions]="{standalone: true}"
    [placeholder]="'Enter variables to ignore'"
    [secondaryPlaceholder]="'Enter variables to ignore'"
    [onlyFromAutocomplete]="true"
    (onAdd)="addIgnoreColumn($event)"
    (onRemove)="removeIgnoreColumn($event)"
    theme='bootstrap'>
     <tag-input-dropdown
       [autocompleteItems]="selectedDataset.schema.columns"
       [displayBy]="'name'"
       [focusFirstElement]="true">
          <ng-template let-item="item" let-index="index">
            {{ item.name }} : {{ item.type }}
          </ng-template>
     </tag-input-dropdown>
</tag-input>

when adding the first tag, the dropdown appears enter image description here

but when trying to add a second one, the dropdown does not appear enter image description here

Stackblitz

Upvotes: 2

Views: 2136

Answers (1)

Sunil
Sunil

Reputation: 11243

Since you are using the complex object as options you should use identifyBy through which ngx-chips will compare the selected items with provided options.

 <tag-input
    [ngModel]="columnsToIgnore"
    [ngModelOptions]="{standalone: true}"
    [placeholder]="'Enter variables to ignore'"
    [secondaryPlaceholder]="'Enter variables to ignore'"
    [onlyFromAutocomplete]="true"
    (onAdd)="addIgnoreColumn($event)"
    (onRemove)="removeIgnoreColumn($event)"
    theme='bootstrap'>
     <tag-input-dropdown
       [autocompleteItems]="selectedDataset.schema.columns"
       [displayBy]="'name'"
       [identifyBy]="'name'" <!-- use any property of object -->
       [focusFirstElement]="true">
          <ng-template let-item="item" let-index="index">
            {{ item.name }} : {{ item.type }}
          </ng-template>
     </tag-input-dropdown>
</tag-input>

Working copy is here - https://stackblitz.com/edit/angular-icraz4

Upvotes: 2

Related Questions