Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded

Angular (Typescript): How can I set option of selected to 'selected' if two-way binded?

using this html code:

  G Level 3:
  <select [ngModel]="selectedg3" (ngModelChange)="selectG3Changed($event)">
      <option [ngValue]="g3" *ngFor="let g3 of fetchService.gLevels3" [selected]="g3.name == selectedTask.glevel3.name">{{g3.name}}</option>
  </select><br>

combined with this initialisation inside the function table-row click(){...}:

this.selectedg3 = this.selectedTask.glevel3;

the select will show up the glevel3 of my selectedTask

• My [ngModel] is two-way binded to the variable selectedg3 and therefore it will hold the initiated variable.

Angular2 two-way binding to select option not updating

The problem is, that by using ngValue, the select expects the same reference, not just a similar looking object.

You could add a method to select by name like this:

public selectByName(name: string) {
   this.selectedPerson = this.people.find(person => person.name === name);
}

And then call it in your ngOnInit():

this.selectByName("Mary");
// or this.selectedPerson = this.people[2];

And in selectJane():

public selectJane(){
    this.selectByName("Jane");
}

Your updated Plunker

How can I get new selection in select in Angular 2?

If you don't need two-way data-binding:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

For two-way data-binding, separate the event and property bindings:

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

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:

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
{{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 <form>

Plunker - uses <form> and uses the new forms API

Changing the index in one dropdown needs to set the selected option in another dropdown in angular and typescript

There's a lot of information missing from the question. I've still tried to replicate the scenario and have fixed the issue.

So assuming that getList method on your CommonService returns data that looks something like this:

{
  "data": {
    "studentId": 5
  }
}

You'll need to set it to this.model.classId instead of this.classId in your subscribe block.

getClassByStudent(studentId) {
  // ...
  this.commonService.getList().subscribe((response: any) => {
    this.classAsPerStudent = response.data;
    this.model.classId = this.classAsPerStudent.studentId; // <----- HERE
  });
}

The second thing is that all the options in your second select list have a value of coaches.id when it should be class.id instead:

<select
  class="form-control form-control-lg form-control-solid"
  name="classId"
  [(ngModel)]="model.classId"
  required
  #classId="ngModel"
>
  <option
    *ngFor="let class of classList"
    [value]="class.id"
  >
    {{ class.className }}
  </option>
</select>

Here's a Working Sample Code on StackBlitz for your ref.

NOTE: Select any student from the first list and notice that the option in the second select list changes to Class 5. It will only change to Class 5 all the time coz in my mock, I've hard coded the studentId to 5.

Angular: selected on option of select doesn't work as excepted while using along with ngModel

selected is not supported with [(ngModel)]="selectedUser3".

To make an item selected, the value (for string only) or ngValue property value needs to match the value in selectedUser3.

this.selectedUser3 = this.users[2];

By default only object identity is checked, therefore another object instance with the same properties and values doesn't match.
You can customize comparison using compareWith

https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>
compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

Select default option value from typescript angular 6

You can do this:

<select  class='form-control' 
        (change)="ChangingValue($event)" [value]='46'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

// Note: You can set the value of select only from options tag. In the above example, you cannot set the value of select to anything other than 45, 46, 47.

Here, you can ply with this.

---

Related Topics