How to pass the value for the dropdown from using each method and input decorator in angular 14

Question

I'm trying to set the values for the dropdown using foreach method, but it's not working properly. It is loading 5 times for each dropdown. I want to show the proper value for the dropdown. Example: For Car dropdown I want to show only the value of Car from the array. Same like for others. How to do it?

main.component.html:

<div
  class="custom-select"
  style="width:400px;"
  *ngFor="let v of vehicle; index as i"
  >
  <p>{{ v }}</p>
  <app-vehicle [data]="travals"></app-vehicle>
</div>

Demo: https://stackblitz.com/edit/angular-ivy-yxfoyl?file=src%2Fapp%2Fmain%2Fmain.component.html

Answer 1

This's what you need?

vehicle.component.html

<select>
  <option
    *ngFor="let vehicleType of data; index as i"
    value="{{ vehicleType }}"
    label="{{ vehicleType }}"
  ></option>
</select>

main.component.html

<div
  class="custom-select"
  style="width:400px;"
  *ngFor="let v of vehicle; index as i"
>
  <p>{{ v }}</p>
  <app-vehicle [data]="travals[v]"></app-vehicle>
</div>