How can I know when the data are loaded on p-tree and select first node?

I was trying to select the first node of the Angular PrimeNG tree component, but the only thing I manage to do is to select the root node, but that doesn't trigger the click event of it.

I am trying to find a way of how to trigger the click event on the first node when the data has been loaded on the component.

ngAfterViewInit() {
        setTimeout(() => {
            this.node = this.files[0].expanded = true;
            this.node = this.files[0];
        }, 2000);
    }

tree is populated with JSON data fetched from an endpoint via a promise in a service like the example here https://www.primefaces.org/primeng/v7.2.6-lts/#/tree :

@Injectable()
export class NodeService {

    constructor(private http: Http) {}

    getFiles() {
        return this.http.get('showcase/resources/data/files.json')
                    .toPromise()
                    .then(res => <TreeNode[]> res.json().data);
    }
}

How can I figure out when the data finished loading on that and then select the first node?

I forked an example on stackblitz, with the only difference that it's using an observable instead of promise to populate the data: https://stackblitz.com/edit/angular-primeng-tree-sml-9swyq6?file=src/app/app.component.ts

On this example, I've enabled the loading=true.

So how can I found out when the loading is finished, switch the loading to false and select and trigger click on the first node of the tree?

You should expand first node in the return of your promise, not in the ngAfterViewInit method because data might not be available at that moment.

Try something like that:

this.nodeService.getFiles().then(files => {
  this.files1 = files;
  this.files1[0].expanded = true;
  this.loading = false;
});

See demo