title: Angular 2: Recursive template for child
body: <p>The API I am working against gives me the following structure in response:</p>
  
  <pre><code>"data": [
  {
    "id": 5,
    "name": "First name",
    "parent": 0
  },
  {
    "id": 1,
    "name": "Second name",
    "parent": 5
  },
  {
    "id": 6,
    "name": "Third name",
    "parent": 1
  },
  {
    "id": 15,
    "name": "Fourth name",
    "parent": 0
  },
  {
    "id": 25,
    "name": "Fifth name",
    "parent": 5
  }
  ]
  </code></pre>
  
  <p>I would like to build a tree structure around this using <code>ngFor</code> that supports an unlimited number of children levels. </p>
  
  <p>This is what I have tried so far:</p>
  
  <pre><code>&lt;div *ngFor="let d1 of _dataList"&gt;
  &lt;ul *ngIf="d1.parent == 0"&gt;
      &lt;li&gt;
          {{d1.name}}
          &lt;ul *ngFor="let d2 of _dataList"&gt;
              &lt;li *ngIf="d2.parent == d1.id"&gt;{{d2.name}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That works, but it's ugly and I have to manually repeat this X-levels down the data and thus leaving a hard-coded limit. </p>
  
  <p>How can one optimize this code to support unlimited levels - and look better?</p>