\nIn this brief blog, I am going to help you understand conditional formatting and how to apply it using css.<\/p>\n
<\/p>\n
What is Conditional Formatting?<\/b>
\nConditional\u00a0 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.<\/p>\n
<\/p>\n
When to use Conditional Formatting<\/b> How to Apply it<\/b> In angularjs, you can achieve conditional formating using either<\/p>\n Using ng-class<\/b> Cleate two classes called Pending <\/i>and Completed<\/i><\/p>\n css Style<\/p>\n <\/p>\n <\/p>\n Then in your table use the html markup below:<\/p>\n <\/p>\n <\/p>\n The output is as shown below:<\/p>\n
\nA 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:<\/p>\n\n
\n
.pending<\/span> \r\n{\r\n color<\/span>:<\/span> red<\/span>;\r\n}\r\n.completed<\/span>\r\n{\r\ncolor<\/span>:<\/span> green<\/span>;\r\n}\r\n<\/pre>\n<table<\/span> ng-repeat =<\/span> \"row in activities\"<\/span> width=<\/span>\"364\"<\/span> height=<\/span>\"140\"<\/span> border=<\/span>\"1\"<\/span>><\/span>\r\n <tr><\/span>\r\n <td><\/span>Create C# Tutorial <\/td><\/span>\r\n <td<\/span> ng-class=<\/span>\"{'pending':row.status === 'Pending'}, 'completed':row.status ===\"<\/span>Completed<\/span>><\/span>{{row.status}}<\/td><\/span>\r\n <\/tr><\/span>\r\n <tr><\/span>\r\n <td><\/span>Do a Presentation on .Net<\/td><\/span>\r\n <td<\/span> ng-class=<\/span>\"{'pending':row.status === 'Pending'}, 'completed':row.status ===\"<\/span>Completed<\/span>><\/span>{{row.status}}<\/td><\/span>\r\n <\/tr><\/span>\r\n<\/table><\/span>\r\n<\/pre>\n
![](\"https:\/\/2.bp.blogspot.com\/-hRper1o1kIo\/W35RAC5jhhI\/AAAAAAAACFc\/xhP0ep1Edzoqo2YRpV_BXQLQ7ktmyQ2aACLcBGAs\/s1600\/Conditional%2BFomatting%2Bin%2BCSS%2Bwith%2BAngualrJS2.jpg\")
<\/a><\/div>\n