angularjs - Cascading drop down in table using Angular 4 typescript -

i new angular , developing first application using angular 4 , typescript

i want use cascading drop-down in table using angular4

currently, have been working on when change drop down first row binding second level dropdown row.

i want bind second level drop down of row first level drop down changed.

i have idea on mind achieve guess might patch curious know proper way of angular achieve this.

ts file code

import { component, oninit, eventemitter } '@angular/core'; import { category } '../model/category'; import { subcategory } '../model/subcategory'; import { partner } '../model/partner'; import { getdataservice } '../../../../server/api/getdata.service'; import { router } '@angular/router';  @component({   templateurl: 'uploadfile.component.html' }) export class uploadfilecomponent implements oninit {   allcategorylist: category[] = [];   allsubcategorylist: subcategory[] = [];   constructor(private _datatask: getdataservice, private _router: router) { }    onchangecategory(devicevalue) {              if (devicevalue > 0) {       this._datatask.getallsubcategory(devicevalue).subscribe(         (data: subcategory[]) => {           this.allsubcategorylist = data;         }       );       console.log("from component: " + devicevalue);     }     else       {         //clear dropdown...         this.allsubcategorylist= [];               }   }    ngoninit() {     this._datatask.getallcategory().subscribe(       (data: category[]) => {         this.allcategorylist = data;       }     );      this._datatask.getallpartner().subscribe(       (data: partner[]) => {         this.allpartnerlist = data;       }     );   }   } 

html file

<div>   <table width="100%" border="1">     <thead>            <th>category</th>       <th>subcategory</th>       <th>partner</th>     </thead>     <tbody *ngfor="let transaction of transactions">       <tr>                <td>           <select style="width:100px;" (change)="onchangecategory($event.target.value)" >             <option value=0>--select--</option>                 <option  value="{{item.id}}"  *ngfor="let item of allcategorylist" [ngvalue]="item.id" >{{item.category}}</option>             </select>         </td>         <td>           <select style="width:100px;">             <option value=0>--select--</option>                  <option  *ngfor="let item of allsubcategorylist" [ngvalue]="item.id" >{{item.subcategory}}</option>              </select>         </td>         <td>           <select style="width:100px;">             <option value=0>--select--</option>                 <option  *ngfor="let item of allpartnerlist" [ngvalue]="item.id" >{{item.partnername}}</option>             </select>         </td>       </tr>     </tbody>   </table> </div> 

any highly appreciated.

the problem needed array of states... (in plunker listed in comments below). can apply same code in original question.

list-component.ts tweaks

export class countrylistcomponent {    states: state[] = [[] state[],[] state[],[] state[]]     onselect(value,index) {     this.states[index] = this._dataservice.getstates().       filter((item)=> item.countryid == value);   } } 

list-component.html tweak

• updated: after this exchange @günterzöchbauer :
• use (ngmodelchange) on (change)

---

  <select [(ngmodel)]="selectedcountry[number].id"     (ngmodelchange)="onselect($event, number)"> 

fixed plunker