I have developed a dynamic accordion component that populates its values from the parent component. However, I am facing an issue where each accordion does not respond individually to clicks. Whenever I click on any accordion, only the first one expands and collapses. Below is the code snippet:
array-parent.component.ts
import { Component, AfterViewInit, OnInit } from '@angular/core';
@Component({
selector: 'my-array-parent',
templateUrl: './array-parent.component.html',
})
export class ArrayParentComponent implements OnInit {
private content: Test[];
ngOnInit(): void {
this.content = [{
heading: 'header1',
testData: [{
title: 'title1',
content: 'content1'
}, {
title: 'title2',
content: 'content2'
}]
}, {
heading: 'header2',
testData: [{
title: 'title1',
content: 'content1'
}, {
title: 'title2',
content: 'content2'
}]
}]
}
}
export class Test {
heading: string;
testData: TestItem[];
}
export class TestItem {
title: string;
content: string;
}
array-parent.component.html
<ng-container *ngFor="let item of content">
<my-array [data]="item"></my-array>
</ng-container>
array.component.ts
import { Component, Input, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-array',
templateUrl: './array.component.html'
})
export class ArrayComponent implements OnInit {
@Input() data: any;
private contentObj: any;
constructor() { }
ngOnInit(): void {
this.contentObj = this.data;
}
}
array.component.html
<h2>{{contentObj.heading}}</h2>
<div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
<div *ngFor="let item of contentObj.testData;">
<div role="tab" id="headingone">
<h4>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">
{{item.title}}
</a>
</h4>
<div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone">
<div class="panel-body">
{{item.content}}
</div>
</div>
</div>
</div>
</div>
My goal is to make each accordion expand and collapse individually upon clicking. Currently, only the first accordion responds because of the static ID assigned. I've tried assigning dynamic IDs but without success. Any assistance in resolving this issue would be highly appreciated.