Reputation: 1361
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
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
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