0

I'm using https://github.com/Gbuomprisco/ngx-chips with two input fields. If a tag gets removed from the first input ("likes") it gets added to the second input ("dislikes).

This doesn't work if there is some input in the second field first.

TS:

public likes = [];
public dislikes = [];

onLikeRemove(tag) {
  this.dislikes.push(tag);
  console.log(this.dislikes);
}

HTML:

<tag-input [ngModel]="likes" (onRemove)="onLikeRemove($event)">
</tag-input>

<tag-input [ngModel]="dislikes">
</tag-input>

Demo: https://stackblitz.com/edit/ngx-chips-example-5ajdec?file=app/shared/tag-input/tag-input.component.html

Steps to reproduce:

1) Add a tag to "dislikes"

2) Add a tag to "likes"

3) Remove the tag from likes - it should be added to dislikes, but that doesn't work.

Is this a bug in the library or am I getting something more basic wrong?

user3255061
  • 1,757
  • 1
  • 30
  • 50
  • You have to push the removed item into the dislike list on onRemove() event of the likes list, it won't be doing automatically. – Prachi Aug 02 '18 at 14:22
  • Am I not doing exactly that? Forgot to post my code though, just provided the demo. Updated my question. – user3255061 Aug 02 '18 at 15:29
  • I am not getting an editor in this stackblitz, cannot see the code – mchl18 Aug 02 '18 at 16:05
  • Sorry, I'm new to stackblitz. I updated the link, you should be able to see the code now: https://stackblitz.com/edit/ngx-chips-example-5ajdec?file=app/shared/tag-input/tag-input.component.html. – user3255061 Aug 02 '18 at 16:19

1 Answers1

1

Use two way binding in your code to reflect the changes on UI:

<tag-input [(ngModel)]="likes" (onRemove)="onLikeRemove($event)">
</tag-input>

<tag-input [(ngModel)]="dislikes">
</tag-input>
Prachi
  • 3,478
  • 17
  • 34