How to add css class styles on button click in Angular?

Question

I have a button which when clicked , should change the background colour and the fint colours.Back to default when clicked again.So should change from light to dark mode. The CSS classes are .bgdark and .textlight. These needs to added to the 'mainbody' for dark mode.

     HTML
    <div class="mainbody">
    <button type="submit" class="btn btn-primary">Submit</button>
     </div>
    TS

      export class AppComponent {
       title = 'salesapp';
           ngOnInit(){
                 }
                  }

John Woodruff · Accepted Answer · 2022-07-10 00:43:25Z

2

You can use binding to class names in order to dynamically add or remove them. You would implement the markup like so:

<div class="mainbody" [class.bgnight]="haveClass">
    <button (click)="haveClass = !haveClass">Submit</button>
</div>

And your component would be like so:

export class AppComponent {
    haveClass = false;
}

Your button will toggle the haveClass boolean each time you click on it, which will add and remove the class from your div as expected.

answered Jul 10, 2022 at 0:43

John Woodruff

1,67616 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sz2013 Over a year ago

Hi, thank you it has worked. If I have multiple class to bind, i can use ngClass. However how does it work with the click event?

John Woodruff Over a year ago

If you want to get more complex you would just swap out the click handler for a function that does more complex logic. Basically each class is tied to a value on your component that is true or false, and you simply toggle those as needed.

Sz2013 Over a year ago

Hi, can you please elaborate with code, will be helpful . Thanks

Collectives™ on Stack Overflow

How to add css class styles on button click in Angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related