How can I apply pseudo class by condition in Angular?

Question

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.

Answer 1

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"

Answer 2

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';
 }

StackBiltz Demo