Binding Select Element to Object in Angular

Binding select element to object in Angular

<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;
}

Angular 9 Select Binding to Model

You can try like below.

• Pass selectedObject to consoleLog(selectedObject) method on change event of select.
• selectedObject holds entire state object, so you can't access like selectedObject.state. It should be selectedObject.statename/selectedObject.statecode

Working stackblitz

Template

<select [(ngModel)]="selectedObject" class="form-control" (change)="consoleLog(selectedObject)">
  <option *ngFor="let state of shopstates" [ngValue]="state">{{ state.statename }} ({{ state.statecode }})</option>
</select>
<div>
  <p><b>Selected state Name : </b> {{ selectedObject.statename }}</p>
  <p><b>Selected state Code : </b> {{ selectedObject.statecode }}</p>
</div>

Typescript

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  shopstates = [{
      statename: "Australian Capital Territory",
      statecode: "ACT"
    },
    {
      statename: "New South Wales",
      statecode: "NSW"
    },
    {
      statename: "South Australia",
      statecode: "SA"
    },
    {
      statename: "Queensland",
      statecode: "QLD"
    }
  ];
  selectedObject: any = this.shopstates[0];

  consoleLog(statename) {
    console.log(statename);
  }
}

How to bind an object to an option value in Angular?

Add [(ngModel)]="selectedFriend" and (ngModelChange)="selectFriend($event)"

Try like this:

HTML:

<select class="friend-input" (ngModelChange)="selectFriend($event)" [(ngModel)]="selectedFriend">
  <option disabled selected>Select a friend...</option>
  <option
    *ngFor="let friend of friends"
    [ngValue]="friend"
  >
    {{ friend.userName }}
  </option>
</select>

TS:

  selectFriend(friend:Friends) {
    console.log(friend);
  }

See Stackbiltz Demo

Two Way Binding FormGroup Select With Object

you have to use the compareWith function provided by angular to choose which one are selected.

<ng-container [formGroup]="altBirimFormu"> <!-- Shall be removed -->
    <select formControlName="birimControl" [compareWith]="objectComparisonFunction">
      <option *ngFor="let birim of birimListesi" [value]="birim">
        {{ birim.birimAdi }}
      </option>
    </mat-select>
</ng-container>

// Into your component.ts file
objectComparisonFunction = function (option: Birim, value: Birim): boolean {
    return option?.id === value?.id
}

Angular 5: ngModel binding on select element doesn't update

Change ([ngModel])="selectedValue" to [(ngModel)]="selectedValue"

Just like the docs say:

Visualize a banana in a box to remember that the parentheses go inside the brackets.

Also you do not need the (change) listener if you are using ngModel. You can split your two way binding into [ngModel] and (ngModelChange)

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

@Component({
  selector: 'my-app',
  template: `
  <select type="submit" [ngModel]="selectedValue" (ngModelChange)="onSelectedChange($event)">
    <option *ngFor="let option of options">{{ option }}</option>
  </select>

  {{ selectedValue }}
  ` ,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedValue = 1;
  options = [1,2,3]

  onSelectedChange(value: number) {
    // do something else with the value
    console.log(value);

    // remember to update the selectedValue
    this.selectedValue = value;
  }
}

Live demo

---

Related Topics