Hello everyone. I am working on an angular project that includes a product page. Some products on this page can have multiple types, like so:
Product ID-1 Type ID-1 Price-$10
Product ID-1 Type ID-2 Price-$15
Product ID-1 Type ID-3 Price-$25
In this scenario, I need to display the types in a dropdown menu. When a type is selected, I want to update the price accordingly. How can I retrieve the selected Type ID and Price in order to send it to the web API from my component.ts file?
Using Angular-7 CLI.
Product.component.html
<h5 class="product-price">**I WANT TO SHOW THE SELECTED DROP-DOWN VALUE PRICE HERE**</h5>
<h5>Select Type</h5>
<select
[(ngModel)]="selectedType" >
<option
*ngFor="let type of productType"
[ngValue]="type.id">
{{type.name}}
</option>
</select>
Product.component.ts
selectedType: { id: any; name:any ; price:any };
productType:Array<Object> = [
{id: 1, name: "100 ml", price:2000},
{id: 2, name: "200 ml", price:4000},
{id: 3, name: "300 ml", price:3000}
];