How to work with cascading in angularJS2?

Question

suppose i have a select control of country, state and city, how can i get the value of both country and state while i want to bind the city? my code is like this

  bindCountry = () => {
        let data = new Array();
        let _countries = new Array();
        this.location.getCountry().subscribe(_sub => {
            data = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                _countries.push(new Country(value["id"], value["name"]));
            });
            this.countries = _countries;
            this.bindDropDown('selCountry', 'countryID', 'Please select Country', 'countryName', this.countries);
        });
    }
    bindState = (x: number) => {
        let data = new Array();
        let _state = new Array();
        this.location.getState(x).subscribe(_sub => {
            data = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                if (value['countryId'] == x) {
                    _state.push(new State(value['countryId'], value['id'], value['name']));
                }
            });
            this.states = _state;
            this.bindDropDown('selState', 'StateID', 'Please select State', 'StateName', this.states);
        });

    }
    bindCity = (x: number) => {

        var y: any;
        let data = new Array();
        let _city = new Array();
        this.location.getCity(x, y).subscribe(_sub => {
            _city = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                debugger;
                if (value['countryId'] == x && value['stateId'] == y) {
                    _city.push(new City(value['countryId'], value['stateId'], value['id'], value['name']));
                }
            });
            this.cities = _city;
            this.bindDropDown('selCity', 'CityID', 'Please select City', 'CityName', this.cities);
        })
    }

Now in this code, i get the value to bind state from the html element like this

<select class="form-control" id="selCountry" (change)="bindState($event.target.value)" disabled></select>

Now my challenge is to get the value of both country as well as state to bind the city dropdown, how can i do this using angularJS2?

Answer 1

Not that easy to get your actual problem, but with your code I got an idea..

You should use angular's binding methods!

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax-an-overview

<div class="col-xs-12">
    <div class="col-xs-5 form-group">
        <label>Country</label>
        <select class="form-control" id="selCountry" [(ngModel)]="selectedCountry" (ngModelChange)="countryChanged()" >
          <option value="0">select</option>
          <option *ngFor="let c of countries" [value]="c.id">
            {{ c.name }}
          </option>
        </select>
    </div>
    <div class="col-xs-5 form-group col-xs-offset-2">
        <label>State</label>
        <select class="form-control" id="selState" [(ngModel)]="selectedState" (ngModelChange)="stateChanged()" [disabled]="!states.length" >
          <option value="0">select</option>
          <option *ngFor="let s of states" [value]="s.id">
            {{ s.name }}
          </option>
        </select>
    </div>
</div>
<!--#-->
<div class="col-xs-12">
    <div class="col-xs-5 form-group">
        <label>City</label>
        <select class="form-control" id="selCity" [(ngModel)]="selectedCity" (ngModelChange)="cityChanged()" [disabled]="!cities.length" >
          <option value="0">select</option>
          <option *ngFor="let c of cities" [value]="c.id">
            {{ c.name }}
          </option>
        </select>
    </div>
</div>

live demo: https://plnkr.co/edit/5U4Mye6248siSJIiiapZ?p=preview