title: Angular - Change Font Awesome icon color on click
body: <p>I created a component named "like" with the following HTML:</p>
  
  <pre><code>&lt;div (click)="onClick()"&gt;
     &lt;i class="fas fa-heart" [class.active]="isActive"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the icon, it should change the variable "isActive" and consequently the color of the icon should also change. Here is the .ts:</p>
  
  <pre><code>onClick() {
      this.isActive = !this.isActive;
    }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fa-heart {
      color: #ccc;
  }
  
  .fa-heart.active {
      color: deeppink;
  }
  </code></pre>
  
  <p>However, the "active" class is not being added or removed when I click. Why?</p>