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?
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