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?

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?

• javascript
• html
• css
• angularjs

Share Improve this question Follow asked Jun 5, 2018 at 13:56 LazioTibijczykLazioTibijczyk 1,96711 gold badge2929 silver badges6363 bronze badges 3

• As I don't know angular… What will be the rendered output of ng-class="{'asterisk-if-mandatory': data[$index].mandatory}" ? – Takit Isy Commented Jun 5, 2018 at 13:59
• 2 put it on an after: .asterisk-if-mandatory:after { content: " *"; display:inline-block; } If your ng class is applied – Pete Commented Jun 5, 2018 at 14:00
• Great stuff @Pete! – LazioTibijczyk Commented Jun 5, 2018 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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)