title: Angular 2 - changing css selector on click
body: <p>Here is my Angular 2 app:</p>
  <pre><code>//root app component
  import {Component, NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;div class=&quot;{{item.itemclass}}&quot; id=&quot;lists&quot; *ngFor=&quot;let item of items&quot;&gt;
          &lt;div class=&quot;item&quot; (click)=&quot;selectItem(item)&quot;&gt;{{item}}&lt;/div&gt;
          &lt;div&gt;{{item.itemclass}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
  })
  
  export class App {
    name:string;
    items: any[];
    itemclass : string;
    constructor() {
      this.name = 'Angular2';
      this.items = [
        'lorem',
        'ipsum',
        'sit',
        'trump :D'
      ];
      this.itemclass = '';
    }
    selectItem(item){
      console.log(item);
      item.itemclass = &quot;active&quot;;
    }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  <p>When the click event <code>selectItem</code> is triggered, it is supposed to change the <code>itemclass</code>. However, nothing happens.</p>
  <p>Find my app at <a href="https://plnkr.co/edit/I8i0xF1s3NsFDi1rHI6K" rel="nofollow noreferrer">Plunker</a>.</p>
  <p>All I want to achieve is: when a user clicks on a item it would have an <code>active</code> css selector, and when another item is clicked, it would simply toggle and all the siblings will not have the <code>active</code> css class any more.</p>
  <p>But it isn't working properly. How to do it in Angular 2?</p>