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 ?

Nikhil · Accepted Answer · 2019-09-26 02:31:16Z

3

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>

edited Sep 26, 2019 at 2:31

answered Sep 26, 2019 at 2:11

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hafizi hamid Over a year ago

can you explain more about approach 2, yeah and it is work

Nikhil Over a year ago

Sure @jajanato. We are using map() method to add icon property to each object in savedCreditCard array. Check out MDN documentation on Array.map() to see how it works. Then we are using this image path as icon in HTML when displaying all the cards. I hope this helped. Let me know if you have any questions.

hafizi hamid Over a year ago

return {...card, "icon": icon}; this code make me confuse, why we had ... and it can be simpler like this return {..card, icon};

Collectives™ on Stack Overflow

bind image dynamically Angular 8

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related