Two way data binding not working on Angular 6 multiple select

Question

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.

JB Nizet · Accepted Answer · 2018-08-08 21:49:41Z

2

You forgot to specify the value of the options:

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

answered Aug 8, 2018 at 21:49

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike B Over a year ago

That was it, thanks! I had it in there in an earlier iteration, but it got pulled out when trying to figure out why it wasn't working.

Collectives™ on Stack Overflow

Two way data binding not working on Angular 6 multiple select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related