Issue
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 class="mainbody">
<button type="submit" class="btn btn-primary">Submit</button>
TS
export class AppComponent {
title = 'salesapp';
ngOnInit(){
}
}
Solution
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 By - John Woodruff
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.