bind image dynamically Angular 8

Question

I have object array which I need to add image icon dynamically based on type of credit card,

ts file

  icon: any;

  savedCreditCard = 
  [
  {
    cardExpiryDateFormat: "05/xx",
    cardNumberLast: "00xx",
    cardId: "xxx",
    cardType: "Mastercard",
    cardExpiryDate: "xx05",
    paymentChannelId: 9,
    cardNumberMasked: "512345XXXXXXXXXX"
  },
  {
    cardExpiryDateFormat: "11/xx",
    cardNumberLast: "58xx",
    cardId: "xxx",
    cardType: "Amex",
    cardExpiryDate: "xx11",
    paymentChannelId: 16,
    cardNumberMasked: "379185XXXXXXXXX"
  }
]

  ngOnInit() {
        this.savedCreditCard.forEach((x => {
      if (x.cardType === 'Mastercard') {
        this.icon = '../../assets/svg/logo-mastercard.svg';
      } else if (x.cardType === 'Amex') {
        this.icon = '../../assets/svg/icon-amex.svg';
      }
    })
    );
  }

and on HTML template, I try to binding image dynamically based on type of credit card, this is what I had tried,

html file

    <div class="flex-float">
      <div class="float-end">
        <img class="select--icon" [src]="icon" />
        <p class="selected--desc is-hidden-mobile-xs">
          {{ selectedCard.cardType }}
        </p>
      </div>
    </div>

the problem is I only got same icon eventhough is mastercard or amex, I want to reproduce on stackblitz, but it not supported static image, anyone know how to solve this or any suggestion?

Answer 1

There is just one icon variable and it is being reassigned a new icon path on each forEach() iteration. And this one icon is used for all cards, therefore only one image is being displayed.

Approach 1:

You could have an object of icons like

var icons = {
 'Mastercard': '../../assets/svg/logo-mastercard.svg',
 'Amex': '../../assets/svg/icon-amex.svg'
}; 

And in HTML, just use the appropriate icon based on card type.

<div class="flex-float">
  <div class="float-end">
    <img class="select--icon" [src]="icons[selectedCard.cardType]" />
      <p class="selected--desc is-hidden-mobile-xs">
        {{ selectedCard.cardType }}
      </p>
  </div>
</div>

No need to make any changes to saveCreditCard array in ngOnInit() .

Approach 2:

If you want to store icon on each object in saveCreditCard , then Array.map() can be used.

In ngOnInit() , assign icon to each credit card.

ngOnInit() {
  this.savedCreditCard = this.savedCreditCard.map(card => {
    let icon;
    if (card.cardType === 'Mastercard') {
      icon = '../../assets/svg/logo-mastercard.svg';
    } else if (card.cardType === 'Amex') {
      icon = '../../assets/svg/icon-amex.svg';
    }

    return {...card, "icon": icon};
  }); 
}

Then in HTML, use the card's icon property.

<div class="flex-float">
  <div class="float-end">
    <img class="select--icon" [src]="selectedCard.icon" />
      <p class="selected--desc is-hidden-mobile-xs">
        {{ selectedCard.cardType }}
      </p>
  </div>
</div>