This question already has answers here:
Closed 4 years ago.
While playing around with Angular 2, I've encountered a problem: apparently I can't put two structural directives (ngFor, ngIf) on the same DOM element.
In Angular 1 this used to work. For example:
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
When I try something similar with Angular 2:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div *ngFor="#item of items; #e = even" *ngIf="e">{{item}}</div>
</div>
`,
directives: []
})
export class App {
constructor() {
this.items = ["a","b","c"]
}
}
Nothing happens. Not even an error.
If I put the ngIf directive on a child element, it works:
<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>
But the problem is I don't want to add a child element just for that. If, for example, it's a <tr> tag inside a table, then adding a div inside will make the DOM weird.
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.
