CSS Class Binding In Angular 5

We use CSS classes to give an impressive look and feel to our applications. It is very important to add or remove CSS classes at runtime to maintain high user experience in the application. It is a very common thing for any front-end developer to do so either in JavaScript or jQuery.

Let’s see how to do the same in Angular5.

If you are new to Angular5, then click here to get started.

In this article, I am using pipes also. If you want to know more about pipes, here is the guide.

Code, for an example

Following is the baseline code I am using for the example. We will keep changing the code as we progress.

Component .css 

h1{
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    margin-bottom: 15px;
  }
  table{
    width:100%;
    table-layout: fixed;
  }
  .tbl-header{
    background-color: rgba(255,255,255,0.3);
   }
  .tbl-content{
    height:300px;
    overflow-x:auto;
    margin-top: 0px;
    border: 1px solid rgba(255,255,255,0.3);
  }
  th{
    padding: 20px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: rgb(224, 18, 18);
    text-transform: uppercase;
  }
  .td{
    padding: 15px;
    text-align: left;
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: rgb(125, 19, 196);
    border-bottom: solid 1px rgba(255,255,255,0.1);
  }

Component.html

<div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
        <thead>
            <th>Name</th>
            <th>Gender</th>
            <th>Salary</th>
            <th>Date of joining</th>
        </thead>
        <tbody>
            <tr *ngFor='let credit of credits; let i = index'>
                <td class = "td">{{credit.name | title : credit.gender}}</td>
                <td class = "td">{{credit.gender}}</td>
                <td class = "td">{{credit.salary | currency}}</td>
                <td class = "td">{{credit.DOJ | date:'shortDate'}}</td>
            </tr>
        </tbody>
    </table>
</div>

Output

Adding a class

There are multiple ways to declare a class in Angular5.

Any simple HTML class declaration holds good in Angular also.

<div class="tbl-header">

But, if you are looking at a complicated Angular code, then the following two types of assignments are also very common.

<td [class.td] = true>{{credit.name | title : credit.gender}}</td>

Here, class will be “td” as the condition is true.

<td [ngClass] = "{'td' : true}">{{credit.gender}}</td>

In the above example, [ngClass] is used to add the class to the element.

Adding class on condition

Let’s change the code to change the color of the rows where the gender is male. If the person is female, then the row will remain unchanged.

Let’s add a CSS class for the same.

.td-green{
    padding: 15px;
    text-align: left;
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: rgb(15, 148, 48);
    border-bottom: solid 1px rgba(255,255,255,0.1);
  }

Change the HTML code also.

<tr *ngFor='let credit of credits; let i = index'>
    <td class="td" [class.td-green]="credit.gender=='male'">{{credit.name | title : credit.gender}}</td>
    <td class="td" [class.td-green]="credit.gender=='male'">{{credit.gender}}</td>
    <td class="td" [class.td-green]="credit.gender=='male'">{{credit.salary | currency}}</td>
    <td class="td" [class.td-green]="credit.gender=='male'">{{credit.DOJ | date:'shortDate'}}</td>
</tr>

Explanation

In all the columns, I have added the following condition.

<td class="td" [class.td-green]="credit.gender=='male'">

It means when the gender is male, the default CSS is overridden with the specified CSS class.

Output

Adding multiple classes on condition

There are times when we need to add multiple classes to an element to achieve our required output.

Let's create another CSS class to change the font of the Name column. 

.td-arial{
      font-weight: 800;
      font-family: Arial, Helvetica, sans-serif;
  }

If the person is male, then we will add 2 CSS classes to the element <td>.

Changed HTML part

<tr *ngFor='let credit of credits; let i = index'>
    <td class="td" [ngClass]="{'td-green td-arial' : credit.gender=='male'}">{{credit.name | title : credit.gender}}</td>
    <td class="td">{{credit.gender}}</td>
    <td class="td">{{credit.salary | currency}}</td>
    <td class="td">{{credit.DOJ | date:'shortDate'}}</td>
</tr>

Explanation

Following is the part of the code which does the trick (for name column).

[ngClass]="{'td-green td-arial' : credit.gender=='male'}"

It checks if the gender is male, then it adds 2 CSS classes to the element.

Output

Remove class on condition

Let’s see how to remove an added class from an element.

To begin with, I have added 2 CSS classes in the name column. Like this:

<tr *ngFor='let credit of credits; let i = index'>
  <td class = "td td-arial" >{{credit.name | title : credit.gender}}</td>
  <td class = "td" >{{credit.gender}}</td>
  <td class = "td" >{{credit.salary | currency}}</td>
  <td class = "td" >{{credit.DOJ | date:'shortDate'}}</td>
</tr>

Output

Let’s remove the td-arial class when the person is female, i.e., if the person is male, then the class will be added; else it will be removed.

Following is the change in code. 

<tr *ngFor='let credit of credits; let i = index'>
   <td class = "td td-arial" [class.td-arial] = "credit.gender == 'male'">   {{credit.name | title : credit.gender}}</td>
   <td class = "td" >{{credit.gender}}</td>
   <td class = "td" >{{credit.salary | currency}}</td>
   <td class = "td" >{{credit.DOJ | date:'shortDate'}}</td>
</tr>

I have added the following code.

[class.td-arial] = "credit.gender == 'male'">

This ensures that the class will be added when a person is male.

Output

Please let me know your feedback/comments.