Cascading drop down in table using Angular 4 typescript

Issue

I am new to angular and developing my very first application using angular 4 and typescript

I want to use Cascading drop-down in table using angular4

Currently, I have been working on it but when I change drop down from the first row it is a binding second level dropdown for all row.

I want to bind the second level drop down of the row from the first level drop down is changed.

I have some idea on my mind to achieve this but I guess It might be a patch so I am very curious to know any proper way of angular to achieve this.

ts file code

import { Component, OnInit, EventEmitter } from '@angular/core';
import { Category } from '../model/Category';
import { SubCategory } from '../model/subCategory';
import { Partner } from '../model/partner';
import { GetdataService } from '../../../../Server/api/Getdata.service';
import { Router } from '@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 help will be highly appreciated.

Solution

The problem is you needed an array of states... (in the plunker you listed in the comments below). You can probably apply same to your code in original question.

list-component.ts tweaks

export class CountryListComponent {

  states: State[] = [[] as State[],[] as State[],[] as State[]] 

  onSelect(value,index) {
    this.states[index] = this._dataService.getStates().
      filter((item)=> item.countryid == value);
  }
}

list-component.html tweak

• Updated: after this exchange with @GünterZöchbauer :
• Use (ngModelChange) over (change)

---

  <select [(ngModel)]="selectedCountry[number].id"
    (ngModelChange)="onSelect($event, number)">

Fixed Plunker

Answered By - JGFMK