Add an asterisk to a label if field is required

Question

I have a label that I want to add an asterisk to if field is required. I have tried applying ng-class like so

<div class="col-xs-12 top5"  ng-if="(activity.itemType=='TEXTAREA')">
     <label class="col-xs-3 control-label text-right" for="act4{{$index}}"
            ng-class="{'asterisk-if-mandatory': data[$index].mandatory}">{{activity.itemLabel}}</label>
     <div class="col-xs-9">
         <textarea ng-model="activityItems[$index].value"
                   ng-required="data[$index].mandatory" cols="40" rows="6"
                   id="act4{{$index}}" name="txtComments" class="defaultTextareaInput"></textarea>
     </div>
</div>

and then css

.asterisk-if-mandatory {
    content: " *"
}

Any solutions?

Answer 1

I don't really know Angular…
But I would say you can do something like this, using pseudo-element ::after :

 label { border: 1px solid gray; padding: 4px 8px; } label.asterisk-if-mandatory::after { content: " *"; } 

 <label class="asterisk-if-mandatory">Item is mandatory</label> <label class="">Item is not mandatory</label> <label class="asterisk-if-mandatory">Item is mandatory</label> 

(I reduced the code to the minimum required for the snippet)