Angular 2, setting the selected value on a select list based on selected value of another select list

Question

I am sure this is a simple answer but I just cannot seem to solve it.

I have a dropdown list with names in it John, Jack, Jill, etc. I have a second List with professions in Builder, Joiner, Plasterer, etc.

What I am trying to do is when I select John, I know based on his data he is a Builder, so in my second list I want to change the selected value from "select" to "Builder".

Below is a plunker with what I currently have, any advise on how to make this would would be great.

enter link description here

This is my change method for my first dropdown but I am not getting the desired result:

     firstDropDownChanged(val: any) {
    console.log(val);

    if (val.profession == "Builder") {
      this._values2.selected = "Builder";
    }
    else if (val.profession == "Plumber") {
      this._values2.selected = "Plumber";
    }
    else if (val.profession == "Plasterer") {
      this._values2.selected ="Plasterer";
    }
   else if (val.profession == "Joiner") {
      this._values2.selected ="Joiner";
    }

Thanks Andy

Answer 1

This is what I was able to get to work based on the code in the Plunk.

import {Component, NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <select (change)="firstDropDownChanged($event.target.value)" >
        <option>Select</option>
        <option *ngFor='let v of _values1'>{{ v.name }}</option>
      </select>

      <select [(ngModel)]="selectedProfession" >
        <option>Select</option>
        <option *ngFor='let v of _values2'>{{ v }}</option>
      </select>
    </div>
  `,
})
export class App {
  name:string;
  selectedProfession:string;

  private _values1 = 
  [
    {name:"John", profession: "Builder"},
    {name:"Jack", profession: "Builder"},
    {name:"Jeff", profession: "Plumber"},
    {name:"Jill", profession: "Plasterer"},
    {name:"Joan", profession: "Joiner"},
  ];
  private _values2 = ["Builder","Plumber"," Joiner", "Plasterer"];

  constructor() {
    this.name = 'Angular2'
  }

  firstDropDownChanged(val: any) {
    console.log(val);
    this.selectedProfession = this._values1.find(item => item.name === val).profession;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

I added the FormsModule so I could bind the select value to a property (selectedProfession) in the component.

Then I changed the firstDropDownChanged function to find the choosen worker in the _values1 array based on name, and set the value of the dropdown to that person's profession.

Answer 2

If you don't actually need the variable selectedProfession easiest way would be to in the first dropdown we have the complete object, so that we can use it in the second dropdown. This way we need no methods. So the first one would look like this:

<select [(ngModel)]="tradesman">
  <option>Select</option>
  <option [ngValue]="v" *ngFor='let v of _tradesmen'>{{ v.name }}</option>
</select>

where we use [ngValue] to bind the whole object, the second one would then look like:

<select [(ngModel)]="tradesman.qualifications">
  <option>Select</option>
  <option *ngFor='let v of _qualifications'>{{ v.qualifications }}</option>
</select>

This way is also good if you want to capture any possible change in the qualifications, the tradesman variable will have the change.

Here's demo: http://plnkr.co/edit/TFXUtezSuJsJVuHNXfQ3?p=preview