How can I get new selection in select in Angular 2

Question

I am using Angular 2  TypeScript    I want to do something with the new selection  but what I get in onChange   is always the last selection  How can I get the new selection    lt select   ngModel    selectedDevice   change   onChange  event   gt      lt option  ngFor   i of devices  gt   i   lt  option gt   lt  select gt    onChange  event        console log this selectedDevice          I want to do something here with the new selectedDevice  but what I        get here is always the last selection  not the one I just selected

User · Answer

Another option is to store the object in value as a string:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

component:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

This was the only way I could get two way binding working to set the select value on page load. This was because my list that populates the select box was not the exact same object as my select was bound to and it needs to be the same object, not just same property values.

User · Answer

lt mat-form-field gt   lt mat-select placeholder  Vacancies    ngModel    vacanciesSpinnerSelectedItem code   ngModelChange   spinnerClick1  event        ngModelOptions    standalone  true   required gt       lt mat-option  ngFor  let spinnerValue of vacanciesSpinnerValues   value   spinnerValue  code  gt   spinnerValue description   lt  mat-option gt   lt  mat-select gt      I used this for angular Material dropdown  works fine

User · Answer

Angular 7 8  As of angular 6 the use of ngModel input property with reactive forms directive have been deprecated and removed altogether in angular 7   Read official doc here   Using reactive form approach you can get set selected data as           in your template   lt select formControlName  person   change   onChange  event  class  form-control  gt       lt option  value   null  disabled gt Choose person lt  option gt         lt option  ngFor  let person of persons   value   person  gt             person name        lt  option gt    lt  select gt        in your ts  onChange  event        let person   this peopleForm get  person   value     console log  selected person--- gt    person          this peopleForm get  person   setValue person id

User · Answer

I tried all the suggestions and nothing works for me  Imagine the situation  you need a 2-way binding and you have a lookup with NUMBER values and you want to fill your SELECT with the values from this lookup and highlight the chosen option  Using  value  or  ngModelChange  is a no-go  because you won t be able to select the chosen option after user initiated the change   value  considers everything a string  as to  ngModelChange  - it obviously should not be used when user initiates the change  so it ruins the proper selection  Using  ngModel  guarantees the fixed format of received VALUE as INDEX  VALUE and it s easy to parse it correspondingly  HOWEVER once again - it ruins the selected option  So we go with  ngValue   which will take care of proper types    change  and     value   which guarantees the handler receives VALUE  not a DISPLAYED VALUE or INDEX  VALUE    Below is my working clumsy solution     lt select     class  quot browser-default custom-select quot       change   quot onEdit  event target value  quot     gt       lt option  value   quot  quot  gt             Licences SelectLicence    abpLocalization        lt  option gt       lt ng-container  ngIf  quot licencesLookupData    async quot  gt         lt option          ngFor  quot let l of licencesLookupData    async quot           ngValue   quot l id quot           value   quot l id quot           selected   quot l id    selected id quot         gt             l id     amp nbsp  amp nbsp     l displayName   defaultValue           lt  option gt       lt  ng-container gt     lt  select gt     onEdit idString  string        const id   Number idString       if  isNaN id           this onAdd          return            this licencesLoading   true      this licencesService        getById id         pipe finalize      gt   this licencesLoading   false    takeUntil this destroy          subscribe  state  Licences LicenceWithFlatProperties    gt            this selected   state          this buildForm            this get

User · Answer

You can pass the value back into the component by creating a reference variable on the select tag  device and passing it into the change handler onChange  event  device value  should have the new value   lt select   ng-model    selectedDevice   device  change   onChange  event  device value   gt       lt option  ng-for   i of devices  gt   i   lt  option gt   lt  select gt   onChange  event  deviceValue        console log deviceValue

User · Answer

use selectionChange in angular 6 and above  example   selectionChange   onChange  event value

User · Answer

If you don t need two-way data-binding      lt select  change   onChange  event target value   gt       lt option  ngFor  let i of devices  gt   i   lt  option gt   lt  select gt   onChange deviceValue        console log deviceValue       For two-way data-binding  separate the event and property bindings    lt select  ngModel   selectedDevice   ngModelChange   onChange  event   name  sel2  gt       lt option  value   i   ngFor  let i of devices  gt   i   lt  option gt   lt  select gt       export class AppComponent     devices    one two three  split         selectedDevice    two     onChange newValue        console log newValue       this selectedDevice   newValue             do other stuff here           If devices is array of objects  bind to ngValue instead of value    lt select  ngModel   selectedDeviceObj   ngModelChange   onChangeObj  event   name  sel3  gt     lt option  ngValue   i   ngFor  let i of deviceObjects  gt   i name   lt  option gt   lt  select gt    selectedDeviceObj   json        export class AppComponent     deviceObjects     name  1    name  2    name  3      selectedDeviceObj   this deviceObjects 1     onChangeObj newObj        console log newObj       this selectedDeviceObj   newObj             do other stuff here               Plunker - does not use  lt form gt  Plunker - uses  lt form gt  and uses the new forms API

User · Answer

Just use  ngValue  instead of  value     export class Organisation     description  string    id  string    name  string    export class ScheduleComponent implements OnInit     selectedOrg  Organisation    orgs  Organisation            constructor private organisationService  OrganisationService        get selectedOrgMod         return this selectedOrg         set selectedOrgMod value        this selectedOrg   value           lt div class  form-group  gt         lt label for  organisation  gt Organisation        lt select id  organisation  class  form-control    ngModel    selectedOrgMod  required gt           lt option  ngFor  let org of orgs   ngValue   org  gt   org name   lt  option gt         lt  select gt         lt  label gt   lt  div gt

User · Answer

In Angular 8 you can simply use  selectionChange  like this     lt mat-select    value    selectedData   selectionChange   onChange     gt     lt mat-option  ngFor  let i of data   value   i ItemID  gt      i ItemName      lt  mat-option gt    lt  mat-select gt

User · Answer

I ran into this problem while doing the Angular 2 forms tutorial  TypeScript version  at https   angular io docs ts latest guide forms html  The select option block wasn t allowing the value of the selection to be changed by selecting one of the options   Doing what Mark Rajcok suggested worked  although I m wondering if there s something I missed in the original tutorial or if there was an update  In any case  adding  onChange newVal        this model power   newVal      to hero-form component ts in the HeroFormComponent class  and   change   onChange  event target value     to hero-form component html in the  lt select gt  element made it work

User · Answer

In Angular 5 I did with the following way  get the object  event value instead of  event target value   lt mat-form-field color  warn  gt      lt mat-select  ngModelChange   onChangeTown  event   class  form-width  formControlName  branch    ngModel    branch  placeholder  Enter branch  gt        lt mat-option  ngFor  let branch of branchs   value   branch value  gt                       branch name          lt  mat-option gt      lt  mat-select gt   lt  mat-form-field gt   onChangeTown event   void     const selectedTown   event    console log  selectedTown     selectedTown

User · Answer

I was has same problem and i solved using the below code    change   quot onChange  event target value  quot

User · Answer

latest ionic 3 2 0 have modified  change  to  ionChange   eg   HTML   lt ion-select  ionChange   function  event   gt   lt ion-option gt 1 lt ion-option gt   lt  ion-select gt    TS  function  event      this gives the selected element  console log  event

User · Answer

From angular 7 and up  since ngModel is deprecated  we can simply use the control to get the new selected value very easily in a reactive way  Example   lt form  formGroup   quot frmMyForm quot  gt     lt select class  quot form-control quot  formControlName  quot fieldCtrl quot  gt       lt option value  quot  quot  gt  lt  option gt       lt option value  quot val1 quot  gt label val 1 lt  option gt       lt option value  quot val2 quot  gt label val 2 lt  option gt       lt option value  quot val3 quot  gt label val 3 lt  option gt     lt  select gt   lt  form gt   this frmMyForm get  fieldCtrl   valueChanges subscribe  value   gt      this selectedValue   value       By using this fully reactive way  we can upgrade older angular application version to newer ones more easily

[angular] How can I get new selection in "select" in Angular 2?

Examples related to angular

Examples related to typescript

Examples related to html-select