dynamically change icon based on the based on the text using angular 8 with font awesome

0
votes

I was trying to do dynamically change icon based on the value which is there in span

Here is my HTML actually in the version text there only two values will come

  1. Active if it is active success icon should come
  2. InActive if it is inactive Warning icon should come

I am not sure how to use ngclass here to get the value.

        <div class="pl-2">
            <div class="version-box">
                <i class="fa fa-check-circle text-warning ml-1"></i> 
                <i class="fa fa-check-circle text-success ml-1"></i>
                <span class="version-label">{{selectedVersion.versionText}}</span></div>
        </div>

Please let me know how to bring that

1
angularfont-awesomeangular8
Are you looking for dynamic class in <i> ? like this ? <i class="fa fa-check-circle ml-1" [ngClass]="{selectedVersion.versionText == 'Active' ? 'text-warning': 'text-success' }"></i> - Rahul Raveendran
yes but the text-warning & text-success will be from font awesome icon right - Mr.M
if that's the case you can use *ngIf like <span *ngIf="selectedVersion.versionText == 'Active' "> <i class="fa fa-check-circle text-warning ml-1"></i> </span> - Rahul Raveendran
I tried like this <div class="version-box"><span *ngIf="selectedVersion.versionText == 'active' "> <i class="fa fa-check-circle text-warning ml-1"></i>{{selectedVersion.versionText}}</span> </div> the value itself not coming now - Mr.M

1 Answers

0
votes

Since Font-Awesome uses classes: Just use the [ngClass] attribute:

<i class="fa fa-check-circle " [ngClass]="classToggle == true ? 'text-warning' : 'text-success'">

You can change any classes you like this way.

A quick Blitz