Conditional outer tag in a directive (i.e. <strong>)

Question

I like a directive that conditionally puts a tag outside some content (but always prints the content), like this:

<p><strong ng-if-always-keep-inner-content="model.condition">{{model.text}}</strong>/p>

so if condition is true I get

<p><strong>yada yada</strong></p>

otherwise I get

<p>yada yada</p>

I could write it myself, but I want to know if it is possible to do with built in directives/options.

I should perhaps say this is used together with Bootstrap, which afaiu recommends using <strong> vs some class with a bold font.

Answer 1

I don't think there is a built in directive. You should write it.

I suggest to use a classic ng-if

<p ng-if="model.condition"><strong>{{model.text}}</strong></p>
<p ng-if="!model.condition">{{model.text}}</p>

In your specific case, you can also use ng-class and set the strong style via css.