Angular Material - Difference between flat trees and nested trees

Question

Flat tree :

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence

Nested tree :

In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an outlet to keep all the children nodes.

I have an 800 elements nomenclature that I display using a flat tree.
I tried using a nested tree first, because it seemed like the most appropriate tree. It takes a blink to build it, but the DOM needs 5 seconds to load the tree, so I tried the flat tree, and it works perfectly now.

The question is, what is the point of using a nested tree if the flat tree's result is the same ? The tree is rendered correctly and the DOM understands its hierarchy.

Flat tree's DOM:

A nested tree is harder to build and clearly overloads the DOM everytime it gets displayed. What can a nested tree do, that a flat tree can't ? The Material doc is unclear.

Answer 1

Whether the HTML is rendered dynamically via Angular or simply a flat file, there are some definite major benefits to a nested tree.

• You can take advantage of event bubbling, which can greatly reduce the amount of code needing to be written to capture user interaction with the DOM. Also, when you need to capture more than one event, nesting can make that easier as well.
• You have more control over formatting by being able to apply styling to parent nodes that will be inherited by child elements.
• Nested trees are huge benefit when using CSS preprocessors like LESS or Sass. Greatly reduces the amount of styles needing to be written.
• While performance between rendering the two trees may be the same, when you have to consider users with slow connections or poor mobile service, the rule of thumb is the less DOM elements the better.