fontawesome onclick icon change angular using material table

user_4659026 0
Viewed 178

I want to fill favorite icon when it's empty. While click on the favorite icon i have to display solid favorite icon.

I tried like below code 

    <span class="icon iconVisibile" (click)="isClicked()">
            <i class="fa-star"[ngClass]="isSelectedFav ? 'fas' : 'far'"></i>
    </span>

ts

   public isSelected:boolean = false;
   isClicked(){
     this.isSelected = true;
     console.log(this.isSelected);
   }

with above code that is not working please let me know what I am doing wrong here

angular8 angular html javascript
1 Answers

Demo Your problem seems that font awesome return i element tag to svg. That is why you can't change it. you should close autoReplaceSvg property in font awesome

put below ones in index.html

<script type="text/javascript">
   window.FontAwesomeConfig = { autoReplaceSvg: false }
</script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />

component.ts

public isSelected:boolean = false;
isClicked(){
   this.isSelected = true;
}

html 

<span class="icon iconVisibile" (click)="isClicked()">
     <i class="fa-star"[ngClass]="isSelected ? 'fas' : 'far'"></i>
</span>
user_25762540
Related