Angular 2 - changing css selector on click

Question

Here is my Angular 2 app:

//root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="{{item.itemclass}}" id="lists" *ngFor="let item of items">
        <div class="item" (click)="selectItem(item)">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

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 = "active";
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

When the click event selectItem is triggered, it is supposed to change the itemclass. However, nothing happens.

Find my app at Plunker.

All I want to achieve is: when a user clicks on a item it would have an active css selector, and when another item is clicked, it would simply toggle and all the siblings will not have the active css class any more.

But it isn't working properly. How to do it in Angular 2?

Answer 1

Here is your requirement. Please check the plunker in the question.

Here, I used, [class.active]="item == itemclass", this binds the class name active to the current selected item.

these [class.active] [], brackets are one way binding from controller to view.

this.itemclass = item; this line assigns the current item to item class, which we checked in the view.

Component:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div id="lists" *ngFor="let item of items">
        <div class="item" [class.active]="item == itemclass" (click)="selectItem(item)">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

Class:

export class App {
  name:string;
  items: any[];
  itemclass : string;
  constructor() {
    this.name = 'Angular2';
    this.items = [
      'lorem',
      'ipsum',
      'sit',
      'trump :D'
    ];
    this.itemclass = '';
  }
  selectItem(item){

    this.itemclass = item;
    console.log(this.itemclass);
  }
}

Here is the solved plunker link.

Answer 2

If you need to have multiple selects and store them somewhere: There you have active array that stores the state (on/off) of all the items you have. During construction phase you map active array to false

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="{{item.itemclass}}" id="lists" *ngFor="let item of items; let i = index">
        <div class="item"  [class.active]="active[i]" (click)="active[i] = !active[i]">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

export class App {
  name:string;
  items: any[];
  itemclass : string;
  active: any[] = [];

  constructor() {
    this.name = 'Angular2';
    this.items = [
      'lorem',
      'ipsum',
      'sit',
      'trump :D'
    ];
    this.itemclass = '';
    this.active.length = this.items.length;
    this.active.map(e=> false);

  }

}