Angular how can I get selected options (multiple)

Question

I'm literally looking for the solution to this problem for two days and I can't find a thing... Basically what I want is to get selected options from my <select> element:

<select name="selectedCars" [ngModel]="selectedCars" multiple>
    <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option>
</select>

I thought it would bind to selectedCars: Car[] and I could do something like this to display selected values:

<h2>Selected:</h2>
<ul>
    <li *ngFor="let selectedCar of selectedCars">{{selectedCar.Model}}</li>
</ul>

There's literally nothing in the documentation about this.

Answer 1

Change [ngModel] to [(ngModel)](two way binding) which will update selectedCars array as soon as you select / unselect and option in drop-down.

<select name="selectedCars" [(ngModel)]="selectedCars" multiple>
    <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option>
</select>

---

Otherwise do add below attribute to your select element shown below, it is one as the same thing doing [(ngModel)].

(ngModelChange)="selectedCars=$event"

Answer 2

You should use [(ngModel)]

<select name="selectedCars" [(ngModel)]="selectedCars" multiple>
          <option *ngFor="let car of cars" (click)="clickedOption()" [ngValue]="car">
          {{car.name}}</option>
      </select>

clickedOption(){
    console.log(this.selectedCars)
  }

You can simply log the elements when ever an option is clicked as shown in the above method

LIVE DEMO