Adding CSS class to an existing button

Ionic Framework ionic-v3
1

Hello,

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)

            <ion-col>
                <button #button1 ion-button [disabled]="disabled1" round (click)="goToQuestion('1')" class="roundClicked">x1</button>
            </ion-col>

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!

Thanks

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.

2

ngClass. Do not use direct DOM access in Angular apps.

1 Like
3

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)

Code:

.html file:

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

.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
4

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
5

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