Ng-multiselect dropdown not returning to its previous state after filtering data table

I have a working application that when you select an item from ng-multiselect-dropdown, it filters a data on a table. But when you clear the selected item, the contents of the table vanishes and the dropdown displays "no data available". I want the table to return to its initial state after dropdown item has been deleted

.ts

ngOnInit():void{ this.dropdownList = this.fullbatches;}

this.dropdownSettings = {
singleSelection: false,
idField: 'id',
textField: 'createDate',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};

onItemSelect(item: any) {
this.selectedIds.push(item.id);
}
onSelectAll() {
this.selectedIds = this.data.map(x => x.id);
this.resetTable();
}
onDeSelectAll() {
this.selectedIds = [];
this.resetTable();
}
onItemDeSelect(item: any) {
this.selectedIds.splice(this.selectedIds.indexOf(item.id), 1);
this.resetTable();
}
resetTable() {
this.fullbatches = [...this.data.filter(x => this.selectedIds.includes(x.id))];
}

*NB* fullbatches is the instant of the data from the db


.html

<th mat-header-cell *matHeaderCellDef>
Create Date
<div>
<ng-multiselect-dropdown
[placeholder]="'Select'"
[settings]="dropdownSettings"
[data]="data"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelect)="onItemDeSelect($event)"
(onDeSelectAll)="onDeSelectAll()"
(onChange)="resetTable()"
>
</ng-multiselect-dropdown>
</div>
</th>

Continue reading...