PrimeNG dropdown with image

Question

I am trying to implement PrimeNG's dropdown with images in front of option label, but the images are not displayed.

In the .ts file I have the options array like:

langOptions = [
        {label: 'hungarian', value: 'hu', imgSrc: './assets/img/flags/flag_hu.svg'},
        {label: 'english', value: 'en', imgSrc: './assets/img/flags/flag_en.svg'} 
    ];

in the template:

<form [formGroup]="langChangeForm">
  <p-dropdown [options]="langOptions" optionLabel="label" (change)="onChange($event.target.value)">
    <ng-template let-country pTemplate="item">
      <div>
        <img [src]="country.imgSrc" />
        <div>{{country.label | lang}}</div>
      </div>
    </ng-template>
   </p-dropdown>
</form>

tried <img src="{{country.imgSrc}}" /> too, no success... If I replace the property binding [src]="country.imgSrc" with src="./assets/img/flags/flag_en.svg" the image loads.

Any idea how to make this work? thanks!

I don't reproduce your problem: demo. Which PrimeNG version do you use? — Antikhippe
^10.0.0-rc.3. Thank you for your efforts, but I've found a quite acceptable workaround, I'll post it soon. — szelelaci

szelelaci szelelaci · Accepted Answer · 2020-11-19T16:16:38

I came up with a workaround

component.ts:

interface LangOption {
    label: string;
    value:string;
}

@Component({
    selector: 'app-language-selector',
    templateUrl: './language-selector.component.html',
    styleUrls: ['./language-selector.component.css']
})
export class LanguageSelectorComponent implements OnInit {
    langChangeForm: FormGroup;
    selectedLang: LangOption;
    flagHu: string = './assets/img/flags/flag_hu.svg';
    flagEn: string = './assets/img/flags/flag_en.svg';
    langOptions: LangOption[] = [
        {label: 'magyar', value: 'hu'},
        {label: 'english', value: 'en'}  
    ];

    ngOnInit() { 
        this.initializeLangChangeForm();
    }

    initializeLangChangeForm() {
        this.langChangeForm = new FormGroup({
            'lang': new FormControl(this.selectedLang),
        });
    }
...
}

component.html:

<form [formGroup]="langChangeForm">
  <p-dropdown
    [options]="langOptions" 
    optionLabel="label" 
    optionValue="value" 
    formControlName="lang"
    styleClass="lang-change-dropdown"
    (onChange)="onChange()">
    <ng-template pTemplate="selectedItem">
        <div class="flex-row"  *ngIf="selectedLang">
          <img class="lang-change-img" [src]="selectedLang.label == 'magyar' ? flagHu : flagEn" alt="">
            <div class="lang-change-option-text selected-lang center">{{selectedLang.label}}</div>
        </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="flex-row">
          <img class="lang-change-img" [src]="country.label == 'magyar' ? flagHu : flagEn" alt="">
          <div class="lang-change-option-text center">{{country.label}}</div>
        </div>
    </ng-template>
  </p-dropdown>
</form>

It would not be ok if I would have more options than two, but in this case it works just fine. I got sick of trying to get work the example from PrimeNG website..

PrimeNG dropdown with image

1 Answers