Exploring a basic recursive Treeview feature in angular4 with the code provided below. However, encountering an error when trying to expand the child view using toggle()
.
Encountering this exception error:
ERROR TypeError: _v.context.$implicit.toggle is not a function
Appreciate any help or insights.
tree-view.component.ts
export class TreeViewComponent implements OnInit {
constructor() { }
ngOnInit() {}
@Input() directories: Directory[];
}
tree-view.component.html
<ul>
<li *ngFor="let dir of directories">
<label (click)="dir.toggle()"> {{ dir.title }}</label>
<div *ngIf="dir.expanded">
<tree-view [locations]="dir.children"></tree-view>
</div>
</li>
</ul>
Directory.ts
export class Directory{
title: string;
children: Directory[]
expanded = true;
checked = false;
constructor() {
}
toggle() {
this.expanded = !this.expanded;
}
getIcon() {
if (this.expanded) {
return '-';
}
return '+';
}
}