[Solved] how do I dynamically toggle a button image using different font-awesome images? [closed]

Question

You can use simple boolean value in the component and *ngIf statement in HTML to show/hide necessary icon (or any other element), which will be based on that boolean value. You also need to add (click)="isPlaying = !isPlaying" to that icons to trigger the state:

HTML:

<i class="fa fa-play-circle" aria-hidden="true" *ngIf="!isPlaying" (click)="isPlaying = !isPlaying"></i>
<i class="fa fa-pause-circle" aria-hidden="true" *ngIf="isPlaying" (click)="isPlaying = !isPlaying"></i>

Component:

public isPlaying: boolean = false;

If your logic will be so simple as in my example, it’s OK too keep the smallest logic in HTML, but if not – better create a trigger method inside your component.

Accepted Answer

You can use simple boolean value in the component and *ngIf statement in HTML to show/hide necessary icon (or any other element), which will be based on that boolean value. You also need to add (click)="isPlaying = !isPlaying" to that icons to trigger the state:

HTML:

<i class="fa fa-play-circle" aria-hidden="true" *ngIf="!isPlaying" (click)="isPlaying = !isPlaying"></i>
<i class="fa fa-pause-circle" aria-hidden="true" *ngIf="isPlaying" (click)="isPlaying = !isPlaying"></i>

Component:

public isPlaying: boolean = false;

If your logic will be so simple as in my example, it’s OK too keep the smallest logic in HTML, but if not – better create a trigger method inside your component.