Expand/collapse list items in recursive tree menu in angular - json

Question

How can i achieve that my nested lists expand on click?
At the moment it just opens the first level.
sidebar.component.html
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" (click)="listClick($event, item)">
{{item.name}}
<ul *ngIf="item.folders?.length > 0" [ngClass]="{ 'subfolder': selectedItem == item }">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.folders }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>
Click from sidebar.component.ts
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
}
The first level works like it should. I click on the folder name and it expands. But when I click on the list element on the next level the list collapses instead of expanding further.

Answer 1

I think the event is bubbling up to the parent i.e. when you click on a child, you are also clicking on the parent element too. Adding event.stopPropagation() should stop the event bubbling to the parent. I.e.
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
event.stopPropagation();
}
Update: I am not sure how your data is being fetched, so I am not sure if this is 100% right. But here is a working example of how it should work (you do need the event.stopPropagation();) I have added && item.showSubfolders the *ngIf which gets toggled on click:
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" (click)="listClick($event, item)">
{{item.name}}
<ul *ngIf="item.folders?.length > 0 && item.showSubfolders" [ngClass]="{ 'subfolder': selectedItem == item }">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.folders }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>
And the Listclick:
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
newValue.showSubfolders = !newValue.showSubfolders
event.stopPropagation()
}
working example: https://stackblitz.com/edit/angular-emz37r