mouseout() not firing on disappearing objects
Solution 1:
I'm not sure what this.state.jumpToConfigStep(100) does but you could do this:
<div (mouseover)="ratingEmojis.right='fas'" (mouseout)="ratingEmojis.right='far'" (click)="rightClicked()" class="iconButton">
<fa-icon style='pointer-events: none' [icon]="[ratingEmojis.right, 'frown-open']" size="6x" ></fa-icon>
</div>
rightClicked() {
this.ratingEmojis.right = 'frown-open';
this.state.jumpToConfigStep(100)
}
Though most of this looks like it could be achieved with css and :hover
Solution 2:
Just change it to default icon when onclick is fired