Expand and Collapse PrimeNG TreeTable level by level with buttons

Question

As you can see in my stackblitz demo, I have implemented a TreeTable with two buttons at the top. This "plus" button should expand the table by one level after every click. And "minus" button should collapse that level.

https://stackblitz.com/edit/primeng-treetable-demo-hu2qwa?file=src/app/app.component.ts

So, for example:

If every node is collapsed, clicking "+" button should expand only Level 1 nodes, so that level 2 nodes are visible. But level 2 nodes should stay collapsed. Clicking "+" button for second time should then also expand level 2 nodes.

If we have Level 2 nodes expanded, clicking "-" button should only collapse level 2 nodes. so, level 1 nodes should still stay expanded. Clicking "-" button for the second time should then also collapse level 1 nodes.

Current version can only expand and collapse Level 1 nodes. how can I improve the logic so it works as I want?

Answer 1

Here is a working solution. it still needs an improvement to limit level depth. But it is a good starting point if anyone is seeking an answer for this question. https://stackblitz.com/edit/primeng-treetable-demo-npxrcp