Search code examples
htmlangulartagsangular6ngx-chips

angular 6 ngx chips not displaying properly


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:

enter image description here

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?


Solution

  • 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