How to display the dropdown values based on other dropdown value using typescript in Angular 2 application

Question

I am developing angular 2 application, in my current project I want the functionality for displaying dropdown values based on year, make, model. For example if I select Honda then display only Honda models in model dropdown.

By default I will bind the complete data for year, make and model.

This is my view.

VehicleComponent.html

<div class="row form-group">
    <div class="col-md-3">
        <label  class="control-label">Year*</label><br />
        <select  friendly-name="Year" id="year" name="year" class="col-md-6 form-control"  ng-required="true" onchange='OnChange()' >
            <option>Select</option>
            
            <option *ngFor='let type of lookupdetailsvehicleyearinfo'>{{type.LookupValue}}</option>
           
        </select>
    </div>
    <div class="col-md-3">
        <label  class="control-label">Make*</label><br />
        <select friendly-name="Make" class="col-md-6 form-control" ng-required="true" >
            <option>Select</option>
            <option *ngFor='let type of lookupdetailsvehiclemakeinfo'>{{type.LookupValue}}</option>
            </select>
    </div>
    <div class="col-md-3">
        <label  class="control-label">Model*</label>
        <select  friendly-name="Model" class="col-md-6 form-control" ng-required="true" >
            <option>Select</option>
            <option *ngFor='let type of lookupdetailsvehiclemodelinfo'>{{type.LookupValue}}</option>
           </select>
    </div>                                      
</div>

I will get the above data from My Own API's.

Can you please tell me how to write the typescript code in angular 2 application for the above functionality.

slaesh · Accepted Answer · 2016-12-05 18:25:12Z

11

The only thing you have to do is, track the change event of your select-input and change the source of another select-input. Angular2 will do the rest.

Using the selected value:

@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 }}</option>
      </select>

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

  private _values1 = ["1", "2", "3"];
  private _values2 = [];

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

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

    if (val == "1") {
      this._values2 = ["1.1", "1.2", "1.3"];
    }
    else if (val == "2") {
      this._values2 = ["2.1", "2.2", "2.3"];
    }
    else if (val == "3") {
      this._values2 = ["3.1", "3.2", "3.3"];
    }
    else {
      this._values2 = [];
    }
  }
}

live-demo: https://plnkr.co/edit/GDXsPt4aiS7vus6oPvuU?p=preview

UPDATE

Or you can use the selectedIndex: (note that -1 cause your first "Select"-item.

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

      <select (change)="firstDropDownChanged($event.target.selectedIndex - 1)" >
        <option>Select</option>
        <option *ngFor="let v of _values1">{{ v.val }}</option>
      </select>

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

  private _values1 = [
    { id: 1, val: "huhu" },
    { id: 2, val: "val2" },
    { id: 3, val: "yep" },
    { id: 4, val: "cool" }
  ];
  private _values2 = [];

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

  firstDropDownChanged(val: any) {
    const obj = this._values1[val];
    console.log(val, obj);

    if (!obj) return;

    if (obj.id == 1) {
      this._values2 = ["1.1", "1.2", "1.3"];
    }
    else if (obj.id == 2) {
      this._values2 = ["2.1", "2.2", "2.3"];
    }
    else if (obj.id == 3) {
      this._values2 = ["3.1", "3.2", "3.3"];
    }
    else {
      this._values2 = [];
    }
  }
}

live-demo: https://plnkr.co/edit/wugNC6S27FB48EtRN906?p=preview

edited Dec 5, 2016 at 18:25

answered Dec 5, 2016 at 12:34

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pradeep Over a year ago

The above code works fine but for my scenario I need to check the if condition with ID in my collection not an value.

Pradeep Over a year ago

<option *ngFor='let type of lookupdetailsvehicleyearinfo' value="{{type.ID}}">{{type.LookupValue}}</option> by using this line of code I got the ID value but in the component file I check if condition with Selected Id in that if condition I don't know how add the results to collection using typescript.

Pradeep Over a year ago

I wrote below lines of code for adding one collection/array into other collection/array but it will override last value in the collection but not an added to the other collection, can you please tell me how to write the code for adding one collection to other collection. if (val == 5) { for (let make of this.lookupdetailsvehiclemakeinfo) { if (make.LookupDetailsCommonId == val ) { this.lookupdetailsvehiclemakenewinfo = [make]; } } }

Dale K · Accepted Answer · 2019-11-05 09:25:12Z

Ng5-Dynamic Selectoption - Drop down menu for selecting country then states then district

template.html

<div>
    <h2>Hello country/ state/ cities </h2>

    <select (change)="countryChange($event)" >
      <option>Select</option>
      <option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
    </select>

    <select (change)="statesChange($event)">
      <option>Select</option>
      <option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
    </select>

    <select >
      <option>Select</option>
      <option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
    </select>
</div>

component.ts

var countries= [{
            "country": "Afghanistan",
      "states": [
                  { "name":"Nurestan", "cities":["c1", "c2", "c3"]  },
                  { "name":"Oruzgan", "cities":["orc1", "oruc2", "oruc3"] },
                  { "name":"Panjshir", "cities":["3c1", "3c2", "3c3"]  }
                ]
    },
    {
            "country": "Albania",
            "states": [ 
                  { "name": "Korce" , "cities":["c1", "c2", "c3"] },
                  { "name": "Kukes",  "cities":["orc1", "oruc2", "oruc3"] },
                  { "name": "Lezhe","cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Shkoder", "cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Tirane","cities":["orc1", "oruc2", "oruc3"]}
                ]
        },      
        {
            "country": "Antarctica",
            "states": []
        }           
    ]

    states= []; cities = [];
    countryChange(e){
      console.log(e.target.value)
      this.countries.filter(element => {
        if(element.country == e.target.value){
          console.log(element.states[0],"first state")
          this.states = element.states;
        }
      });
      this.cities = []
    }
    statesChange(evt){
      console.log(evt.target.value,this.states)
      this.states.filter( element =>{
        if(element.name == evt.target.value){
          this.cities = element.cities;
        }
      })
    }

Collectives™ on Stack Overflow

How to display the dropdown values based on other dropdown value using typescript in Angular 2 application

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related