Vfrdtyky

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

but when trying to add a second one, the dropdown does not appear

Stackblitz

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