I am currently learning Angular 2 and working on creating an expandable tree-view that pulls data from a potentially large third-party API. The underlying structure of the API is structured like this:
- Home (id: 1053)
- - Rugby League (id: 1054)
- - - Super League (id: 1103)
- - - - Castleford Tigers (id: 1111)
- - - - Catalans Dragons (id: 1110)
- - - - Huddersfield Giants (id: 1116)
- - - - Hull FC (id: 1108)
- - - Championship (id: 1104)
- - - - Batley Bulldogs (id: 1120)
- - - - Bradford Bulls (id: 1118)
- - - - Dewsbury Rams (id: 1124)
- - - - Featherstone Rovers (id: 1121)
- - Football (id: 1056)
- - - Premier League (id: 1057)
- - - - AFC Bournemouth (id: 1059)
- - - - etc
- - - - etc
The API works by passing an ID and returning a JSON array containing only the children of that specific node. For example, if I call:
http://www.example.com/api/contentNodes/?parentId=1053[
{"Id":1054,"Name":"Rugby League","HasChildren":true},
{"Id":1056,"Name":"Football","HasChildren":true}
]
(The value of HasChildren indicates whether the node has child nodes.)
Considering the dataset may grow in size, my goal is to fetch more data from the API progressively as users open different branches of the tree, rather than loading the entire dataset at once in the app.
I have developed an Angular 2 application which you can explore here: http://plnkr.co/edit/QQ1OKCbd4pDptpSVbWch?p=preview
The crucial component is located in the `app/content-list.component.ts' file:
import {Component, OnInit} from 'angular2/core';
import {ContentNode} from './content-node';
import {ContentService} from './content.service';
@Component({
selector: 'content-list',
template: `
<ol class="tree">
<li *ngFor="#contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">
<a *ngIf="contentNode.HasChildren" (click)="toggleBranch(contentNode.Id)" class="toggle">+</a> {{ contentNode.Name }}
</li>
</ol>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
`
})
export class ContentListComponent implements OnInit {
constructor (private _contentService: ContentService) {}
errorMessage: string;
private _startNodeId: number = 1053;
contentNodes: ContentNode[];
ngOnInit() {
this.getContentNodes();
}
getContentNodes() {
this._contentService.getContentNodes(this._startNodeId)
.subscribe(
contentNodes => this.contentNodes = contentNodes,
error => this.errorMessage = <any>error
);
}
toggleBranch(branchId:number){
console.log('branchId: ' + branchId);
}
}
In this code snippet, I am making a service call returning the JSON mentioned above with parentId set to 1053.
However, I am facing challenges in gradually loading the child nodes of the treeview when the user clicks the "+" button, into the nested HTML list (<ol>).
What would be the best strategy to elegantly achieve this?
My next step involves optimizing API calls made by the app, but for now, my main concern is getting the treeview functioning correctly.
I came across this recursive treeview example, but it seems a bit buggy with empty <ol></ol> elements rendered in the HTML when child nodes are absent. Additionally, the setup appears very hardcoded, and I am not confident enough to refactor it yet.
Thank you in advance.
Due to security reasons, I cannot allow public requests to access the API, making testing challenging on Plunkr using just a static, single-level JSON dataset for demonstration purposes.