I am currently working on implementing two drop down menus in my Angular application. One is labeled shop list and the other is labeled godown list. The issue I am facing is that when I select a shop, the data updates correctly, but when I select a Godown, the data does not change. Both drop downs are present in the HTML code.
I suspect that the problem lies within my TypeScript file (Onselect) because even though I have implemented 2 drop downs in the HTML, I only have one function in my TypeScript file. As I am new to Angular development, any feedback on the drawbacks of this approach would be helpful:
ngOnInit() {
// Code for populating Shop details
}
//Code for populating Godown details
onSelect(shopid: number, godownid: number) {
// Code for handling dropdown selections
}
// Separate method creation query
HTML code snippet:
<span>
<select class="formcontrol" name="outletDetail" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Shop</option>
<option *ngFor="let outletDetail of outletDetails" value={{outletDetail.ShopID}}>{{outletDetail.ShopName}}</option>
</select>
</span>
<span>
<select class="formcontrol" name="godowndata" (change)="onSelect($event.target.value)">
<option value="0" disabled>Select a Godown</option>
<option *ngFor="let godowndata of GodownDetails" value={{godowndata.GodownId}}>{{godowndata.GodownName}}</option>
</select>
</span>