How to make the list of data move from one array to other using angular8

Question

i have 2 set of arrays, one in Group and the other List Not in group. I have 2 buttons, move to right and move to left, so on click of them, the selected data must move to right or to left based on button we select. Here multiple selection of data in list should also be implemented. I have used jQuery but it didnt worked with array of data binded, and the selected list also didnt get active in the class, in html, and here multiple list selection is not happening, one at a time is working

Without using jquery how can this be implemented.

DEMO: DEMO

HTML:

 <li class="list-group-item" *ngFor="let item of agentInView; let i=index" (click)="select(i)" [ngClass]="{'active': selectedIndex == i, 'list-group-item': true}">{{item.value}}</li>

Ts:

   selectInView(index: number) {
      this.selectedinViewIndex = index;
  }

Just remove the element from one array and push it to another. — Roberto Zvjerković
– Roberto Zvjerković, Commented Jan 16, 2020 at 11:15
You should not mix javascript with jquery, thats a bad practice. If using jQuery, then why using angular. — Akhil Aravind
– Akhil Aravind, Commented Jan 16, 2020 at 11:29
I dont want to use jquery, i used javascript itself, i am working on demo, will delete jquery file — Bhrungarajni
– Bhrungarajni, Commented Jan 16, 2020 at 11:30

qiAlex · Accepted Answer · 2020-01-16 11:39:50Z

3

There is a demo with multiple selections and moving from one list to another.

Selections are getting clear after moving,
Sort is always by id

https://stackblitz.com/edit/angular-lh5vzl?file=src%2Fapp%2Fapp.component.ts

edited Jan 16, 2020 at 11:39

answered Jan 16, 2020 at 11:37

qiAlex

4,3562 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Akhil Aravind Over a year ago

Thats a nice demo :)

Bhrungarajni Over a year ago

I used to use ngClass always, but from this i learnt without using ngClass also we can add class on condition

qiAlex Over a year ago

I would better prefer to avoid using ngClass because of it's performance. I have a different topic about it here stackoverflow.com/questions/46605252/…

Bhrungarajni Over a year ago

Thanks a lot, really it was informative and it motivates me to learn more, keep up the research work, thanks man :-)

Bhrungarajni Over a year ago

@qiAlex could you please help me to solve this question , stackoverflow.com/questions/60360555/…

|

Collectives™ on Stack Overflow

How to make the list of data move from one array to other using angular8

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related