Adding CSS class to an existing button


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?

I saw a lot of suggestions online but they replied mostly on pure javascript. such as: (this was implemented in my .ts file)

           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.

1 Like

thank you for your reply!
I have just tried using ngClass (used as reference)


.html file:

    <h2 ng-class="textColor">Score Multiplier</h2>
        <ion-grid class="rates_container">
                <button #buttoncolor ion-button round (click)="changeColor()" class="roundClicked">x1</button>

.ts file:

public textColor: any;

    changeColor() {
        alert("function changecolor");
        this.textColor = 'red';

.scss file:

    .red {
        background: #f53d3d;

However when the button is clicked this does not have any effect on the text.

1 Like

Don’t use kebab-case. You want ngClass, not ng-class. It also must be surrounded in square brackets to be bound. textColor should be a string, not any.

1 Like

Just applied your suggestion and it worked beautifully!!
Thanks a lot!!