Cascading drop down in table

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <!-- Angular polyfill required everywhere -->
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      packages: {
        'api': {
          defaultExtension: 'ts'
        },
        'app': {
          defaultExtension: 'ts'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>
  </head>

  <body>
    <h2>Angular 2 Cascading Select (DropDown) List Demo</h2>
    <my-country-list>Loading....</my-country-list>
  </body>

</html>

// Code goes here

/* Styles go here */


h1 {
  font-family:Arial;
}
body {
  font-family:Arial;
  font-size:10pt;
}

select
{
  width:150px;
}

## multiselect from model and data service

import { State } from './state';

export class Country {
  state: State;
  constructor(public id: number, public name: string, public state: State) { }
}

<button (click)="addItem()">Add</button>
  <div *ngFor="#item of mainArray">
    <country-state-cascading-list [inputModel]="newItem" (updateModel)="updateList($event)"></country-state-cascading-list>
  </div>

import { Component, OnInit } from 'angular2/core';
import { DataService } from './dataservice';
import { Country } from './country';
import { State } from './state';
import { CascadingComponent } from './CascadingComponent';
@Component({
  selector: 'my-country-list',
  templateUrl: 'app/countrylistcomponent.html',
  directives: [ CascadingComponent ],
  providers: [DataService]
})
export class CountryListComponent implements OnInit {
  mainArray: [];
  newItem: any;
  
  constructor(private _dataService: DataService) {
    this.mainArray = [];
  }
  
  ngOnInit(){
    this.newItem = {
      countryID: 0,
      stateID: 0
    }
  }

  updateList(event) {
    console.log(event);
  }
  
  addItem() {
    let obj = {
      countryID: 0,
      stateID: 0
    }
    this.newItem = obj;
    this.mainArray.push(this.newItem);
    console.log(this.mainArray);
  }
}

import { Injectable } from 'angular2/core';
import { Country } from './country';
import { State } from './state';


@Injectable()
export class DataService {
  getCountries() {
    return [
     new Country(1, 'USA' ),
     new Country(2, 'India' ),
     new Country(3, 'Australia' )
    ];
  }
  
  getStates() {
   return [
     new State(1, 1, 'Arizona' ),
     new State(2, 1, 'Alaska' ),
     new State(3, 1, 'Florida'),
     new State(4, 1, 'Hawaii'),
     new State(5, 2, 'Gujarat' ),
     new State(6, 2, 'Goa'),
     new State(7, 2, 'Punjab' ),
     new State(8, 3, 'Queensland' ),
     new State(9, 3, 'South Australia' ),
     new State(10, 3, 'Tasmania')
    ];
  }
}

  import { bootstrap } from 'angular2/platform/browser';
  import { CountryListComponent } from './countrylistcomponent';
  

  bootstrap(CountryListComponent)
    .then(success => console.log(`Bootstrap success`))
    .catch(error => console.log(error));

export class State {
  constructor(public id: number, public countryid: int, public name: string) { }
}

<div style="width: 100%;">
    <div style="float: left;">
      <label>Country:</label>
      <select [(ngModel)]="newModel.countryID" (change)="onSelect($event.target.value)">
        <option *ngFor="#country of countries" value={{country.id}}>{{country.name}}</option>
      </select>
    </div>
    <div style="float: left;">
        <label>State:</label>
        <select [(ngModel)]="newModel.stateID" (change)="onStateSelect($event.target.value)">
          <option *ngFor="#state of cacadedStates" value={{state.id}}>{{state.name}}</option>
        </select>
    </div>
    <div style="clear: both;"></div>
</div>

import { Component, OnInit, Input, Output, EventEmitter  } from 'angular2/core';
import { DataService } from './dataservice';
import { Country } from './country';
import { State } from './state';

@Component({
  selector: 'country-state-cascading-list',
  templateUrl: 'app/CascadingComponent.html',
  providers: [DataService]
})
export class CascadingComponent implements OnInit {
  @Input() inputModel: any;
  @Output() updateModel = new EventEmitter<any>();

  countries: Country[];
  allStates: State[];
  newModel: any;
  cacadedStates: State[];
  
  constructor(private _dataService: DataService) {
  }  
  
  ngOnInit(){
    console.log('Cascading Component ngOnInit() entered..')
    //TODO: Populate the initial values of the select drop down if you need.
    this.countries = this._dataService.getCountries();
    this.allStates = this._dataService.getStates();
    this.newModel = this.inputModel;
    
    //console.log(this.newModel);
  }
  
  onSelect(countryid) {
    //console.log(countryid + ' ' + this.newModel.countryID)
    this.cacadedStates = this.allStates.filter((item)=> item.countryid == countryid));
    this.newModel.countryID = parseInt(countryid);
    this.updateModel.emit(this.newModel);
    console.log(this.allStates);
  }
  
  onStateSelect(stateid){
    console.log(stateid + ' ' + this.newModel.stateID);
    this.newModel.stateID = parseInt(stateid);
    this.updateModel.emit(this.newModel);
  }
}