I have a basic accordion set up:
HTML
<div *ngFor="let item of showDirNames | async | filter: name; let i = index;">
<button class="accordion" (click)="toggleAccordion($event, i, item.name)"> {{item.name}} </button>
<div class="panel" hide="!item.isActive">
<p *ngFor="let child of showFilesNames | async | filter: name"> {{child.name}} </p>
</div>
</div>
TS
toggleAccordion(event, index, item) {
this.activeIndex = index;
var element = event.target;
if(element.classList.toggle("active")){
this.showFiles(item);
}
if(this.element[index].isActive) {
this.element[index].isActive = false;
} else {
this.element[index].isActive = true;
}
var panel = element.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
Here's how I retrieve the data
showFiles(filename: string)
{
this.showFilesNames = this.uploadService.getFiles(filename);
this.showFilesNames.forEach(element => {});
}
What should the final result look like? I want to click on the header of my accordion to get the title and then send that title to my backend for filenames. The issue is that my view loads before the data is available.