As a newcomer to Angular, I am in the process of building my first application using Angular 4 and TypeScript.
I would like to implement Cascading dropdowns within a table using Angular 4.
Currently, I am facing an issue where changing the dropdown selection in one row affects all other rows as well.
My goal is to have the second level dropdown in each row update only when the corresponding first level dropdown is changed.
I have some ideas on how to tackle this, but I believe there might be a more elegant solution using Angular methods. Any guidance on achieving this functionality using Angular would be greatly appreciated.
Below is a snippet of the TypeScript 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;
}
);
}
}
And here is a snippet of the HTML code:
<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 assistance or advice on this matter would be highly appreciated.