title: How to change an element’s CSS class and remove all other classes on click
body: <p>How do I handle a case in AngularJS 2 where on click of an element it needs to change its own style, and if other elements have that style they need to have it removed — preferably in one function.</p>
  
  <p>Similar to <a href="https://stackoverflow.com/questions/17928487/angular-js-how-to-change-an-elements-css-class-on-click-and-to-remove-all-others">Angular.js How to change an elements css class on click and to remove all others</a>, only in AngularJS 2, using TypeScript.</p>
  
  <h2>Component</h2>
  
  <p><a href="https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview" rel="noreferrer">https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview</a></p>
  
  <pre><code>//our root app component
  import { NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import {Component} from '@angular/core';
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }"&gt;
          &gt; I'm a div that gets styled on click
        &lt;/div&gt;
        &lt;div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }"&gt;
          &gt; I also want to be styled but only when Im clicked
        &lt;/div&gt;
        &lt;div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }"&gt;
          &gt; When one of us gets clicked the we want to be the only one with the style all others go back to normal
        &lt;/div&gt;
         &lt;div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }"&gt;
          &gt; I'm just here cause my creator likes even numbers
        &lt;/div&gt;
      &lt;/div&gt;
    `,
    styles: [
    `
    .my-class {
      background-color: yellow;
    }
    `
    ]
  })
  class App {
    isClassVisible: false;
  
    constructor() {
    }
  
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>