AngularJS change font-style

Question

I'm trying to change the font-style of an element when a variable is true.

In my controller, there's a variable which returns its value. Now I want to change the font-style based on the return value. This should happen via ng-style.

Already searched the internet for it. W3 schools and everything but it doesn't work.

Could somebody please give me an example or some useful tutorial or tips to help?

Thanks in advance.

Answer 1

Here is the ng style documentation: https://docs.angularjs.org/api/ng/directive/ngStyle

I would prefer using ng-class, example code:

css:

.font-style-1 {
   font-family : ...;
   font-size: 18px;
   ...
}

.font-style-2 {
   font-family : ...;
   font-size: 14px;
   ...
}

HTML:

<div ng-class="{'font-style-1': myCondition == 'test value', 'font-style-2': myCondition == 'another test value'}">
   ... content ...
</div>

But if you insist on using ng-style:

<div ng-style="myCondition == 'test value' && {'font-size': 18px; ... } || {'font-size': 14px; ...}">
   ... content ...
</div>