I have 2 option sets (picklists) and I want to populate one based on the selection from the other. For example, consider the arrays in the ts file:
carsArray: { id: number, name: string }[] = [
{ "id": 1, "name": "Car1" },
{ "id": 2, "name": "Car2" },
{ "id": 3, "name": "Car3" }
];
carModulesArray:{ id: number, carId:number ,name: string }[] = [
{ "id": 1, "carId":1, "name": "Module1" },
{ "id": 2, "carId":1, "name": "Module2" },
{ "id": 3, "carId":1,"name": "Module3" },
{ "id": 4, "carId":2,"name": "Module4" },
{ "id": 5, "carId":3,"name": "Module5" }
];
And in the HTML template:
<select id='cars'>
<option *ngFor="let c of carsArray"
value="{{c.id}}">{{c.name}}</option>
</select>
<select id='modules'>
<option *ngFor="let m of carModulesArray"
value="{{m.id}}">{{m.name}}</option>
</select>
How do I dynamically populate the second picklist (modules) based on the selection from the first picklist (cars)? So, after selecting car 1, only modules 1, 2, and 3 should be visible. Similarly, selecting car 2 (or car 3) should show module 2 (or module 3).
Thank you for your assistance in advance.