angular 6 ngx chips not displaying properly

Question

So I'm using ngx-chips in my current projects and I saved my objects in an array so I can use the following example:

<div>
        <h3>Tags within an autocomplete component (clear on blur events)</h3>
        <tag-input [ngModel]="['@item']"
                   [clearOnBlur]="true">
            <tag-input-dropdown [focusFirstElement]="true" [autocompleteItems]="autocompleteItems">
            </tag-input-dropdown>
        </tag-input>
    </div>

For some reason, what I get is an empty field that does not work, instead of what was shown in the example below:

Here's my code:

<tag-input [ngModel]="selectedExercises" [ngModelOptions]="{standalone: true}"
                   [clearOnBlur]="true">
          <tag-input-dropdown [focusFirstElement]="true" [autocompleteItems]="exercises">
          </tag-input-dropdown>
      </tag-input>

where selectedExercises is an empty array where I want to store the tags I select and exercises is an array of objects where I want to choose from

What am I missing here?

yes it seems to be working now, but I'll be using it for another feature. Thanks though! — Lee Merlas, Nov 13 '18 at 12:01

score 2 · Accepted Answer · answered Nov 09 '18 at 08:41

In my case the issue was simply resolved by adding modules to shared.module.ts to exports section:

@NgModule({
...
exports: [...,
    TagInputModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule],

and the code itself is basically copy-paste from github example

angular 6 ngx chips not displaying properly

1 Answers1