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

Conditional Fomatting in CSS with AngualrJS1

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

   color: red;
color: green;


Then in your table use the html markup below:


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


The output is as shown below:


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