Change after property in ng-style without using ng-class

So I’m trying to create a directive for a some kind of stepper arrow progress bar.

Please see this codepen to understand what I’m talking about. (Note that i wrote the params in the function scope to have an easier read).

The problem I am facing now, is that I wanna pass the colors as param to my directive and I need to apply the colors to both the class and the :after property.

I use that sample to change the background-color of the block-head class, using ng-style. The ng-class I use is to get plain start and end.

<div ng-repeat="element in elements"
 class="block-head"
 ng-class="{'block-head-first': $first, 'block-head-last': $last}"
 ng-style="{'width' : selectedKey === element.key ? 'calc(100% - ' + 
 widthCalc + 'px)' : '',
 'background-color': getColor($index)}">

$scope.widthCalc = ($scope.elements.length - 1) * 26
$scope.getColor = function($index) {
    if ($scope.elements[$index].key === $scope.selectedKey)
      return $scope.colors['current']
    if ($scope.elements[$index].key < $scope.selectedKey)
      return $scope.colors['success']
    if ($scope.elements[$index].key > $scope.selectedKey)
      return $scope.colors['disable']
}

Below is the sample of code I wanna change with ng-style (I set it to lightblue so you understand visually what i’m trying to change).

.block-head:after {
  color: lightblue;

I thought of two potential fixes but I have no idea on how to do them. First would be to ‘heritate’ the color value from the parent in background-color in pure css (not even sure that it is possible ?). Second would be to create classes in my js code and use those classes using ng-class.

All the related questions (here, and here) always advice to use ng-class, but I see no obvious fix with it on my case.

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/09/change-after-property-in-ng-style-without-using-ng-class/
via @lzomedia #developer #freelance #web #lzomedia.com