Update the dropdown value on change of another dropdown in Angular 8

Question

I have two dropdowns and on change of 1st dropdown value I want to get the matching json object from that value and update the value of 2nd dropdown

JSON

 this.dropdownValues = {
"mysql 8": {
    "flavor": [
        "medium",
        "small",
        "large"
    ],
    "version": "mysql 8"
},
"mysql 5.7": {
    "flavor": [
        "small",
        "medium"
        
    ],
    "version": "mysql 5.7"
}
}

From this JSON I am displaying version values in 1st dropdown and on change of 1st dropdown value I want to update the 2nd dropdown value with related flavor array. Suppose if I choose version "mysql 5.7" then 2nd dropdown should display flavor values small and medium.

How can I achieve this in angular 8. I am able to display the dropdown values in my html page but not sure how to get the flavor value on change of matching version value.

Answer 1

Demo You can use (change) event for detect changes .

For example you have two select below

<select [(ngModel)]="sqlVersion"(change)="onChange()" >
  <option value="-1">Choose Version</option>
  <option *ngFor="let el of versions" value="{{el}}" >{{el}}</option>
</select>
<select [(ngModel)]="choosenFlavor">
  <option value="-1">Choose Flavor</option> 
    <option *ngFor="let ver of flavors" value="{{ver}}" >{{ver}}</option>
</select>

for the first select you can put change event then, in component you can update array of second select

sqlVersion="-1";
  flavors=[];
  choosenFlavor="-1";
  versions=[];
  dropdownValues = {
    "mysql 8": {
        "flavor": [
            "medium",
            "small",
            "large"
        ],
        "version": "mysql 8"
    },
    "mysql 5.7": {
        "flavor": [
            "small",
            "medium"
            
        ],
        "version": "mysql 5.7"
    }
  }
  constructor(){
    this.versions=Object.keys(this.dropdownValues)
  }
  onChange(){
    this.choosenFlavor = '-1';
    if(this.sqlVersion=="-1"){
      this.flavors=[];
      return;
    }
    this.flavors=this.dropdownValues[this.sqlVersion].flavor;
  }