title: How can I add a class to an element on hover?
body: <p>How to add class to a div when hovered on the div.</p>
  
  <p>Template - </p>
  
  <pre><code>&lt;div class="red"&gt;On hover add class ".yellow"&lt;/div&gt;
  </code></pre>
  
  <p>Component - </p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
    selector: 'hello-world',
    templateUrl: 'src/hello_world.html',
    styles: [`
      .red {
        background: red;
      }
  
      .yellow {
        background: yellow;
      }
  
    `]
  })
  export class HelloWorld {
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/J6o3aIMXlFsrb2NOzeLt?p=preview" rel="noreferrer">Demo</a></p>
  
  <p>[ NOTE - I specifically want to add a new class and not modify the existing classes ]</p>
  
  <p>Sigh! It is such a normal use case and I do not see any straight forward solution yet!</p>