CODEWITHSUNDEEP
cssangular
user3334871
user3334871

Reputation: 1361

Angular 2 - Dynamically change an after CSS element

We are working on a workflow element in our web application, but running into problems trying to update background colors to indicate completion. The Workflow bar is a rectangle with a sideways triangle on the right. The triangle is a psuedo-element built through CSS, something like:

.navwizard > li > a:after { 
    ....
    background-color:#eeeeee,
    ....
}

We want to update the background color after a status change to indicate success, but I'm not sure how to do this in the scope of Angular 2. Is there any way to do this?

Upvotes: 0

Views: 440

Answers (2)

Matheus Cardoso
Matheus Cardoso

Reputation: 11

You can add a class to this element on success with angular and create a css block like this.

.navwizard > li > a.success:after { background-color: #000; }

Remembering that javascript is "only" for manipulating elements. Customization should stay with css whenever possible

Upvotes: 1

LLai
LLai

Reputation: 13416

you could apply a success class to your .navwizard element after completion

.navwizard.success > li > a:after {
    background-color: green;
}

you could apply this class with the ngClass directive https://angular.io/api/common/NgClass

Upvotes: 2

Related Questions