Remove The Selected Option From Select Box

I am making angular application with angular form. Here i have given a form with input fields first name and last name which will always showing.. After that i am having children w

Solution 1:

Firstly, get a reference to the select, like so:

HTML:

<select multiple (change)="changeEvent($event)" #mySelect>
  <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>

TS:

import { ViewChild } from '@angular/core';

// ...

@ViewChild('mySelect') select;

Then, in your remove function, check if all elements have been removed, and if they have, set the value of the select to null

if (array.length === 0) {
  this.select.nativeElement.value = null;
}

Here is a fork of the StackBlitz