I am trying to add a CSS class to a button in case a certain condition was met. (this class simply color the bolor the button red)
<button #button1 ion-button [disabled]="disabled1" round (click)="goToQuestion('1')" class="roundClicked">x1</button>
How is it possible to do that?
document.getElementById('#button1').className = 'red';
however its giving me an error due to className.
any suggestion would be really appreciated!
NOTE: i am interested in the idea/solution itself on how to add and remove css class to ionic elements, other then the above example.
ngClass. Do not use direct DOM access in Angular apps.
thank you for your reply!
I have just tried using ngClass (used https://forum.ionicframework.com/t/ionic2-ng-class-on-ion-row-scss/48935/6 as reference)
<h2 ng-class="textColor">Score Multiplier</h2>
<button #buttoncolor ion-button round (click)="changeColor()" class="roundClicked">x1</button>
public textColor: any;
this.textColor = 'red';
However when the button is clicked this does not have any effect on the text.
Don’t use kebab-case. You want
ng-class. It also must be surrounded in square brackets to be bound.
textColor should be a
Just applied your suggestion and it worked beautifully!!
Thanks a lot!!