Angular 2 - changing css selector on click
<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>