Angular HTML select form showing only the first choice - html

Question

So guys, I have this very simple snippet
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event.target.value)">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
when i make a choice it always shows me the first option as selected. Let's say ngrxMenuItems is an array with [1,2,3,4]. No matter what is the choice you make it will show you only the first option.
What i tried:
- removing (change)="onChooseMenuItem($event.target.value)" and replacing it with (click) event on every row
- trying ngIf options
What I assume it is:
= Some Angular behaviour I am not aware of.

Answer 1

You main problem is here (change)="onChooseMenuItem($event.target.value), the reason being that the target property does not exist on the $event emitted event, you need to handle the value part in the ts method like so
Html
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event)"> <!-- Change the (change) event emitter -->
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
Ts
onChooseMenuItem(event: any){
const value = event.target.value;
console.log(value);
}

Answer 2

You do not bind a value from your component to your selection.
So select does not know which values is the actual to select as option.
You must add ngModel to your select:
<select class="form-control" id="exampleFormControlSelect1" [(ngModel)]="select1">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
'select1' is a variable in your component containing the information about the selected option.