I am adding a class to 2 div to toggle sidebar header using [ngClass] how do i remove those class when enlarge the screen.
The problem is on widening the screen it remains there only because class is not removed. How do i remove the class?
On adding class [ngClass]="{'menu-push-onscreen': show}" it will toggle and when i widen screen it will be there itself how shall i remove that?
show: boolean = false;
onToggleHeader(){
this.show=!this.show;
}
Just set the [ngClass] binding to null. Here is an example:
In your component.html:
<div [ngClass]="myClass"></div>
In your component class:
...
// Declare varibale
myClass:string;
// Set some variable to true if the screen widening
if(isScreenWidening){
this.myClass = null;
}
...
@media screen and (max-width: 600px) { // this is for screen width less than equal to 600px
.yourClass{
// remove all the properties you might have set
}
}
If you need to add more media queries as per screen size change the max or min width.
