0

I am trying to get the value from Public api, and binding those value in the html but I need to show two different icons for two different values which I am binding using ngFor in the html.

My Array Response

ArrayValue
: 
Array(2)
0
: 
{icon: 'fas fa-<insert font awesome icon name>', text: 'Flowers'}
1
: 
{icon: 'fas fa-<insert font awesome icon name>', text: 'Animals'}

HTML:

<div class="variety">
  <div *ngFor="let show of ArrayValue">{{show.text}}</div>
</div>

How can I add two different font awsome icons for show.text(Flowers) and show.text(Animals) in the above ngFor, any answers ?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Arun
  • 25
  • 8
  • Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – mplungjan Nov 27 '22 at 19:17

1 Answers1

0
<div class="variety">
  <div *ngFor="let show of ArrayValue">
     <i class="fas" [ngClass]="'fa-' + show.text">
  </div>
</div>

Alternatively: you can do the following.

Courtesy: https://stackoverflow.com/a/49027045/2533109

<div class="variety">
  <div *ngFor="let show of ArrayValue">
     <i class="fas" ngClass="fa-{{ show.text}}">
  </div>
</div>

or even this way.

<i class="fas fa-{{ show.text}}">
Dinesh
  • 1,711
  • 2
  • 20
  • 41