How to customize font styles in AngularJS

Question

I'm attempting to modify the font style of an element when a certain variable is true.

Within my controller, I have a variable that retrieves its value. My objective is to adjust the font style depending on this value using ng-style.

I've exhaustively searched online for solutions, including W3 schools, but haven't had any success.

Would greatly appreciate it if someone could provide me with an example or offer some helpful tutorials or tips to guide me in the right direction.

Thank you in advance.

Answer 1

Answer №1

If you're looking for the ng style documentation, you can find it here.

Personally, I prefer utilizing ng-class instead. Here's an example:

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>

However, if you still want to go with ng-style, here is an alternative approach:

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

Answer 2

If you're looking for the ng style documentation, you can find it here.

Personally, I prefer utilizing ng-class instead. Here's an example:

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>

However, if you still want to go with ng-style, here is an alternative approach:

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