I have the following css
#auction-history div:after {
content: "";
width: 100%;
height: 8px;
position: absolute;
bottom: -8px;
background: #bad3e0;
left: 0;
}
this css will be applied always on my div.
I need to have this pseudoclass on condition in my Html based on boolean.
So when i have
isLoading = true or false
i need to bind to this is loading property and if it is true - I don't want to appky thius pseudeo class on my div if it is false I need to apply
I know that I can apply classes in Angular on condition with ngClass
but I don't know how can i do this with pseudo classes.
CodePudding user response:
You can create a additional class with ::after
to handle this.
Example:
HTML
<p [class.show--after]="isLoading == true">My name is Adrita</p>
CSS
.show--after::after {
content: ' - After content';
}
CodePudding user response:
Just "re-think" your css, e.g. you can use "not"
#auction-history:not(.loading) div:after {
content: "";
...
}
Your .html
<div #auction-history [class.loading]="yourVariable">...</div>
or a simple class
#auction-history.not-loading div:after {
content: "";
...
}
<div #auction-history [class.not-loading]="yourVariable">...</div>
NOTE: You can use [ngClass]
or [ngStyle]
or [style.property]="variable"
or [class.classname]="variable"