Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag.
Here is my current component setup:
<select name="drpAccounts" class="form-control" [(ngModel)]="accountSelected" (change)="handleChangedDrpAccount($event)">
<option *ngFor="let account of accounts" [ngValue]="account">
{{ account.formattedNumber }}
</option>
</select>
I've explored various projects and libraries on github, but I am seeking a simpler solution. Thank you in advance.
EDIT:
After experimenting with the code snippet below
<select name="drpAccounts" class="form-control" [(ngModel)]="accountSelected" (change)="handleChangedDrpAccount($event)">
<option style="background-image:url(assets/img/country-flag.png);" *ngFor="let account of accounts" [ngValue]="account">
{{ account.formattedNumber }}
</option>
</select>
I have discovered that it only works when I add the style within the select tag
<select style="background-image:url(assets/img/country-flag.png);" ... >
and this is not the desired outcome