How to change an element’s CSS class and remove all other classes on click
<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>