How to bind a list in Angular2?
<p>I'm trying to create a nested treeview.</p>

<pre><code>@Component({
    selector: "myItem",
    template: `
        &lt;li *ngIf="!Array.isArray(data)"&gt; {{data.text}} &lt;/li&gt;
        &lt;ul *ngIf="Array.isArray(data)"&gt;
            &lt;myItem *ngFor="let x of data" [(data)] = "x.data"&gt; &lt;/myItem&gt;
        &lt;/ul&gt;
    `
})
export class MyItemComponent {
    static root = true;
    data: any;

    constructor() {
        if (MyItemComponent.root) {
            this.data = [
                { text: "foo" },
                [{ text: "bar" }, { text: "foo" }]
            ];
            MyItemComponent.root = false;
        }
    }
}
</code></pre>

<p>The error is </p>

<blockquote>
  <p>Can't bind to 'data' since it isn't a known native property
  ("ta.text}} </li>
          
              ][data] = "x.data"> 
          
      "): MyItemComponent</p>
</blockquote>

<p>EDIT: how can I implement a delete button? The template should look like:</p>

<pre><code>        &lt;li *ngIf="!Array.isArray(data)"&gt; {{data.text}} &lt;button (click)="clicked()"&gt; delete me&lt;/button&gt; &lt;/li&gt;
        &lt;ul *ngIf="Array.isArray(data)"&gt; &lt;button (click)="clicked()"&gt; delete me&lt;/button&gt;
            &lt;myItem *ngFor="let x of data" [(data)] = "x.data"&gt; &lt;/myItem&gt;
        &lt;/ul&gt;
</code></pre>

<p>What would be the <code>click</code> function?</p>