Angular 2 - Dynamically change an after CSS element

Question

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?

You could define another class and toggle that class depending on the completion status. — Martin Parenteau
– Martin Parenteau, Commented Jun 28, 2017 at 20:37

LLai · Accepted Answer · 2017-06-28 20:38:04Z

2

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

answered Jun 28, 2017 at 20:38

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matheus Cardoso · Accepted Answer · 2017-06-28 20:41:21Z

1

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

answered Jun 28, 2017 at 20:41

Matheus Cardoso

112 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Dynamically change an after CSS element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related