title: Toggle Class on Click in Angular 2
body: <p>I have used code almost the same as this so that when I click on a certain link in my nav, it is highlighted: </p>
  
  <pre><code>import {Component} from '@angular/core';
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div class="content-wrapper"&gt;
        &lt;p [class.active]="isParaActive"&gt;This is a paragraph tag text&lt;/p&gt;
        &lt;button [class.active]="isBtnActive" (click)="toggleClass()"&gt;Click Me&lt;/button&gt;
      &lt;/div&gt;
    `,
    styles: [
    `
    p{
      color: red;
    }
    p.active{
      color: green;
    }
    button{
      background-color: #00BCD4;
      color : #ffffff;
    }
    button.active{
      box-shadow:0px 0px 3px 3px rgba(0,0,0,0.4);
    }
    `
    ]
  })
  export class App {
    constructor() {
    }
    isParaActive:boolean = false;
    isBtnActive:boolean = false;
  
    //ToggleClass function functionality
    toggleClass(){
        this.isParaActive = !this.isParaActive;
        this.isBtnActive = !this.isBtnActive;
    }
  }
  </code></pre>
  
  <p>However, now I would like it so that whenever the user clicks anywhere else on the page, whether it is another link or anywhere else, then the link is no longer highlighted and it's class isn't active. 
  Does anyone know how I can go about achieving this? </p>