What is Conditional Formatting in CSS and How to do it With AngularJS (ng-class)

I’m so happy to have you again!

In this brief blog, I am going to help you understand conditional formatting and how to apply it using css.

What is Conditional Formatting?
Conditional  Formatting also called Conditional Styling is a situation where styles are apply to html element based on conditions that may changes at view time. For example, based on values from data in a database.

When to use Conditional Formatting
A typical example of when you can use conditional formatting is when the color of the text needs to change depending on the status. For example:

• Status: Pending
• Status: In Progress
• Status: Completed

How to Apply it In angularjs, you can achieve conditional formating using either

• ng-class
• ng-style

Using ng-class Cleate two classes called Pending and Completed

css Style

.pending 
{
   color: red;
}
.completed
{
color: green;
}

Then in your table use the html markup below:

<table ng-repeat = "row in activities" width="364" height="140" border="1">
    <tr>
      <td>Create C# Tutorial </td>
      <td ng-class="{'pending':row.status === 'Pending'}, 'completed':row.status ==="Completed>{{row.status}}</td>
    </tr>
    <tr>
      <td>Do a Presentation on .Net</td>
      <td ng-class="{'pending':row.status === 'Pending'}, 'completed':row.status ==="Completed>{{row.status}}</td>
    </tr>
</table>

The output is as shown below:

 

Let’s now see how to do it using ng-style