Binding select element to object in Angular

Question

I'd like to bind a select element to a list of objects -- which is easy enough:

@Component({
   selector: 'myApp',
   template: 
      `<h1>My Application</h1>
       <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
       </select>`
    })
export class AppComponent{
   countries = [
      {id: 1, name: "United States"},
      {id: 2, name: "Australia"}
      {id: 3, name: "Canada"},
      {id: 4, name: "Brazil"},
      {id: 5, name: "England"}
   ];
   selectedValue = null;
}

In this case, it appears that selectedValue would be a number -- the id of the selected item.

However, I'd actually like to bind to the country object itself so that selectedValue is the object rather than just the id. I tried changing the value of the option like so:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

but this does not seem to work. It seems to place an object in my selectedValue -- but not the object that I'm expecting. You can see this in my Plunker example.

I also tried binding to the change event so that I could set the object myself based on the selected id; however, it appears that the change event fires before the bound ngModel is updated -- meaning I don't have access to the newly selected value at that point.

Is there a clean way to bind a select element to an object with Angular 2?

Just realized my Plunk works a little differently in IE vs. Chrome. Neither one actually works the way I'm wanting, but FYI. — RHarris, Mar 11 '16 at 16:22

Günter Zöchbauer · Accepted Answer · 2018-11-08T08:54:17.097

940

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object.

[value]="..." only supports string values
[ngValue]="..." supports any type

update

If the value is an object, the preselected instance needs to be identical with one of the values.

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7

<select [compareWith]="compareFn" ...

Take care of if you want to access this within compareFn.

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}

edited Nov 08 '18 at 08:54

answered Mar 11 '16 at 16:31

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks! Incidentally, the workaround did not work as coded. In the `updateSelectedValue` function, I had to change `JSON.parse(event)` to `JSON.parse(event.target.value)` – RHarris Mar 11 '16 at 17:02
Thanks for the feedback! Could you please also mention that at the answer with the workaround. I guess this is another bug introduced after the answer was posted. There are some pull requests with fixes for ` – Günter Zöchbauer Mar 11 '16 at 17:05
@Matthijs can you explain why `=c` rather than `=c.id` ? vesion changes or code improvements in source? – Martin Apr 20 '16 at 10:06
If you use `c.id` you don't need `ngValue`. `ngValue` is to support binding to object instead of binding to string. – Günter Zöchbauer Apr 20 '16 at 10:07
2

All readers have to double check that they use `ngValue` and not just `value`, even if the select displays the correct text. – koppor May 15 '16 at 20:47
Can you make it work if the selected item is the second in the list when the page is loaded? – AustinTX Jul 07 '16 at 13:48
25

Tried it but this does seem to data-bind only from Dropdown to model. If entering the page with model already set the dropdown is not set accordingly... – Strinder Jul 19 '16 at 16:09
16

@Strinder a frequent mistake is to use another object instance for `selectedValue` than for `c` of (the default item). A different object even with the same properties and values doesn't work, it has to be the same object instance. – Günter Zöchbauer Jul 19 '16 at 16:14
1

@GünterZöchbauer Yeah. Already thought of thought. So there's no easy way to sync directly with model and a list of values? = always via onChange? – Strinder Jul 19 '16 at 17:33
Sorry, I don't understand your last comment. – Günter Zöchbauer Jul 19 '16 at 17:34
1

Soon we might be able to compare the ngModel objects by their property using custom comparator function. Just watch this issue: https://github.com/angular/angular/issues/13268 – kub1x Jan 23 '17 at 14:07
Support for a custom comparer function was added a while ago https://github.com/angular/angular/commit/f89d004c519fd1645b9f94ff40cd740ad3658360 – Günter Zöchbauer May 26 '17 at 07:12
if above example is not working, try adding name attribute to select. i.e – surya Jan 02 '18 at 15:47
Could someone explain what the comparator does? Calls a callback? – Sampgun Feb 28 '18 at 08:58
@TonySamperi `compareFn` is a reference to a function that is called by Angular (if provided) to do custom comparison, for example compare the `id` property of two values not if they are identical object instances (Angular default) – Günter Zöchbauer Feb 28 '18 at 09:02
@GünterZöchbauer so basically it's like the ng-change of AngularJS – Sampgun Feb 28 '18 at 09:35
@TonySamperi I don't know AngularJS, but I doubt that is similar. `compareFn` is used to compare `selectedValue` with `countries` to determine which item should be rendered as selected. – Günter Zöchbauer Feb 28 '18 at 09:46
@GünterZöchbauer In AngularJS you have `...ng-change="myCallback(selectedValue)" ` which in angular 5 becomes `... (change)="myCallback(selectedValue)" ...`. From what I see the compare only wants the name of the function and automatically passes the ngModel and the ngValue of the selected...I seriously don't understand why I would need this...I mean, it could be easily achieved by using (change)... – Sampgun Feb 28 '18 at 09:57
@TonySamperi Ok, I now get what `ng-change` does, but `[compareWith]="compareFn"` is something entirely different. It's about to determine if two objects are equal or not and how to do the comparison. – Günter Zöchbauer Feb 28 '18 at 10:03
why can't I find any documentation of `[compareWith]` in [https://angular.io/docs](https://angular.io/docs) ? – th1rdey3 Jul 30 '18 at 07:40
1

It's always easy once you know it ;-) but https://angular.io/api/forms/NgSelectOption#description contains a link https://angular.io/api/forms/SelectControlValueAccessor with good docs. – Günter Zöchbauer Jul 30 '18 at 07:44
3

`[ngValue]` instead of `[value]` was the key for me. Thanks. – Falci May 01 '19 at 13:06
You can also make use of Template variable. Pass it inside the change event and then you can get the value which you have set in Select. – rp4361 Jul 27 '20 at 08:07
1

Link to the official documentation: https://angular.io/api/forms/NgSelectOption – Philip Nov 23 '20 at 14:48
This saved me since I added the `ngModel` inside `option` tag instead of adding it once in the `select` tag, so keep an eye out for it. – Abdur Rahman Nov 14 '21 at 11:12
1

[ngValue] instead of [value] was the key for me aswell! – Stef Sep 01 '22 at 20:02

score 56 · Answer 2 · edited Oct 08 '21 at 14:45

56

This could help:

<select [(ngModel)]="selectedValue">
  <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>

edited Oct 08 '21 at 14:45

Nicke Manarin

3,026
4
37
79

answered Dec 15 '16 at 14:41

Carolina Faedo

865
7
4

6

I've used [value] instead of [ngValue]. It's not the same. This worked for me – Carolina Faedo May 12 '17 at 18:53
2

Error on '#' in angular 4 – sea-kg Mar 28 '18 at 09:23
3

Use `let` instead of `#` @sea-kg – Ashraful Islam Jul 15 '18 at 06:05
2

This answer doesn't get the selected value – San Jaisy Oct 10 '18 at 04:24

Rahul Kumar · Answer 3 · 2017-05-04T05:36:00.710

23

You can do this too without the need to use [(ngModel)] in your <select> tag

Declare a variable in your ts file

toStr = JSON.stringify;

and in you template do this

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

and then use

let value=JSON.parse(event.target.value)

to parse the string back into a valid JavaScript object

edited May 04 '17 at 05:36

answered May 03 '17 at 08:46

Rahul Kumar

5,120
5
33
44

3

This indeed is doable, but on large objects will become a pain. Also, Angular's underline capability of change detection is something to be thought of. Outputting information as json, easily parsable by bots, adds to performance hauls. Using Angular's change detection hides (encapsulates) the logic of the data, and assures you of your needed information. @Günter Zöchbauer answer is the way to do it in Angular. :) – Lucaci Andrei Jan 10 '18 at 09:18
Helped me where I had a single list and changing one value should not update the next so it helped using this as a hack without the use of ngmodel,Thanks :) – Melvin Oct 04 '18 at 11:59
This works for plain JavaScript objects but note for instances of a class you'd lose all the methods on it. – KhalilRavanna May 30 '19 at 21:20

Jose Carlos Ramos Carmenates · Answer 4 · 2018-06-29T00:32:06.080

It worked for me:

Template HTML:

I added (ngModelChange)="selectChange($event)" to my select.

<div>
  <label for="myListOptions">My List Options</label>
  <select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">{{oneOption.name}}</option>
  </select>
</div>

On component.ts:

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

An you need add to component.ts this function:

  selectChange( $event) {
    //In my case $event come with a id value
    this.model.myListOptions = this.listOptions[$event];
  }

Note: I try with [select]="oneOption.id==model.myListOptions.id" and not work.

============= Another ways can be: =========

Template HTML:

I added [compareWith]="compareByOptionId to my select.

<div>
  <label for="myListOptions">My List Options</label>
  <select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">{{oneOption.name}}</option>
  </select>
</div>

On component.ts:

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

An you need add to component.ts this function:

 /* Return true or false if it is the selected */
 compareByOptionId(idFist, idSecond) {
    return idFist && idSecond && idFist.id == idSecond.id;
 }

This is good if you also want to handle the change event to do something extra (like inform a change callback). Though in that case, you only need to put `[ngModel]` and then set your model manually in your custom change callback defined in `(ngModelChange)`. — crush, Feb 21 '19 at 22:25

score 15 · Answer 5 · answered Apr 05 '18 at 20:56

15

Just in case someone is looking to do the same using Reactive Forms:

<form [formGroup]="form">
  <select formControlName="country">
    <option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
  </select>
  <p>Selected Country: {{country?.name}}</p>
</form>

Check the working example here

answered Apr 05 '18 at 20:56

elvin

961
1
9
26

this.form.get("country").value.Id – hosam hemaily Feb 12 '21 at 14:11

score 7 · Answer 6 · edited Oct 08 '21 at 14:50

In app.component.html:

<select type="number" [(ngModel)]="selectedLevel">
  <option *ngFor="let level of levels" [ngValue]="level">{{level.name}}</option>
</select>

And app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];

  toNumber(){
    this.levelNum = +this.levelNum;
    console.log(this.levelNum);
  }

  selectedLevel = this.levels[0];

  selectedLevelCustomCompare = {num: 1, name: "BB"}

  compareFn(a, b) {
    console.log(a, b, a && b && a.num == b.num);
    return a && b && a.num == b.num;
  }
}

score 6 · Answer 7 · edited Dec 24 '17 at 07:54

6

For me its working like this, you can console event.target.value.

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

edited Dec 24 '17 at 07:54

mike_t

2,484
2
21
39

answered Dec 24 '17 at 06:30

nano dev

335
4
6

score 5 · Answer 8 · edited Oct 08 '21 at 14:44

The key is to use a two way binding in the select via [(ngModel)] and use [ngValue] in each option.

You can even have a default null option and it works with Angular 12.

<select name="typeFather" [(ngModel)]="selectedType">
  <option [ngValue]="null">Select a type</option>
  <option *ngFor="let type of types" [ngValue]="type">{{type.title}}</option>
</select>

That approach is always going to work, however if you have a dynamic list, make sure you load it before the model.

score 4 · Answer 9 · answered Jan 24 '17 at 10:05

4

You Can Select the Id using a Function

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

answered Jan 24 '17 at 10:05

Mohamed Gabr

430
5
18

(change) function does not fire any events for this tag but works on and <input/> – Asma Rahim Ali Jafri Jul 28 '20 at 20:03
In this case we don`t need to fire any event here he needed to catch the Id of the looped list in case you need the event you need to add the (Change) event to the select element as follows (Change)="myFunction($event)" – Mohamed Gabr Jul 29 '20 at 11:10
You can find your Value in event.target.value – Mohamed Gabr Jul 29 '20 at 11:12
And also you need to add whatever the object you want in the Options element as follows – Mohamed Gabr Jul 29 '20 at 11:29
it didn't work. On the option tag but started working when I used it in the – Asma Rahim Ali Jafri Jul 30 '20 at 06:24

score 4 · Answer 10 · answered Jan 14 '19 at 17:26

Create another getter for selected item

<form [formGroup]="countryForm">
  <select formControlName="country">
    <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
  </select>

  <p>Selected Country: {{selectedCountry?.name}}</p>
</form>

In ts :

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}

score 2 · Answer 11 · answered Jan 14 '18 at 21:24

2

Also, if nothing else from given solutions doesn't work, check if you imported "FormsModule" inside of "AppModule", that was a key for me.

answered Jan 14 '18 at 21:24

nikola.maksimovic

707
8
12

score 1 · Answer 12 · answered May 25 '17 at 11:40

You can get selected value also with help of click() by passing the selected value through the function

<md-select placeholder="Select Categorie"  
    name="Select Categorie" >
  <md-option *ngFor="let list of categ" [value]="list.value" (click)="sub_cat(list.category_id)" >
    {{ list.category }}
  </md-option>
</md-select>

score 1 · Answer 13 · answered Oct 03 '19 at 11:59

1

use this way also..

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
     <option *ngFor="let c of countries" value="{{c.id}}">{{c.name}}</option>
 </select>

answered Oct 03 '19 at 11:59

Rathinavel

31
4

score 0 · Answer 14 · answered Nov 25 '20 at 09:59

0

Attention Angular 2+ users: for some reason, [value] does not work on elements. use [ngModel] instead.

<select [ngModel]="selectedCountry">
    <option *ngFor="let country of countries" [value]="country">{{country.name}}</option>
</select>

answered Nov 25 '20 at 09:59

mamashare

399
4
10

score 0 · Answer 15 · edited Oct 08 '21 at 14:49

Tested on Angular 11. I need an extra object 'typeSelected'. Pay attention I'm not using [(ngValue)] as other answers do:

<mat-select formControlName="type" [(value)]="typeSelected" 
            [compareWith]="typeComparation">
  <mat-option *ngFor="let myType of allSurveysTypes" [value]="myType">
    {{myType.title}}
  </mat-option>
</mat-select>

//Declaration.
typeSelected: SurveyType;
...

//Assigning variable 'type' of object 'survey' to 'typeSelected'.
this.typeSelected = survey?.type;
...

    
//Function to compare SurveyType objects.
typeComparation = ( option, value ) =>  {
  if (option && value) {
    return option.id === value.id;
  }
}

score -2 · Answer 16 · edited Oct 08 '21 at 14:47

This code is very simple:

<select class="form-control" id="marasemaat" [(ngModel)]="fullNamePresentor" 
        [formControl]="stateControl" (change)="onSelect($event.target.value)">
  <option *ngFor="let char of programInfo1;let i = index;" 
          onclick="currentSlide(9,false)" 
          value={{char.id}}>{{char.title + " "}}  ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>
</select>

Binding select element to object in Angular

16 Answers16

Linked

Related