CODEWITHSUNDEEP
angular
Mike B
Mike B

Reputation: 85

Two way data binding not working on Angular 6 multiple select

I am trying to select all options in a multiple select in Angular 6. I have tried a few different approaches, below is what I think should work, but does not.

.html:

<button (click)="selectAll()">Select All </button><br>
<select [(ngModel)]="selectedOptions" multiple size="3">
  <option *ngFor="let opt of possibleOptions">{{opt}}</option>
</select>

.ts:

selectedOptions = [];
possibleOptions = ["a","b","c","d","e","f"];

selectAll() {
  this.selectedOptions = this.possibleOptions;
}

Stackblitz: https://stackblitz.com/edit/angular-pc1hj4

Note: I know there are other components that can do multiple select. I am trying to get this working without resorting to a different component.

Upvotes: 0

Views: 2544

Answers (1)

JB Nizet
JB Nizet

Reputation: 691635

You forgot to specify the value of the options:

<option *ngFor="let opt of possibleOptions" [value]="opt">{{opt}}</option>

Upvotes: 2

Related Questions