I am currently utilizing [ngClass] to dynamically add the active class for displaying/hiding content upon click. While adding the class functions correctly, the issue arises when clicking, as it opens all other list items simultaneously. My desired outcome is to only display details of the specific list item that was clicked, without affecting others. How can I resolve this matter without resorting to using id or RefElement?
Thank you.
HTML
<ul class="list-group panel-list-group list-group-inactive">
<li class="list-group-item>
<div class=" p-a-panel (click)="onShowDetails()">
<div class="CollapseDetails" [class.active]="isOpen">
<h3>Customer Details1</h3>
</div>
</div>
</li>
<li class="list-group-item>
<div class=" p-a-panel (click)="onShowDetails()">
<div class="CollapseDetails" [class.active]="isOpen">
<h3>Customer Details2</h3>
</div>
</div>
</li>
</ul>
TypeScript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-admin-customer-central',
templateUrl: './admin-customer-central.component.html',
styleUrls: ['./admin-customer-central.component.css']
})
export class AdminCustomerCentralComponent implements OnInit {
isOpen = false;
ngOnInit() {
}
onShowDetails() {
this.isOpen = !this.isOpen
}
}
CSS
.CollapseDetails {
display: none;
}
.active{
display: block;
}