I'm using an ionic ion-icon
<ion-icon name="checkmark" [class]="condition ? 'class1' : ''"></ion-icon>
I'd like to add an extra class if the condition is true, but dont add the extra class if the condition is false.
Problem is, if the condition is false it removes all the pre-defined classes on the icon from Ionic Framework.
Try to avoid binding to class directly.
Use either
[class.class1]="condition"
or
[ngClass]="condition ? 'class1' : ''"
With binding to class you explicitly bind the whole property value, instead of a single class.
Maybe It's an "oldie", but this is how I solved my problem in case someone's looking an example of how to append classes conditionally to existing ones.
Basically I wanted to keep the fa bootstrap class applied, and only change the chevron from right to left if the side bar is collapsed or not. Also worked with a string literal and a terenary but get's messy, this way is much better (I think).
<button (click)="showHideSideClicked()">
<span class="fa" [ngClass]="{'fa-chevron-left': isSideNavVisible, 'fa-chevron-right': !isSideNavVisible}"></span>
</button>
More about it @ NgClass
