title: Angular 2 - Two structural directives on the same DOM element
body: <p>While playing around with Angular 2, I've encountered a problem: apparently I can't put two structural directives (<code>ngFor</code>, <code>ngIf</code>) on the same DOM element.<br>
  In Angular 1 this used to work. For <a href="https://plnkr.co/edit/CGMGoqZfP6EXan4BTZPB?p=preview">example</a>:</p>
  
  <pre><code>&lt;div ng-repeat="item in items" ng-if="$even"&gt;{{item}}&lt;/div&gt;
  </code></pre>
  
  <p>When I try something similar with <a href="https://plnkr.co/edit/A9vkVZhEUwimOWlw4WTh?p=preview">Angular 2</a>:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;div *ngFor="#item of items; #e = even" *ngIf="e"&gt;{{item}}&lt;/div&gt;
  
      &lt;/div&gt;
    `,
    directives: []
  })
  export class App {
    constructor() {
      this.items = ["a","b","c"]
    }
  }
  </code></pre>
  
  <p>Nothing happens. Not even an error.  </p>
  
  <p>If I put the <code>ngIf</code> directive on a child element, <a href="https://plnkr.co/edit/haueSjMEqeGZTGliB8qt?p=preview">it works</a>:</p>
  
  <pre><code>&lt;div *ngFor="#item of items; #e = even"&gt;&lt;div *ngIf="e"&gt;{{item}}&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But the problem is I don't want to add a child element just for that. If, for example, it's a <code>&lt;tr&gt;</code> tag inside a table, then adding a <code>div</code> inside will make the DOM weird.</p>
  
  <p>I know Angular 2 is still in beta, but I'm wondering if it's a bug, a feature, or maybe there's an undocumented way to achieve what I want. </p>