[SOLVED] How can I change Font Awesome icon and Text on condition?

How can I change Font Awesome icon and Text on condition?

component.html

<i [title]="CardData.quantity > 1 || _ShippingVariable > 1 ? CannotShip : FreeShipping" 
   [ngClass]="{'fa': true,'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',}">
</i>

ShippingVairable is Coming From component.ts

So what I am trying to do that is _ShippingVariable=0 then i will get "(CrossFontAwesomeIcon)CannotShip:It should be in red color". And if _ShippingVariable=1 then I will get (CheckFontAwesomeIcon)FreeShipping:It should be in green color".

And Please Any resource material or tutorial where I can clear my Angular NgClass because I want to change CSS dynamically on conditions.

Solution

Its a simple understanding: Take a look at this

// In component.ts file lets say you have 2 boolean flags
boolFlag1: boolean = true;
boolFlag2: boolean = false;

// In HTML / CSS you can have any class

// You want a class 'class-1' to be present all the times, 'class-2' to be present when boolFlag1 is true and 'class-3' when boolFlag2 is true

Then you can do something like this

<div 
   class="class-1" // This class will be present at all times irrespective of the conditions
  [class.class-2]="boolFlag1" // Class2 will be applied when boolFlag1 is true
  [class.class-3]="boolFlag2" // Class3 will be applied when boolFlag2 is true
>
</div>

// In the above example, class-3 will not be applied since i made boolFlag2 to be false