How to change style for before/after in Angular?

Question

I\'m trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:

http://css-tricks.com/triangle-breadcrumbs/

Releva

Answer 1

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.

Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

And in CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

Answer 2

ng-class should work for what you are trying to do.

 <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

rough code example

Answer 3

I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.

Simply change your code to:

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:

<li><a href="#" class="breadcrumb-color">Home</a></li>

Some sample css, now you can set the before and after as you please:

.breadcrumb-color li a {
    background: red;
}

.breadcrumb-color li a:after { 
    background: red;
}