title: Angular2 NgFor Within Components
body: <p>I have a tree like structure and try to create a list from components and subcomponents in angular2.</p>
  
  <pre><code>var data = [
    {id:"1", 
     children: [
       {id:"2", 
        children: [
          {id: "3"},
          {id: "3"},
          {id: "3"},
          {id: "3"},
        ]},
        {id:"2", 
        children: [
          {id: "3"},
          {id: "3"},
          {id: "3"},
          {id: "3"},
        ]}
     ]}
  ]
  </code></pre>
  
  <p>I am trying to loop throught that structure and build an html list using different components depending on the depth of the loop iteration.</p>
  
  <p><strong>TypeScript</strong>    </p>
  
  <pre><code>// ROOT
  @Component({
      selector: 'root',
  })
  
  @View({
      templateUrl: '
      &lt;childOne *ng-for="#data for list.children" [data]="data"&gt;&lt;/childOne&gt;
      ',
      directives: [ChildOne, NgFor]
  })
  
  class Root{
      list:Array&lt;Object&gt;;
      constructor() {
         this.list = // request to backend
      }
  }
  
  // COMPONENT 1
  @Component({
      selector: 'childOne',
      properties: ['data']
  })
  
  @View({
      templateUrl: '
      {{data.id}}
      &lt;childTwo *ng-for="#childOneData for data.children" [data]="childOneData "&gt;&lt;/childTwo&gt;
      ',
      directives: [ChildTwo, NgFor]
  })
  
  class ChildOne{
  }
  
  // COMPONENT 2
  @Component({
      selector: 'childTwo',
      properties: ['data']
  })
  
  @View({
      templateUrl: '
      {{data.id}}
      &lt;childThree *ng-for="#childTwoData for data.children" [data]="childTwoData"&gt;&lt;/childTwo&gt;
      ',
      directives: [ChildThree, NgFor]
  })
  
  class ChildOne{
      constructor() {
      }
  }
  
  // COMPONENT 3
  @Component({
      selector: 'childThree',
      properties: ['data']
  })
  
  @View({
      templateUrl: '{{data.id}}',
  })
  
  class ChildThree{
      constructor() {
      }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;head&gt;
    &lt;body&gt;
      &lt;root&gt;&lt;/root&gt;
    &lt;/body&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>I run into an error </p>
  
  <blockquote>
    <p>Can't bind to 'ngForFor' since it isn't a know property of the 'template' element and there are no matching directives with a corresponding property</p>
  </blockquote>
  
  <p>The Error refers to the *ng-for in the ChildTwo Component. When I remove the html tag everything works just fine.</p>
  
  <p>Are there any limits when using *ng-for? Or some Pitfalls I did not see?</p>
  
  <p>thx</p>