How to place image on dropdown options in Angular 6

Question

I want to put an icon or image beside the text in drop down, but it is not appearing.

I am using Angular 6, I have tried many solutions but none worked, I just want to put a flag next to the text in a dropdown.

<select class="form-control " name="country" required>
    <option *ngFor="let country of countries" [value]="country.name">
        <img class="" src="../../assets/icons/us.svg" />
        {{country.name}}
    </option>
</select>

possible duplicate of https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list — jitender, Aug 05 '19 at 08:04
you might want to use Angular-Material: https://stackoverflow.com/questions/57003063 — Akber Iqbal, Aug 06 '19 at 08:02

score 0 · Answer 1 · answered Nov 22 '19 at 07:45

How to place image on dropdown options in Angular 6,7,8 [Solved]

how to insert image in select options in angular

step1: Firts, Install npm i ng-select2 npm package.

step2 : Add declaration to your app.module.ts

import { NgSelect2Module } from 'ng-select2';

    @NgModule({
      imports: [
        ....,
        NgSelect2Module
      ],
      ...
    })

step3: Add code to your html file

 <ng-select2  [data]="managersList" name="users"
     formControlName="users" [options]="options">
    </ng-select2>

step4: add code ts file

export class dropDownImage implements OnInit {
  public exampleData: Array<Select2OptionData>;
  public options: Options;

  constructor(private service: DataService) { }

  ngOnInit() {
    this.exampleData = this.service.getTemplateList();
    this.options = {
      width: '300',
      templateResult: this.templateResult,
      templateSelection: this.templateSelection
    };
  }

  // function for result template
  public templateResult = (state: Select2OptionData): JQuery | string => {
    if (!state.id) {
      return state.text;
    }

    let image = '<span class="image"></span>';

    if (state.additional.image) {
      image = '<span class="image"><img src="' + state.additional.image + '"</span>';
    }

    return jQuery('<span><b>' + state.additional.winner + '.</b> ' + image + ' ' + state.text + '</span>');
  }

  // function for selection template
  public templateSelection = (state: Select2OptionData): JQuery | string => {
    if (!state.id) {
      return state.text;
    }

    return jQuery('<span><b>' + state.additional.winner + '.</b> ' + state.text + '</span>');
  }

}

step 5 : your Json responce like ,

userslis ==>  [{
                "id":"1",
                 "text":"murali",
                 "image":"--path--"
               },
               {
                "id":"1",
                 "text":"murali_1",
                 "image":"--path--"
               },
               {
                "id":"1",
                 "text":"murali_2",
                 "image":"--path--"
               }]

score 0 · Answer 2 · answered Nov 22 '19 at 08:05

By using primeNg we can create dropdown with images in angular6.

1. Import primeNg in project

npm install primeng --save
npm install primeicons --save

2. Dependencies

"dependencies": { //... "primeng": "^7.0.0", "primeicons": "^1.0.0" },

3.Style configuration

"styles": [
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
],

4.HTML Changes

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" filter="true">
    <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
    </ng-template>
</p-dropdown>

5. path

assets/showcase/images/demo/car/{{item.label}}.png

How to place image on dropdown options in Angular 6

2 Answers2