CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
Daniel Torres Laserna
Daniel Torres Laserna

Reputation: 424

PrimeNG SelectButton with TEMPLATE don't show correctly

I'm trying to implement something similar to the example that PrimeNG shows on his website PrimeNG - SelectButton in the section Custom Template. I'm trying to replicate the same. This is my code:

component.ts

metodos: any[];
selectedMetodo;

constructor() {
    this.metodos = [
      { 'name': 'Tarjeta de crédito','flag': 'pse.png' },
      { 'name': 'PSE', 'flag': 'pse.png' },
      { 'name': 'Efectivo', 'flag': 'pse.png'}
    ];
  }

component.html

<p-selectButton [options]="metodos" [(ngModel)]="selectedMetodo">
    <ng-template let-item>
        <img src="assets/img/pagos/{{item.flag}}" />
        <span>{{item.name}}</span>
    </ng-template>
</p-selectButton>

I have this result: web result

Any suggestion??

Upvotes: 1

Views: 1771

Answers (2)

בלימי בוימל
בלימי בוימל

Reputation: 41

write this:

<p-selectButton [options]="metodos" [(ngModel)]="selectedMetodo" optionLabel="name">
<ng-template let-item>
    <img src="assets/img/pagos/{{item.value.flag}}" />
    <span>{{item.value.name}}</span>
</ng-template>

Upvotes: 1

Rukshan Dangalla
Rukshan Dangalla

Reputation: 2590

It's a bug in primeng 5.2.0 and below versions. You have to update your primeng version to 5.2.7 Then you can resolve this issue.

Here is stackblitz. Image broken but you can see the actual result.

Update

Fixed image issue as well.

Upvotes: 0

Related Questions