CODEWITHSUNDEEP
javascriptangularjsangular
rakibtg
rakibtg

Reputation: 5911

Angular 2 - changing css selector on click

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?

Upvotes: 3

Views: 11547

Answers (2)

Alex Bykov
Alex Bykov

Reputation: 718

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);

  }

}

Upvotes: 1

Sravan
Sravan

Reputation: 18647

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.

Upvotes: 5

Related Questions