Button Click Event to extend SCSS class in Angular-CodePudding

I have a button which when clicked , should change the background colour and again back to default when clicked again. The class is to be extended basically.I already have a class 'mainbody' for the div , and i want to extend with 'bgnight' when the button is clicked. Again when clicked , should be back to default, that is without bgnight. Is it possible, if not what other options are there?

     SCSS
     .mainbody{
      @extend .bgnight;
       }
     HTML

    <div >
    <button type="submit" >Submit</button>
    TS

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

CodePudding user response：

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

<div  [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.