Add images with in dropdown list in *ngFor Asked Aug 19 '19 at 13:16 Active Aug 20 '19 at 06:15 Viewed 3,563 times 0 Im trying to add image in my dropdown using *ngFor but Im unable to show the image icon, but can show text, Any idea how to solve this ? this is what I had tried : html <form [formGroup]="countryForm"> <select formControlName="countryControl" (change)="optionSelected($event.value)"> <option [value]="country" *ngFor="let country of countries"><img class="icon-custom" [src]="country.icon" [alt]="country.viewValue">{{country.viewValue}}</option></select> </form> ts countries = [ { value: 'xxx-0', viewValue: 'xxx (+xx)', code: 'xx', icon: '../../assets/svg/icon-cc-add-blue.svg' }, { value: 'yyy-0', viewValue: 'yyy (+yy)', code: 'yy', icon: '../../assets/svg/icon-cc-add-blue.svg' } ]; optionSelected(event) { this.selectedIcon = event.value.icon; } I need to solve this using typesript/angular without using any jquery plugin angular drop-down-menu html-select angular-reactive-forms ngfor edited Aug 20 '19 at 05:31 hafizi hamid asked Aug 19 '19 at 13:16 hafizi hamid 405 2 20 41 1 Possible duplicate of [How to add small thumbnails to \`\` elements in a \`\` list?](https://stackoverflow.com/questions/31697386/how-to-add-small-thumbnails-to-option-elements-in-a-select-list) – igor_c Aug 19 '19 at 13:20

Answer 1

As mentioned in the comment below by @hazifi. The option tag only supports text - Link here. You could use a background-image but it would limit you in the positioning of other elements.

How to add images in select list?

Probably the best solution also mentioned in the comments is using angular material:

How to implement angular 7 drop-down with images?