title: Angular tree view component with real lazy-loading for large trees
body: <p>For developing a LDAP browser, I need to display large trees. The first level is for the location, where the second level contains hundreds of elements. So lazy loading is required to avoid extremly long page loads. </p>
  
  <p>By expanding a location, it took also a long time for loading/parsing all elements. So I'd like to have a incremental build by transfering every element through Websockets. And I want to display it in realtime: Send child1, display child1. Then send child2, display child2 and so on. </p>
  
  <p>To make it more clear, I created a simple fiddle for demo purpose how it should look like: <a href="https://jsfiddle.net/wj13Ly73/" rel="nofollow noreferrer">https://jsfiddle.net/wj13Ly73/</a></p>
  
  <pre class="lang-js prettyprint-override"><code>let number = 0
  setInterval(() =&gt; {
    $('#second-level').append(`&lt;li&gt;OU=Test${++number}&lt;/li&gt;`);
  }, 300);
  </code></pre>
  
  <p>The goal is that the user see the first elements, instead of seeing nothing until everything is loaded.</p>
  
  <p>The problem: I couldn't find any Angular compatible component, that build the childs like this. Altough many like <a href="https://github.com/500tech/angular-tree-component" rel="nofollow noreferrer">angular-tree-component</a> or <a href="https://github.com/valor-software/ng2-tree" rel="nofollow noreferrer">ng2-tree</a> support lazy loading, they're not able to show the progress like this.</p>
  
  <p>Instead, they fetch ALL childs at a time and render them later. This has the described side-effekt that the user doesn't see any result until all are loaded/parsed, which i don't want. </p>
  
  <p>I'm using angular 5.2.</p>