Will the Tree component in Angular 8's Material Design support keyboard-navigation and lazy-loading?

[amit.s...@gmail.com]

Hi Friends, 

Our project requires the Tree control to support keyboard navigation and lazy loading. Presently, Angular Material Design doesn't give both these features out-of-the-box. I was hoping that Google would add these features in Angular 8 which is due release in March or April of 2019. Any idea? 

Below, I've elaborated about these two features which I wish to see in Angular 8 Material Design's Tree component: 

1. Keyboard Navigation: 

User should be able to use up and down arrow keys (or tab and shift+tab keys) to move focus across the nodes up and down the tree. 

User should be able to click right arrow while the focus is on a tree-node to expand that node. 

User should be able to click left arrow while the focus is on a tree-node to collapse that node. 

An example of what I want is demonstrated in this github issue: 

https://github.com/angular/material2/issues/13018#issue-357960848 

Here, it was done by adding custom-code on top of Angular Material Design's tree control. I was hoping to know if Google was planning to give this feature out of the box from Angular 8 onwards. 

2. Lazy Loading: 

When the tree control loads, it should only fetch the first hierarchy of nodes. 

When user expands any node, a separate AJAX call should go and fetch the sub-nodes only of that particular node which is to be highlighted. 

Now let's go one step ahead:  

If the first hierarchy nodes being fetched on the first load are too many (beyond a configurable threshold, let's say 100), user should be provided with an option to download them using a CSV file. 

Same should happen when user tries to expand a node having too many sub-nodes.  

Now let's go one more step ahead: 

There should also be a configurable CSV threshold (let's say 1000). 

If the records are in between 100 and 1000, CSV download option should be given. 

If the records are beyond 1000, just an error should be given that the records are too many and an option should be given to download using multiple CSV files. 

 

 I know that this is probably too much to ask for from Google. But I've explained my problem statement. If possible, let me know if there's any work-around to do this. But I'll be more happy if I get a news that Angular 8's Material Design is being planned to come with these two features in-built. 

Thanks and Regards, 

Amit Shirasao

+91 9158851250

 

[Sander Elias]

Hi Amit,

I just checked. Currently, the focus is on getting everything to work with Ivy. If that's out of the door, the other things will be attended too. 

Probably the things you ask for will be part of 8 or shortly after that. But I can't give any guarantees.

Regards

Sander

[chandrakanth diddela]

I have similar requirement . Have you been able to load children based on selected parent. Initally, i will be first level nodes and based on the user selection i should be able to load children by making server call /Ajax call?

Thanks,

Chandra