title: How to change the css class name dynamically in angular 2
body: <p>I have two CSS class name as follows </p>
  
  <pre><code>.icon_heart{
       color: #bdbdbd;
  }
  
  .icon_heart_red{
      color:#a6b7d4;;
  }
  </code></pre>
  
  <p>My HTML has a heart icon</p>
  
  <pre><code>&lt;div class="icon_heart" *ngIf="showheartIcon"&gt;
      &lt;ion-icon name="heart" (click)="setWishlistTrue(category.product_id);" class="heart"&gt;&lt;/ion-icon&gt;
  &lt;/div&gt;
  &lt;div class="icon_heart_red" *ngIf="showheartIconRed"&gt;
      &lt;ion-icon name="heart" (click)="setWishlistFalse(category.product_id);" class="heart"&gt;&lt;/ion-icon&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I have two div tags, the heart icon is of <strong>gray color</strong> initially and on clicking that I will change it to <strong>blue color</strong>.</p>
  
  <p>Here is my ts file code:</p>
  
  <pre><code>  showheartIcon=true;
    showheartIconRed =false;
  
    setWishlistTrue(id){
      this.showheartIconRed = true;
      this.showheartIcon = false;
    }
  
    setWishlistFalse(id){
      this.showheartIconRed = false;
      this.showheartIcon = true;
    }
  </code></pre>
  
  <p>I have two icons of different color.</p>
  
  <h3>Question</h3>
  
  <p>Instead of having two heart icons is it possible to change the class of the icon?</p>
  
  <p>I have seen in JavaScript we can change it <a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_classname" rel="noreferrer">w3schools</a> simple way to apply class to the div tag, but I am new to TypeScript. How can I change the class?</p>