Creating a collapsible tree view with Angular 2 - html

Question

I am tring to develop my own collapsible tree view as a way to learn Angular 2. I have it partly working. Right now I am stuck on how to apply the hidden property to on the specific <li> item that has been clicked on. Here is what I have so far.
This is the html that displays the items to go in the list.
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="toggle()">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!collapsed">
<li *ngFor="let subItem of item.nodes">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0" (click)="toggle()">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
<ol [hidden]="!collapsed">
<li *ngFor="let video of subItem.nodes">
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
and here is the typescript in the component that collapses or expands the list.
collapased = false;
toggle() {
this.collapsed = !this.collapsed;
}
currently the code collapses and expands the top level elements together and the second level elements together. I need to make each item in the list independent of the other ones. I also prefer to stay away form using CSS to achieve this.

Answer 1

If you add a new property in your front-end model, assuming you are using a front-end model, then you can toggle the items one at a time:
export class Item {
constructor (
public nodes: Node[],
public hidden: boolean) {}
}
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="item.hidden = !item.hidden">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!item.hidden">
…
If you're not using a model like that, then the only other thing I can think of is creating a unique id tag for each by using whatever unique id comes with your data:
<a id="{{node.id}}"> </a>
Then you can hide and show based on the id property of those elements. I'm out of ideas, but I'm sure someone else will help!

Answer 2

I have a list of JavaScript objects "hard coded for them moment" each object has properties id: 1, title: something, collapsed: true, and nodes: [] I added the collapsed property to each node and did the following in my html.
<div>
<ol>
<li *ngFor="let item of videoList">
<div (click)="item.collapsed = !item.collapsed">
<a *ngIf="item.nodes && item.nodes.length > 0">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol >
<li *ngFor="let subItem of item.nodes" [hidden]="item.collapsed">
<div (click)="subItem.collapsed=!subItem.collapsed">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
</div>
<ol>
<li *ngFor="let video of subItem.nodes" [hidden]="subItem.collapsed">
<div>
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
basically what is happening is I am changing the collapsed property of the selected node.