How to set drop-down value in Angular

Question

I have a drop-down menu where I would like to set a value using some logic in my TS file. This is what my drop-down looks like:

 <select [(ngModel)]="selectedEntity" (change)="onChange();">
     <option *ngFor="let item of Entities" [ngValue]="item.EntityID">{{item.EntityName}}</option>
 </select>

On change, I would like to check for a condition, and then set a value based on that condition. However, I'm stuck because I can't seem to get the drop-downs value to update in the view. I've tried to set the selectedEntity to a new value, but no success. How would I be able to set the selected value using the TS file?

Edit: For more clarity, I'm basically trying to confirm whether the selected choice is allowed for the current item in the Entities array. If it is allowed, select the option the user picked, if not, reset it to the previous value.

can you make a stackblitz [https://stackblitz.com/](https://stackblitz.com/) — Kiran Mistry, Feb 06 '20 at 15:02
@KiranMistry Here is a stackblitz: https://stackblitz.com/edit/angular-hufmqo — m0kova01, Feb 06 '20 at 15:20

eboakyegyau · Accepted Answer · 2020-02-06T15:51:15.967

2

Try this out my friend, ngModelChange is the way to go. You can hook to the event.value to get access to your values

 <select [(ngModel)]="selectedEntity" (ngModelChange)="onChange($event)">
 <option *ngFor="let item of Entities" [ngValue]="item.EntityID">{{item.EntityName}}</option>

I made some changes to the stackblistz. On event you can hook to the value and use it

    onChange(event) {   if (event.id==1){
console.log("Value 1");
}
else if(event.id==2){
console.log("Value 2");
}
 else if(event.id==3){
console.log("Value 3");
}else{
  console.log("Update to Value 1");
} }

edited Feb 06 '20 at 15:51

answered Feb 06 '20 at 15:16

eboakyegyau

225
1
13

so on selected id you can perform what ever logic you want, let me know if it works for you – eboakyegyau Feb 06 '20 at 15:53

score 1 · Answer 2 · answered Feb 06 '20 at 15:59

event handler registered in ngModelChange will be fired before the value of model changes. You have to pass event with change's event handler. You can try

   (change)="onChange($event);"

Code

    <select [(ngModel)]="selectedEntity" (change)="onChange($event);">
       <option *ngFor="let food of foods" [ngValue]="food.name">{{food.name}}</option>
     </select>

TS File

    onChange(event:any){
        console.log(this.selectedEntity)
    }

How to set drop-down value in Angular

2 Answers2