Hey there! I've been attempting to showcase a functional tree using Angular material, following the example at . However, it's not working as expected and I'm stuck trying to figure out why. Any help would be greatly appreciated! 😊
.html
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<button mat-icon-button disabled class="nav-item"></button>
{{node.name}}
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name"
class="accordion-button">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
{{node.name}}
</button>
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
.ts
interface WorkingTreeNode {
name: string;
id: string;
// node: ProjectModel | DatasetModel | RiskAssessmentModel;
children?: WorkingTreeNode[];
}
@Component({
selector: 'app-working-tree',
templateUrl: './working-tree.component.html',
styleUrls: ['./working-tree.component.css']
})
export class WorkingTreeComponent implements OnInit{
treeControl = new NestedTreeControl<WorkingTreeNode>(node => node.children);
dataSource = new MatTreeNestedDataSource<WorkingTreeNode>();
workingTree: WorkingTreeNode[] = [];
userId!: string;
constructor(private projectService: ProjectService,
private datasetService: DatasetService,
private riskAssessmentService: RiskAssessmentService,
private tokenStorageService: TokenStorageService ) {
}
ngOnInit() {
this.userId = this.tokenStorageService.getUser().id;
this.buildWorkingTree(this.userId);
console.log("workingTree", this.workingTree);
this.dataSource.data = this.workingTree;
console.log("dataSource", this.dataSource);
}
public buildWorkingTree(userId: String): void {
this.projectService.getUserProjects(userId).subscribe(
(response: ProjectModel[]) => {
response.forEach(project => {
const projectChildren : WorkingTreeNode[] = [];
this.datasetService.getProjectDatasets(project.id).subscribe(
(response: DatasetModel[]) => {
response.forEach(dataset => {
const datasetChildren : WorkingTreeNode[] = [];
this.riskAssessmentService.getDatasetRiskAssessments(dataset.id).subscribe(
(response: RiskAssessmentModel[]) => {
response.forEach(riskAssessment => {
datasetChildren.push({name: riskAssessment.name,
id: riskAssessment.id,
children:[]})
})
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
projectChildren.push({name: dataset.name,
id: dataset.id,
children:datasetChildren})
})
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
this.workingTree.push({name: project.name,
id: project.id,
children: projectChildren})
})
console.log("getUserProjects HttpResponse workingTRee", this.workingTree);
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
hasChild = (_: number, node: WorkingTreeNode) => {
!!node.children && node.children.length > 0;
console.log("hasAChild", !!node.children && node.children.length > 0)
}
}
I have attempted moving what's in my onInit method into the constructor, but unfortunately, it hasn't made any difference. I believe I'm following the example correctly, yet nothing is displaying and no errors are appearing in either my console or command prompt. Thank you for any assistance you can provide!