Angular 5 remove option from select after click - arrays

Question

I have two arrays:
availableTargets: [ {id: 1, name: "Target 1"}, {id: 2, name: "Target 2"}, {id: 3, name: Target 3" ];
selectedTargets: [];
I create a multiple selectlist:
<select multiple>
<option *ngFor="let target of availableTargets" [value]="target .id" (click)="AddTarget($event)">{{target.name}}</option>
</select>
When a user clicks an option, I want to add the 'Target' to the selectedTarget array and remove it from the availableTargets array.
public AddTarget(event) {
let id = event.target.id;
this.availableTargets = this.availableTargets .filter(function (el) { return el.id != id });
this.selectedTargets.push(event.target.id);
}
My multiple select list does not update after removing an element from the availableTarget array. How do I trigger this?

Answer 1

You can do that by simply using index
Template side :
<select multiple>
<option *ngFor="let target of availableTargets; let i = index;" [value]="target .id" (click)="AddTarget(i)">{{target.name}}</option>
</select>
Component Side :
public AddTarget(index) {
this.selectedTargets.push(this.availableTargets[index]);
this.availableTargets.splice(index, 1);
}
WORKING DEMO