https://stackblitz.com/edit/angular-zscthy?file=src%2Fapp%2Fapp.component.ts
You need to update the original a/b object after dropping item from container to another container.
So It's not possible to use search-box component to do so.
app.component.html, I added <input> and removed <app-search-box>, added id to <div cdkDropList>
<input
#search_a
type="text"
class="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="basic-addon1"
/>
<div
cdkDropList
[cdkDropListData]="selectedList"
class="example-list"
(cdkDropListDropped)="dropItem($event)"
id="a_drop_list"
>
app.component.ts, I added code to listen input keydown event
fromEvent(this.search_a.nativeElement, 'keydown')
.pipe(
debounceTime(550),
map(x => x['target']['value'])
)
.subscribe(value => {
this.updateFilter_a(value);
})
Added updateFilter function , it trigger when input keydown
updateFilter_a(val: any) {
this.selectedList = [];
this.selectedList = a.filter(v => v.title.indexOf(val)>= 0 || v.description.indexOf(val) >= 0);
}
Modified dropItem(added code to delete item in a/b object when user moved item from container to another container)
dropItem(event: CdkDragDrop<any[]>) {
if (event.previousContainer !== event.container) {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
//dropped item id
const delete_id = event.container.data[event.currentIndex].id;
//item drop to a_drop_list
if(event.container.id === 'a_drop_list') {
//find object b item index when id == device_id
var index = b.findIndex(function(o){
return o.id === delete_id;
})
//delete item match id == device_id in obejct b
if (index !== -1) b.splice(index, 1);
} else if(event.container.id === 'b_drop_list') {
var index = a.findIndex(function(o){
return o.id === delete_id;
})
if (index !== -1) a.splice(index, 1);
}
}
