Angular : Move items from one list to another list

In this post we are going to see on how to select items from one list and move them to another list in angular. you can select a single item or multiple items from the one of the lists and can move them to other, vice versa.

For the code to work you does not need any extra node modules , but for one which is used to implement bootstrap functionality in Angular. we are using ngx-bootstrap here to implement bootstrap here so if already have it in your project head for the next step, if not first install the ngx-bootstrap by executing the below given code in your cli.

npm install ngx-bootstrap --save

this will install the above node module into your project. and lastly you should include bootstrap css into your index.html to include bootsrap style to your projects. 

<!--- index.html -->
<link href="" rel="stylesheet">

so next create a new component for the code implementation.
Now open your newly created components html file. copy and paste the following code into your file.

<div class="form-group row">    <div class="col-md-3"> <select class="form-control" [(ngModel)]="selectedToAdd" multiple name="myselecttsms2"> <option *ngFor="let item of groupsArray" style="text-align: center;border-radius: 2px;background: #fff;margin-bottom: 2px;padding: 2px;" [ngValue]="item">{{item.groupName}}</option> </select>    </div>    <div class="col-md-1" style="margin-top: 35px;"> <div class="row"> <div class="col-12" style="margin-left: 29px;margin-top: -24px;"> <button (click)="assign()" class="btn btn-primary" style="margin-bottom: 3px;width: 39px;height: 39px;background: #24ca71;"><i class="fa fa-angle-double-right"></i></button> </div> </div>        <div class="row"> <div class="col-12" style="margin-left: 27px;"> <button (click)="unassign()" class="btn btn-primary" style="margin-bottom: 3px;width: 39px;height: 39px;background: #24ca71;"><i class="fa fa-angle-double-left"></i></button> </div>        </div>    </div>    <div class="col-md-3"> <select class="form-control" [(ngModel)]="selectedToRemove" multiple name="myselecttsms"> <option *ngFor="let item of selectedItems" style="text-align: center;border-radius: 2px;background: #fff;margin-bottom: 2px;padding: 2px;" [ngValue]="item">{{item.groupName}}</option> </select>    </div> </div>

as you can see the above code uses  ngFor to loop the json data and we also have  multiple attribute in select tag which tells it to allow multiple select in the list. when ever an option is selected its data is saved to  selectedToRemove via ngModel.

Now, lets go to  ts part. open your components ts file copy and paste the below give code into your ts file.

import { Component, OnInit } from '@angular/core'; @Component({    selector: 'app-selectcomp',   templateUrl: './selectcomp.component.html',    styleUrls: ['./selectcomp.component.css'] }) export class SelectcompComponent implements OnInit {    selectedToAdd: any;    selectedToRemove: any;    selectedItems: any = [];    groupsArray: any = [];    constructor() {      this.groupsArray = [{'groupName':'ramu'},                        {'groupName':'ravi'},                        {'groupName':'teja'},                        {'groupName':'murali'}]    }    ngOnInit() {    }    assign() { this.selectedItems = this.selectedItems.concat(this.selectedToAdd); this.groupsArray = this.groupsArray.filter(selectedData => { return this.selectedItems.indexOf(selectedData) < 0; }); this.selectedToAdd = [];    }  
   unassign() { this.groupsArray = this.groupsArray.concat(this.selectedToRemove); this.selectedItems = this.selectedItems.filter(selectedData => {     return this.groupsArray.indexOf(selectedData) < 0; }); this.selectedToRemove = [];    } }

here we are concatenating the selected items with the other list and removing the selected from the original list via the filter method.

That's it if you have any queries feel free to comment below.

vinay kumar

Founder of, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: