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

Question

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?

I've updated the descript, I cannot describe it more simple than that. — wilbi, Dec 07 '20 at 18:40
I got a service with a promise fetching the data from the endpoint. Excactly like the example with the promise here: https://www.primefaces.org/primeng/v7.2.6-lts/#/tree this.nodeService.getFiles().then(files => this.files = files); How would you do it in their example to trigger a click on the first node? — wilbi, Dec 08 '20 at 11:33
I've added a similar example on StackBlitz and updated the description of the question again. — wilbi, Dec 08 '20 at 12:05

score 1 · Accepted Answer · answered Dec 08 '20 at 13:06

1

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

answered Dec 08 '20 at 13:06

Antikhippe

6,316
2
28
43

Thanks for the example, but from what I've aready tried the expanded = true is not triggering the click event on the first node. In fact not even this is not triggering the click event: component: this.selectedNode = this.provision[0]; template: – wilbi Dec 08 '20 at 13:29
Check this fork https://stackblitz.com/edit/primeng-tree-demo-fpvc9k?file=src%2Fapp%2Fapp.component.ts to see that the nodeSelect is not tiggered even when I select the root node. – wilbi Dec 08 '20 at 13:41
Oh, I think I understood your need. Check my demo again. Is that what you want? – Antikhippe Dec 08 '20 at 13:41
Holly f!! It worked like that. So instead of passing the event to a function, you pass it to the expand and from there the event.node... I couldn't find this in any example, thanks man! – wilbi Dec 08 '20 at 13:58

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

1 Answers1