Changing font awesome icons through Angular components - html

Question

I am using font-awesome version 4.7.0 with Angular 5. When I add an icon to a screen the icon immediately changes from tag to and I cannot access its class from an Angular component which is what I want to do.
The resulting behavior is that the first icon defined is shown properly but any subsequent changes I make that should be reflected on the UI with a change of the font awesome icon are not shown at all.
The specific problem is that I wan the icons to change when sorting a table. The initial icon is set up to be fa-sort, and it displays correctly, but when clicking on the table header, the content gets sorted and updated but the icons dont change to fa-sort-up or fa-sort-down. I've tested the logic and it works properly.
The current HTML code which should be performing this action looks like this:
<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>

Answer 1

This is because fontawesome replaces your tag with . To change icons use this template (use in class that you need):
<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>

Answer 2

Try maybe assigning the icon within the component code itself, such as:
in Component
getIcon(){
sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' :
'icon-sort-down'
}
I think it has to do with change detection, or you can manually trigger it after you sort, by importing change detection.
ex:
`constructor(cd: ChangeDetectorRef) {}`
and then in your code,
this.cd.detectChanges();