Angular On Click Event For Multiple Items

What I am trying to do: I am trying to have collapsible accordion style items on a page which will expand and collapse on a click event. They will expand when a certain class is ad

Solution 1:

you could apply your class through javascript

<div (click)="handleClick($event)">
    some content
</div>

then your handler

handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
}

In plain html and js it could be done like this

functionhandleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
    console.log(event.target.classList.value);
}

<divonclick="handleClick(event)">
some content
</div>

Solution 2:

Try to pass unique Id. (little modification)Ex: -

in component.tsfile: 
selectedFeature: any;
categories:any[] = [
        {
          id: "collapseOne",
          heading_id: "headingOne",
        },
        {
          id: "collapseTwo",
          heading_id: "headingTwo",
        },
        {
          id: "collapseThree",
          heading_id: "headingThree",
        }
];

toggleClass(category) {
this.selectedFeature = category;
};

ngOnInit() {
this.selectedFeature = categories[0]
  }

inhtml:-

<divclass="collapsible-panel" *ngFor="let category of categories"><!-- here you can check the condition and use it:-
ex:
<h4 class="heading" [ngClass]="{'active': selectedFeature.id==category.id}" (click)="toggleClass(category)">
<p class="your choice" *ngIf="selectedFeature.id==category.id" innerHtml={{category.heading}}></p>

   enter code here

 -->
.....
</div>

Solution 3:

Try maintaining an array of expanded items.

expanded = []; // take array of boolean toggleClass(id: number) {
    this.expanded[i] = !this.expanded[i];
    console.log(this.expanded[i]);
}

Solution 4:

Your solution will be the usage of template local variables:

see this: https://stackoverflow.com/a/38582320/3634274

Solution 5:

You are using the same property expanded to toggle for all the divs, so when you set to true for one div, it sets it true for all the divs.

Try setting different properties like this:

<div (click)="toggleClass("1")" [class.collapsible-panel--expanded]="expanded1"class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>
<div (click)="toggleClass("2")" [class.collapsible-panel--expanded]="expanded2"class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>

TS:

expanded1 = false;
expanded2 = false;

toggleClass(number:any) {
    this["expanded" + number]  = !this["expanded" + number];
    console.log(this["expanded" + number]) 
}