Angular 8 tree: load data from JSON file

Question

As somebody who is rather an Angular/Typescript/OOP beginner than an expert, I have several JSON files which each represents a table of contents for a manual. In a 'doc' component, I want to load the table of contents for the document chosen by the user.

The interface/class that represents the structure of the JSON, ...

export interface link {
  name:string;
  url:string;
  hasChildren:boolean;
  link?:link[];
 }

... works fine with the mat-nested-tree, tested ok with static data as in the example here (see 'Tree with nested nodes').

export class TreeNestedOverviewExample {
  treeControl = new NestedTreeControl<link>(node => node.link); // very simple structure links as children of link
  dataSource = new MatTreeNestedDataSource<link>();

  constructor() {
    this.dataSource.data = TREE_DATA; // works when TREE_DATA is defined as a const
  }
}

Here is my ngOnChanges snippet:

ngOnChanges(changes) {
    if (changes.indexfile) {
      console.log('infi: '+this.indexfile); // shows expected filename
      this._userdocService.getToc(this.indexfile)
        .subscribe(data => {
          this.dataSource.data.push(data as link);
          console.log('ngOnChanges: '+JSON.stringify(data)); //shows expected JSON
        
      });
    }

I am able to receive the JSON data as a subscribed Observable from a service in ngOnChanges() (but not in ngOnInit()). It shows the data correctly in the console.

However, I am not able to assign the data received to the mat tree.

I would like to know in just a few phrases how you as an expert would model this, what am I missing ?

Answer 1

The issue is that the dataSource needs a new object in memory to render. Solution is to set a new array in memory

this.dataSource.data.push(data as link);
this.dataSource.data = [...this.dataSource.data];