CODEWITHSUNDEEP
angulartypescript
Sami
Sami

Reputation: 1051

Angular 2 Binding same click event to multiple elements

I have iconCheck: string; in my component export class then inside constructor I have this.iconCheck = "add_circle"; and in my export class I have 

iconChange() {
    if(this.iconCheck == "add_circle") {
      this.iconCheck = "remove_circle"
    } else {
      this.iconCheck = "add_circle";
    }
  }

Now I have mulitple collapsible/expandable in my HTML for which I am using Bootstrap accordions. The above I am using the the +/- icon toggle. For example for the first time all the accordions are closed and have + icons but when I click on any so that should open and icon should be changed to (-). Now the problem I have with above typescript code is that when I click on any of the accordion all other accordions icons are also changing to the (-) icon. I need to find a way to bind the click event to that specific one which I clicked. I am not sure what are the right words for that and how to explain but in other I need a scope limit or as I said binding the click event to that specific clicked element. Here is my HTML:

<a data-toggle="collapse" (click)="iconChange()" href="#collapse1">
 Property 1 
 <i class="material-icons pull-right">{{iconCheck}}</i>
</a> 

<a data-toggle="collapse" (click)="iconChange()" href="#collapse2">
 Property 1 
 <i class="material-icons pull-right">{{iconCheck}}</i>
</a>

Upvotes: 3

Views: 8180

Answers (1)

Nehal
Nehal

Reputation: 13307

I have encountered this problem couple of times. Usually I use some sort of index to keep track of which accordion the user has clicked/opened and use that hint to toggle icons.

I have created this simple Plunker demo. See if that's what you are looking for :)

app.ts:

export class App {
  name:string;

  selectedIndex: number;

  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.selectedIndex = -1;
  }

  iconChange(index: number){
    if(this.selectedIndex == index){
      this.selectedIndex = -1;
    }
    else{
      this.selectedIndex = index;
    }

  }
}

Template:

<div>
  <h2>Hello {{name}}</h2>
  <div class="div1" (click)="iconChange(1)" >
    Hi 
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 1, 'fa-minus': selectedIndex == 1}" aria-hidden="true" style="float: right"></i>
    </div>
  <div class="div2" (click)="iconChange(2)">
    Hi again!
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 2, 'fa-minus': selectedIndex == 2}"  aria-hidden="true" style="float: right"></i>
  </div>
  <div class="div3" (click)="iconChange(3)">
    Bye!
      <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 3, 'fa-minus': selectedIndex == 3}"  aria-hidden="true" style="float: right"></i>
  </div>
</div>

Upvotes: 4

Related Questions