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
but when trying to add a second one, the dropdown does not appear
Stackblitz
angular typescript ngx-chips
add a comment |
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
angular typescript ngx-chips
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16
add a comment |
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
angular typescript ngx-chips
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
angular typescript ngx-chips
angular typescript ngx-chips
edited Nov 11 '18 at 9:51
Paul
asked Nov 11 '18 at 1:49
PaulPaul
78821035
78821035
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16
add a comment |
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16
add a comment |
1 Answer
1
active
oldest
votes
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
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245163%2fngx-chips-its-not-possible-to-add-a-second-tag-from-autocompleteitems%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
add a comment |
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
add a comment |
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
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
answered Nov 11 '18 at 10:15
Sunil SinghSunil Singh
6,1672626
6,1672626
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245163%2fngx-chips-its-not-possible-to-add-a-second-tag-from-autocompleteitems%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you replicate this issue in stackblitz ?
– Sunil Singh
Nov 11 '18 at 3:06
@SunilSingh I added a link to stackblitz
– Paul
Nov 11 '18 at 9:51
Added the answer .
– Sunil Singh
Nov 11 '18 at 10:16