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.
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"
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