Dynamically change icon in angular 6

Question

I am trying to change the font-awesome icon depending on a certain value but it stays set to the original icon even after my model has changed. Here is my code

In Controller

if (foo.change < 0) {
   foo.icon = "fa fa-sort-down";
} else {
  foo.icon = "fas fa-sort-up";
}

In my HTML

<i [className]="foo.icon"></i>

Is there a way to update an icon dynamically based on a model or a check?

Answer 1

use [ngClass]

<i  [ngClass]="foo.change < 0 ? 'fa fa-sort-down' : 'fas fa-sort-up'"></i>