My select dropdown is populated dynamically with options fetched from a service using *ngFor. I am looking to customize the order of these options. Can this be achieved through Angular code? The array structure is as follows:
console.log(this.paymentTypeData);
Array(5)
0: {value: "DAILY", code: "D", label: "Daily"}
1: {value: "SINGLE_TIER", code: "ST", label: "Single Tier"}
2: {value: "MULTI_TIER", code: "MT", label: "Multi Tier"}
3: {value: "NO_DISCOUNT", code: "ND", label: "No Discount"}
4: {value: "EOM", code: "EOM", label: "End of Month"}
length: 5
__proto__: Array(0)
The Current Order is:
- Daily
- Single Tier
- Multi Tier
- No Discount
- End of Month
However, I would like to display them in the following order:
- No Discount
- Single Tier
- Daily
- Multi Tier
- End of Month
HTML:
<select
class="form-control">
<option *ngFor="let list of paymentTypeData" [ngValue]="list.code">
{{list.label}}
</option>
</select>
Typescript:
public paymentTypeData: any;
this.supplier.getPayTermTypes().subscribe(paymentTypes => {
this.paymentTypeData = paymentTypes;
});